On numerous occasions, reading posts on technology sites, you will have read the word Bootstrap .
But do you know what Bootstrap is ? In this article we are going to try to approach this framework that is so widespread today.
First of all we have to try to clarify what a framework is .
Briefly, we could define it as a work environment, a set of tools with libraries, modules, etc., which serves to solve problems and similar situations when we use a programming language in a fast and systematic way.
It would be a way to facilitate the work when developing a certain application.
Bootstrap is a is a framework based on HTML, CSS and JavaScript to create responsive websites.
It was initially developed by Twitter so that the developers worked with a similar framework, so that the development of the different sections of the application were homogeneous and standardized and the programming work could be done faster.
Subsequently, the code was released and is now free software and is under continuous development.
Bootstrap contains hundreds of responsive style (CSS) pages to make developing a WordPress theme, for example, easier, saving us from writing and modifying hundreds of lines of code.
By installing Bootstrap on our website we can create buttons, transitions, dropdowns, manners, etc. We will also have access to different scripts that will make a website responsive and attractive without having to write code.
Next, we explain how to use Bootstrap on our website without having to copy all the code in our theme.
You would only have to make a function that makes it integrate into our website by modifying a few lines of our theme.
How can we use Bootstrap in WordPress?
In order to use Bootstrap we will have to add some line of code in the folder of our theme using FTP.
We must modify the file strong> functions.php in our theme.
To do this, we must first go to the official Bootstrap repository where we can find the latest version, specifically at the following address:
https://getbootstrap.com/docs/
Here we copy the code that appears in the first place so that our theme calls the Bootstrap compilation and integrates it without the need to upload more files.
Later, we access the general structure of WordPress files and folders , specifically the Theme folder of our theme and open the functions.php file .
Within the functions we will have to create a new one in which that link that we have copied before will be included.
The new function would look like this:
- Include Bootstrap CSS
function bootstrap_css () {wp_enqueue_style (‘bootstrap_css', ‘https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', array (), ‘4.1.3' );}add_action (‘wp_enqueue_scripts', ‘bootstrap_css');
- Include Bootstrap JavaScript and dependency popper
function bootstrap_js () {wp_enqueue_script (‘popper_js', ‘https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array (), ‘1.14.3', true);wp_enqueue_script (‘bootstrap_js', ‘https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js', array (‘jquery', ‘popper_js'), ‘4.1.3', true);}add_action (‘wp_enqueue_scripts', ‘bootstrap_js');
Note: If you are not going to use Tooltips or Dropdowns you can skip the Popper dependency.
The link must be copied directly from the official Bootstrap page as it changes and the version that exists at the time you are reading this article may be a higher one, so this would no longer be worth it.
You have to take into account that we are touching the code of our WordPress installation, which you should only do if you have complete security of what you are doing.
You should also make a backup of your WordPress before doing anything, so you don't lose anything in the event of an error.
Author: I am Gaurav Bhasin, the CEO at Kanak Infosystems LLP. Our main forte is to provide quality work based on the timelines committed. Our expertise in various facets of odoo development service, ERPNext development and various other applications for different domains makes us as a good choice.
