How Bootstrap and WordPress Work Together
Most people are probably familiar with the saying, “pull yourself up by your bootstraps.” Though it’s commonly used to mean “rely on yourself for success,” the phrase was originally coined as a reference to something impossible—after all, you can’t lift yourself using your own boots.
But unlike the goal of the popular saying, there’s nothing impossible about using the Bootstrap framework with WordPress Hosting services. Designed to make responsive web design hassle-free, Bootstrap is one of the most popular creative web tools available today.
In this short guide, we’ll explain the ins and outs of WordPress Bootstrap—what it is, why it’s so highly regarded, and how to use it.
What is Bootstrap for WordPress?
Originally designed by a team of developers at Twitter, Bootstrap is an open-source framework that allows you to create responsive, professional-looking websites with ease. In particular, there’s an emphasis on building mobile-friendly sites.
In this context, the term “framework” refers to a pre-written portion of code (in this case HTML, CSS, and JavaScript) that you can use as a jumping-off point for designing your website. The plug-and-play philosophy of Bootstrap CSS makes it ideal for users who are just beginning to work with WordPress development, but it’s equally useful to seasoned developers. Because the framework is free and open-source, you can add or edit lines of code, tailoring it to your individual needs.
In short, Bootstrap takes care of some of the tricky, behind-the-scenes programming details that help a website run smoothly, allowing you to focus on the front-end parts of your website that are visible to visitors.
Why Use Bootstrap in WordPress?
Bootstrap is a versatile tool that facilitates the creation of custom, responsive sites. But don’t just take our word for it—even multinational corporations like Nintendo and Spotify have used Bootstrap to develop stunning websites. Here are some of the many reasons to integrate Bootstrap components into your WordPress website:
- It’s geared toward mobile device usage – Perhaps most importantly, the Bootstrap template makes it easy to build “mobile-first” websites. Mobile users make up an increasing portion of web traffic—85% of all Americans own a smartphone, and 15% of U.S. adults access the internet exclusively via their mobile devices. If your site isn’t mobile-friendly, you’re missing out on a growing demographic of customers.
- It’s open-source – When a piece of technology is open-source, it means that anyone can view and modify the source code. Because the code is visible to everyone, there’s a sense of transparency. What’s more, open-source software is often more secure, as the community of developers can quickly patch any issues.
- It helps improve website speed – Bootstrap promotes the development of lean, quick-to-load websites. Instead of relying on WordPress plugins for additional functionality, you can use the framework to build helpful features directly into your custom WordPress theme. With fewer plugins, your site will run faster.
- It saves you time and effort – With dozens of pre-built WordPress customizer capabilities like buttons, navigation bars, accordions, tooltips, and more, Bootstrap makes creating beautiful, interactive websites a breeze for a web developer. All of the code required for these elements is already written, so you can spend less time programming and more time designing a memorable WordPress site.
- It’s easy to find help – As one of the most popular tools for building responsive websites (over 20% of websites use Bootstrap, including businesses like Netflix and Target), you’ll rarely come across a problem that someone else hasn’t already solved. With endless forums, instructional videos, and support documents, anyone can learn to master Bootstrap.
- It takes care of browser compatibility – Using a collection of CSS changes called Reboot, Bootstrap helps your website render consistently across various browsers and devices, creating a responsive website that will promote the overall customer experience.
- It’s free – Like WordPress, Bootstrap is 100% free to download and use.
Top 5 Free Bootstrap WordPress Themes
The easiest way to start using Bootstrap in WordPress is to activate a responsive WordPress theme that already uses it. Many theme developers include the framework within their themes, so you can take advantage of Bootstrap without having to download it and set it up.
If you want to start experimenting with Bootstrap right away, there are dozens of free WordPress themes to choose from. In no particular order, these are some of our favorites:
1. Futurio
With a wide range of potential applications—including creative portfolios, eCommerce sites, and blogs—Futurio is a terrific choice for web development pros and novices alike. It’s a remarkably fast-loading theme, thanks in part to its use of Bootstrap to add functionality.
With that said, the theme is still compatible with most WordPress plugins. Best of all, you can choose from any of their one-click demo sites and install a fully functioning website within minutes.
Add in SEO optimization and multi-language support, and it’s easy to see why Futurio makes the top five.
2. Shapely
Shapely is a one-page WordPress theme, which means all of a website’s content exists on a single landing page. While this may seem undesirable, one-page sites actually provide an optimal mobile experience, as users can seamlessly scroll through different sections.
Whether you’re looking to add testimonials, product information, calls to action, or more, Shapely makes it easy. The theme is fully responsive, SEO friendly, and supports the majority of free and paid WordPress plugins.
3. NewsMag
For the sophisticated blog, magazine, or online newspaper, there’s NewsMag. This theme harnesses the power of Bootstrap to deliver a sleek, adaptive, SEO-ready website.
Choose from four different blog page styles, or dig in and customize the homepage to your liking. Standout features include:
- Custom backgrounds
- Contact forms
- Google fonts
- Featured post banners
- Responsive video
- Dynamic widgets
- Sliders
For all your online media needs, look no further than NewsMag.
4. Illdy
There’s a trendy feel to Illdy that makes it adaptable to any business or product. And the perks of this theme don’t end with the visual appeal.
For a free theme, Illdy is incredibly versatile—potential uses range from personal blogs to established businesses. And thanks to Bootstrap, a site built with Illdy runs smoothly on smartphones, tablets, and desktop computers.
The most interesting aspect of Illdy is the ability to develop your website in “Live Preview” mode. This feature allows you to view changes on your site as you make them.
5. Sparkling
Sparkling is a masterclass in minimalism. With a slick interface that suits any application or industry, this free WordPress theme is one of the best.
Along with an SEO-friendly design, Sparkling comes packaged with sliders, popular post widgets, social icon integration, and the ability to add author biographies. With more than 20 languages available and support for infinite scrolling, Sparkling is a clear example of Bootstrap done right.
How to Add Bootstrap to WordPress
While it wasn’t designed specifically for WordPress, Bootstrap can be added to any WordPress site through various methods. However, the process does involve diving beneath the surface of WordPress, so a little programming knowledge will go a long way. With that in mind, we’ve outlined the steps for the easiest method as clearly as possible so that anyone can start using Bootstrap 5—the most up-to-date version of the framework.
Step 1: Take the Necessary Precautions
Anytime you plan to make changes to your WordPress theme—no matter how small—it’s essential to do two things first:
1. Make a backup of your site – Should something in the process go wrong, you can always start again from a recent backup.
2. Create a child theme and make all changes there – Editing your parent theme in WordPress is inadvisable, as you run the risk of overwriting the code in your main theme.
If you don’t start with these two safeguards, you risk losing any changes you’ve made or, even worse, causing your entire website to stop working.
Step 2: Open the WordPress Theme Editor
First, log in to your WordPress dashboard. From there, you’ll select Appearance from the right-hand menu, then click Theme Editor. Navigate to the Theme Header section (header.php).
Step 3: Paste in the Reference Code
Now that you have the theme header open, you’ll need to paste in a line of code just below the <head> tag, taking care not to delete or overwrite any existing code. At the time of writing, the code used to reference Bootstrap is:
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″ crossorigin=”anonymous”>
Bootstrap uses the CDN jsDelivr to deliver a cached version of Bootstrap’s compiled CSS via this code. Be sure to check the Bootstrap website and copy the most up-to-date stylesheet.
Step 4: Finish Up
All that’s left to do is click the blue Update File button, clear your browser cache, and re-open WordPress. You now have a reference to Bootstrap built into your theme, and you can start using it to optimize your website.
Make the Impossible Possible with Bootstrap and WordPress
If you’re already using WordPress as a content management system, you’ll love Bootstrap for many of the same reasons: it’s free, open-source, and a powerful tool for web development.
Once you have a Bootstrap-enabled WordPress theme, the perfect complement is a lightning-fast managed WordPress hosting plan from WP Engine. With these web solutions at the ready, you can achieve something previously thought of as impossible—building a world-class website without breaking the bank.
About the tutorial
You can access the full tutorial roadmap & resources here or explore the videos below.
#01: Environment (PHP/MySQL/WordPress)
In the following video, you will learn how to install PHP and MySQL using XAMP. Afterward, we will create a new instance of WordPress.
#02: Theme (Using CLI)
Once we have WordPress up and running locally we can create new theme. You can either create empty starter (without any CSS nor JS) or use predefined starters which comes with preinstalled MDB package.
In this section we will show you how to easily create WordPress theme with single command. (At the bottom of the page we will also show you two alternative ways to create an empty theme)
#03: Deployment (coming soon)
Using MDB CLI you can easily create and deploy WordPress. With a single command, your website will be published on the Internet.
#04: Blog Homepage
In the following video you will learn how:
- Add custom styles to your theme
- Import new libraries to your theme
- Change configuration of your theme (add feature image support)
- Use WordPress Loop
#05: Blog Post Page
In the following video you will learn how:
- Create WordPress template hierarchy
- Build WordPress loop for single posts
#06: WooCommerce Product Page
In the following video you will learn how:
- Install WooCommerce
- Add support for WooCommerce in our theme
- Work and adjust WooCommerce hooks
- Work and adjust WooCommerce templates
#07: WooCommerce ShopPage
In this tutorial we will learn how to create a WooCommerce shop page.
Additional resources
Learn web development with our learning roadmap:
�� Start Learning
Join our mailing list & receive exclusive resources for developers
�� Get gifts
Join our private FB group for inspiration & community experience
�������� Ask to join
Support creation of open-source packages with a STAR on GitHub
How to Use Bootstrap in WordPress
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.
Improve the performance and security of your WordPress website with our new Managed WordPress Hosting plans. Get 40x faster speeds with dedicated resources, server caching, and optimization tools.
High-Performance VPS 99.99% Uptime 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:
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:
-
.
- 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. 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:
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:
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:
You can also change the shape of the badge so it looks like a pill:
You can also create links with badges that link to a location like this:
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!
How to Use Bootstrap in WordPress: A Beginner’s Guide
WordPress and Bootstrap are both popular platforms for web design that aren’t often considered as compatible. Bootstrap has grown to be a favorite CSS platform for developers because it makes it easy to build responsive websites. More than 70% of websites on the internet are designed with it. You can code anything you’d like into its responsive framework to create a unique website that’s mobile-friendly, right out of the box. With more than half of all users accessing the internet via a mobile device, it’s crucial to have a responsive site.
What if we told you that you can use Bootstrap and WordPress together? Well, you can. There are a few ways to use Bootstrap in WordPress, including WordPress Bootstrap plugins which can add Bootstraps blocks to the WordPress Editor. We’re going to cover all the ways to use Bootstrap in WordPress and show you how.
- 1 What is Bootstrap?
- 2 The Advantages of Using Bootstrap
- 3 Ways to Use Bootstrap in WordPress
- 3.1 Installing Bootstrap Manually
- 3.2 Using a Bootstrap WordPress Theme
- 3.3 Using a WordPress Bootstrap Plugin
- 4.1 1. Modify the Twenty Seventeen Theme CSS for Bootstrap
- 4.2 2. Install and Setup the Plugin
- 4.3 3. Create a Page Layout With All Bootstrap Blocks
- 4.4 4. Making Adjustments to the Container
- 4.5 5. Create the Next Section
- 4.6 6. Create the Last Section
- 4.7 7. Optimize Page for Mobile Devices
What is Bootstrap?
Bootstrap was created by two Twitter experts, Marc Otto and Jacob Thornton. With so many people accessing the internet by phone, they wanted to design a framework that would put mobile users first. Because of this, Bootstrap is widely popular with web developers. To accomplish mobile-first design, Bootstrap uses a grid system, or column structure, that adjusts page designs at certain breakpoints or screen resolutions.
Bootstrap is made up of HTML, CSS & Javascript. It’s a free and open-source framework, which allows users to add any HTML or Javascript component that they wish. There are many Bootstrap developers who create components and sell them in several marketplaces to assist beginners in developing their websites. Like WordPress, Bootstrap is very popular and allows for some beautiful designs.
The Advantages of Using Bootstrap
In addition to being geared towards mobile devices, Bootstrap is fast. It is a CSS Framework which is different from a CMS. So there isn’t any bloat like you will find on some CMSs to slow your site down. Another advantage is browser capability. It works right out of the gate with Chrome, Safari, Firefox, and others. There isn’t any need to use webkit CSS rules to make Bootstrap work — making it an excellent choice for cross-browser compatibility. Also, the framework is easy to use. Anyone who knows CSS and HTML can work with Bootstrap. Lastly, there is a large community surrounding Bootstrap. Users are quick to share knowledge about features, coding, or any other related issue a new developer may need help with.
Ways to Use Bootstrap in WordPress
There are a few options if you want to use Bootstrap in your WordPress site. You can install the script manually, but you’ll need to do most of the coding on your own to bring it to life. Secondly, you can use a pre-made Bootstrap theme for WordPress. There are several out there to choose from, but by choosing this option, you are stuck with your site looking exactly like the theme. There won’t be many options to make it look less cookie-cutter unless you code your own page templates to change things up. And, lastly, you can use a WordPress plugin to build your site using Boostrap.
In recent years, WordPress developers have started releasing Bootstrap plugins that can be used within WordPress. These plugins are beginning to take hold, especially since the release of Gutenberg Blocks. By using a WordPress Bootstrap plugin, you can bring the best of both platforms together. Before we delve deeper into what you can do with these plugins, let’s expand a bit on the other option available to you to bring your Bootstrap project to life in WordPress.
Installing Bootstrap Manually
If you don’t want to use a plugin, you can always build your site with Boostrap manually. To do this, you’ll need to add a link reference to Bootstrap in the head of your WordPress site. You may need to add a code snippets plugin to do this depending on what theme you are running.
A CDN link to Bootstrap’s external stylesheet in your site’s header will look something like this:
Make sure to check Bootstrap’s website to ensure you are using the latest script so that you can benefit from the latest release available to you. Keep in mind that you can build your own WordPress theme that incorporates Bootstrap, but it will take quite a bit of work on your part. This would involve modifying core pages — index.php, wp-admin.php, and others. For this tutorial, we’re going to use a Bootstrap plugin since it is a much easier approach for most.
Using a Bootstrap WordPress Theme
There are quite a few free Bootstrap WordPress themes available in the WordPress repository. Each one is fully responsive, and built completely using Bootstrap. Let’s take a look at some of the more popular choices.
Shapely
Shapely is the most popular Boostrap WordPress theme available. It’s a one-page design that comes with Bootsrap fully integrated. There are several homepage widgets, and support for major WordPress plugins such as WooCommerce, Jetpack, Gravity Forms, Yoast SEO, and more. Thanks to the Boostrap integration, Shapely is 100% responsive.
Illdy
Illdy is a multi-purpose Bootstrap WordPress theme that utilizes a front-end visual editor. Like all Bootstrap-based themes, Illdy is fully responsive. It’s suited for creative businesses because of its built-in portfolio functionality.
Activello
Activello features a full-screen slider on the homepage, which provides a stunning look when you first click on the page. It’s well-suited for bloggers and comes with support for most popular WordPress plugins. Additionally, Activello is compatible with Schema, which makes this theme very SEO-friendly.
Using a WordPress Bootstrap Plugin
For this tutorial, we’ll be using a plugin to build our Bootstrap page in WordPress. Both the plugins we’ll talk about enable the use of Bootstrap with Gutenberg blocks, but one offers an easier path than the other.
Bootstrap Blocks
Bootstrap Blocks is a WordPress plugin that adds Boostrap Gutenberg blocks to the WordPress editor. The plugin requires quite a bit of customization to fully integrate with WordPress. It doesn’t include the Bootstrap library in the plugin. If you want to have that functionality, you’ll need to manually add code to your functions.php file. This plugin is suited more for the WordPress developer with a good amount of programming knowledge. If you already have familiarity with how core WordPress files work, and have a good concept of Bootstrap, this might be the way to go. However, there’s one thing you should keep in mind about this plugin. You’ll only gain access to a few components — containers, rows, columns, and buttons. If you want a more robust option without a lot of hassle, you’ll likely want to consider a different approach.
All Bootstrap Blocks
The All Bootstrap Blocks plugin has some really nice features. Not only does it incorporate the Bootstrap framework into WordPress for you, but it also gives you 37 very cool blocks to use alongside Gutenberg blocks. You’ll get features like columns and rows — which are the foundation blocks of Bootstrap. Additionally, there are modals, accordions, content cards, icons, and so much more. It’s almost like having a fully functional theme just by installing a plugin. There is a bit of a learning curve to get things to look just right, especially if you are used to a drag-and-drop visual builder. However, if you’ve been coding by hand with divs and columns, this will be a breath of fresh air.
How to Use Bootstrap in WordPress to Design a Page (Step by Step)
For this tutorial, we’re going to build a page in WordPress using the Twenty Seventeen theme and All Boostrap Blocks. We’re going to model our page after the camera product page available with an Elegant Themes subscription.
1. Modify the Twenty Seventeen Theme CSS for Bootstrap
Now, if you know anything about Twenty Seventeen, you’ll see that by default, there is a big header image, followed by a two-column layout. For our page layout, this simply won’t do. We’re going to need to make some changes to get our page to look like the camera product page.
The first thing we’ll need to do is remove the header image that comes standard on the theme. To do this, navigate to customizer in the black admin bar.
When the screen refreshes, click on the additional css section.
Finally, add in the following CSS:
This will do a few things. First, it will make the width of the content fill the full width of the page. Secondly, it will remove any margin and padding on the page. Don’t worry, Bootstrap will control those. Additionally, it will remove the header and footer area of your site. Lastly, it will remove the page name from our soon-to-be masterpiece.
Note: If you want to create a footer for your page, you can omit the site-footer CSS rule above.
Once you click publish, your page should look like this:
2. Install and Setup the Plugin
Now that we have our theme’s page all ready to go, you’ll need to install the All Bootstrap Blocks plugin. Once installed and activated, there are quite a bit of customization options to choose from. You can adjust colors, typography, links, and a lot more. To get started, head over to Boostrap > Customize. You’ll find tabs for customizing your layout, content, creating forms, and components.
3. Create a Page Layout With All Bootstrap Blocks
To get started, create a new page. Once your page is created, start with a strip block for the first block on the page. This will create a section that adds a container, row, and column.
Click on the + and click browse all. This will bring up a sidebar with the available modules.
Under bootstrap layout, choose strip.
When the content is added, you’ll see that a container, row, and column are visible inside the strip. Next, you’ll choose a heading and set it to H4.
Click the + to add another heading under the h4 tag. Set it to H1, then set the size to 7em.
Next, add a Bootstrap button by clicking the +. Type “button” in the search bar. Set the button’s text. Next, set the style to dark, the size to medium, and leave text wrap as default.
For the last item in the section, choose an image by clicking +. Add any image you like, but you can also right-click on the Divi layout example and save the large camera image to use in your layout. Click upload to insert the image.
You’ll see that the image is directly underneath the button, but there’s not enough space between the two. To fix this, add a spacer. Click into the column underneath the image to bring up the +. Search for spacer. Add the spacer and give it 30px height. Next, click the up arrow to move it above the image.
4. Making Adjustments to the Container
After saving the page, open it in a new tab. You’ll notice that we still need to set the background color for the section and give it a bit of padding to bump it down from the top of the page.
Head back over to the back end and click inside the container. You can either do this by selecting the menu near the top of the page, or by clicking inside the container itself on the page builder. Next, slide the display background toggle on. Set the horizontal alignment to center, then set the color to #c6e8ff.
Next, set the container to container-fluid. This will make the container span the full width of the page.
Finally, we’ll need to add some padding to the row. Click the dropdown menu on display. Set the padding to 50px top and bottom.
5. Create the Next Section
Next, we’ll create a section with icons and text. To get started, add another strip beneath the first one by clicking the +. The next step is to insert an icon into the layout. Click the +, then type icon into the search bar.
Select the icon module. Click the settings dropdown menu to reveal the icon choices. Choose dark as the style, then set the size to medium. Leave the default icon bi-activity as the icon selection.
Under the icon settings, set the horizontal align to start. This will align the icon to the left to match the rest of the column.
Add an H4 and type your headline. Next, set the text alignment to left, color to dark, and leave the size at default. Finally, choose medium for the appearance.
Click + to add paragraph text. Set the alignment to left, color to dark, and leave the size at default. Use the text of your choice.
Save the page and view it in a new tab. You’ll notice that there isn’t any spacing above the icon. To fix this, click into the row settings to add 50px padding to the top and bottom.
Lastly, under settings XXL, set the horizontal align to center. This will center the content in the middle of the page in all screen sizes.
The next step is to duplicate the columns. This is a big time saver. You’ll only need to swap out the icon and text. To do this, click the settings of the columns, then click duplicate. Repeat this step once more to have a total of three columns.
Now three columns are centered on the page with a left alignment on the icon and text. Next, change the icon in the middle column. Click on the icon and choose bi-lightbulb-fill. For the icon in the third row, choose bi-zoom-in.
Next, change the headlines in the second and third columns.
Duplicate the First Row
Now the first row of icons is complete, duplicate the row to create the second row of icon boxes.
Repeat the steps above to change the headlines in all three columns, as well as the icons. For the icon in the first column, use bi-wind. The icon for the second column is bi-brightness-lo-fill, and the third icon to bi-person-fill. The last step of this row is to change the headlines.
6. Create the Last Section
Start with adding a new strip. Under the settings, change the background color to #f0f0f0.
In the container settings, set the width to container-fluid. Also, add 50px top and bottom padding to the row.
Duplicate the single column to make one more column. Next, adjust the column width on each column to adjust for the size requirements of the layout. For the first column, make it a width of 5.
For the second column, leave the column width as is. Next, add an H2 heading, followed by an H4 heading. Set both to align left.
Add an image to the right column. Refer to our Divi layout to snag the image to import. Set the image to align with the center.
For the next step, insert two columns under the headings in the left column. Add the row module.
Duplicate the column within the newly created row.
Click into the first column on the left and set the size to 3.
Now that we have our column structure in place, we can add an icon. Choose the bi-arrows-fullscreen icon and set the size to large. Set the style to dark. Be sure to align the icon to the left by setting the horizontal alignment to start.
For the right column, we’ll add an H4 heading, followed by a paragraph. Make sure to set the color to dark then left align each. Add a spacer underneath the H4 heading and give it a height of 30px.
Next, we’ll duplicate the interior row we created two times.
The final step is to change the icons in the second and third rows. For the first, choose the bi-card-image icon. The second icon will be bi-camera-fill.
7. Optimize Page for Mobile Devices
One of the best things about Bootstrap is the ability to make your design responsive with ease. The page is complete, but there are a few steps left to make it ready for mobile devices. First, we’ll need to tell Bootstrap how many columns our sections should take up on smaller screens.
The first strip is already set to one column, so we don’t need to worry about that one. For the second strip, there is a small adjustment to make.
Scroll down to the settings (XS) section and set the columns to 1.
Next, switch over to XXL and set the columns to 3. This will tell Bootstrap to place all content in the row to display in one column on mobile, and three columns on larger screens.
You can tweak the other screen sizes to your liking, but these settings will make your layout look good on both larger and smaller screens.
Final Result
What About Using Bootstrap with Divi?
While Bootstrap is a good option when working with generic WordPress themes, it’s generally not the best option if you plan to use Divi. With Divi, you can design fully responsive, beautiful websites without the need for any Bootstrap integration. Divi comes standard with more than 40 modules, which allows for endless design possibilities. Additionally, Divi includes more than 200 full website packs with over 2,000 pre-made website layouts available to you.
If you plan to create your own look, Divi’s built-in Visual Builder makes it easy. You can see changes in real-time as you design your site on the front end. You can create and customize your pages effortlessly using modules, then edit colors, text, add background effects, and more. Divi allows you to save and manage your designs, as well as set global elements and styles.
WordPress Bootstrap Plugins Make it Easy to Use Bootstrap
While WordPress isn’t made to work with Bootstrap natively, they do work well together with a little help. If you are the hands-on type, you can bring Bootstrap into your WordPress site by creating custom page templates, but you’ll need to do a lot of coding. That being said, with the plugins available in the WordPress repository, integrating the two is a less daunting task. With the All Bootstrap Blocks plugin, you can take an ordinary plain Jane theme and create a WordPress site without all the time needed to code things manually. If you are looking for an easy way to integrate Bootstrap with WordPress, you should look into using a WordPress Bootstrap plugin.
Have you incorporated Bootstrap into your WordPress builds? If so, sound off in the comment section below.