Using Bootstrap in WordPress can give you many opportunities to create pages, posts, or even a theme with some very distinctive features. Bootstrap is a framework that will allow you to create responsive websites that will work with a variety of devices and screen sizes.
You can also use it to extend the functionality of an existing WordPress site that you would not normally find in a default installation. This guide will walk you through the different ways that you can use Bootstrap for a WordPress website.
Say goodbye to slow loading times and hello to high-performance websites with our new WordPress VPS Hosting plans. Experience 40x faster WordPress page load speeds on purpose-built servers that guarantee 99.99% uptime.
High-Performance VPS Fully-Managed Support Free SSL & Dedicated IP Advanced Server Caching
What is Bootstrap?
The software is a CSS framework for responsive, front-end website development. Bootstrap was created in 2010 by developers at Twitter. It has become one of the most popular open-source projects in the world. It has several major versions that have evolved the software into a responsive web solution with mobile devices as a primary focus.
Bootstrap version 4 brought the integration of SASS (Stylistic Awesome Style Sheets) and CSS Flexbox. CSS Flexible Box Layout Model, or simply “flexbox”, is one of the major elements that allows the page layout to be responsive to different device screens.
How Do You Install Bootstrap for WordPress?
Bootstrap does not come with the default WordPress installation and must be enqueued or referenced in order to be used within WordPress. You may also find hosting solutions that already include Bootstrap.
If you intend to reference Bootstrap, then you can find the link to the latest version on the Bootstrap website. This is the current link that they provide:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">This code needs to go into the header.php file for the theme that you are using in WordPress. The header file name may be described as the “Theme Header” in the editor.
Warning: Note that you are making changes to your theme file. If the theme is updated, it is possible that your added code will be removed by the update. We recommend using a child theme in WordPress to prevent this from happening.
You should also make a backup of your WordPress site before making any modifications so that you can recover your site just in case anything happens.
Follow the steps below to modify the theme header using the built-in editor within WordPress:
- Login to the WordPress Dashboard.
- Click on Appearance.
- Click on Theme Editor. In some cases, it may simply be Editor. If you do not see an editor option for any reason, then you would simply need to look at your WordPress installation files, find the theme folder, find the header.php file, and then open it up in a text editor.
- When you’re editing the header.php look for <head> in the code.
- Copy the code with the link from above (or directly from the Bootstrap site).
- Paste the code immediately after the head tag. Do not overwrite any of the existing code. You can create space by putting the cursor after the head tag and hitting the enter key.
- Click on Update File to save your changes.
- Clear any browser cache and re-load your WordPress site to begin using Bootstrap.
A reference to the current version loads Bootstrap from a CDN. Currently, they use one called JSdelivr. If you intend to start building a theme with Bootstrap, then you should enqueue it into your WordPress theme. The code used to enqueue Bootstrap will need to be added to the functions.php of the WordPress theme you’re developing:
function wpbootstrap_enqueue_styles() {
wp_enqueue_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' );
}
add_action('wp_enqueue_scripts', 'wpbootstrap_enqueue_styles');\To learn more about enqueuing and developing themes for WordPress, please visit Theme Development in the WordPress Codex.
Using Bootstrap in WordPress
Once you have Bootstrap installed then you can begin using it within your WordPress site. The easiest way to demonstrate its use is to show you an example of the code and how it will appear on the site. To see the complete library of code that Bootstrap provides, please see their website.
When you’re using Bootstrap in WordPress, it’s best to simply add it directly in the code on your page or post. We will list some examples to show you how they work.
Alerts
You can utilize the code for alerts in a DIV or P command. It will look like this:
<p class=”alert alert-info”>This message uses Bootstrap “info” and is colored blue</p>This message uses Bootstrap “info” and is colored blue
These are different alert types that you can use and the colors that they will display:
- Primary – blue
- Secondary – gray
- Success – green
- Danger – red
- Warning – yellow
- Info – aqua blue
- Light – white
- Dark – dark gray
Note that the options that you can use in Bootstrap will depend on the version that you are using. The options described here are from version 4.5.3.
Badges
Badges will take text and highlight it in a color. They will scale to the size of the parent element beside it. You can also use the same system color assignments as you saw in alerts. Here is an example:
<h3>This is an example of a badge <span class=”badge badge-success”>BADGE</span></h3>
You can also change the shape of the badge so it looks like a pill:
<h3>This is an example of a badge <span class=”badge badge-pill badge-success”>BADGE</span></h3>
You can also create links with badges that link to a location like this:
<a href=”#” class=”badge badge-info”>Example</a>
The button above is linked to a URL. In this example, it just links to itself.
These examples are just the tip of the iceberg for the many features that you can use within your WordPress site.
Bootstrap is a great tool for enhancing your WordPress site with many features that you will not always find within the new WordPress visual editor. It can provide functionality without requiring a plugin, and help enhance the performance and appearance of your website.
You can also build themes with Bootstrap, though it requires a lot more initial work. When you have the framework for the themes you want to create with Bootstrap, you will discover a lot of the flexibility and functionality that creating a responsive theme provides. To see examples of Bootstrap-based themes, check out the Bootstrap theme page.
To learn more about using WordPress, check out our WordPress Education channel!
