Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
On numerous occasions, reading posts on technology sites, you will have read the word Bootstrap.
But do you know what it is Bootstrap? In this article we will try to make an approximation to this framework so widespread today.
First of all we have to try to clarify what a framework.
Briefly, we could define it as a work environment, a set of tools with libraries, modules, etc., which is used 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 for developers to work 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 in continuous development.
Bootstrap contains hundreds of responsive style pages (CSS) 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, modals, etc. We will also have access to different scripts that will make a responsive and attractive website without having to write code.
Here’s how to use Bootstrap on your website without having to copy all the code into your theme.
It would only be necessary 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 a few lines of code in our theme folder via 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:
Here we copy the code that appears in the first place so that our theme calls the Bootstrap build and integrates it without the need to upload more files.
Later, we access the , specifically the Theme folder of our theme and open the file functions.php.
Within the functions we will have to create a new one in which that link that we copied before will be included.
The new function would look like this:
- Include Bootstrap CSS
- Include Bootstrap JavaScript and popper dependency
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’);
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.
You must copy the link directly from the official Bootstrap page since 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 keep in mind that we are touching the code of our WordPress installation, which you should only do if you are completely sure of what you are doing.
You should also do one before you do anything, so you don’t lose anything in case of an error.
Help us improve our content by sharing your opinion
SEO Specialist at .com
Facebook Comments
Disqus