In 2011, Twitter introduced the Bootstrap framework. Since then, this CSS framework has seen two major rewrites, with the most recent one (Bootstrap 3) released in 2013. Bootstrap 3 transformed the CSS library by implementing a mobile-first approach that left the framework completely responsive.
As of 2022, Bootstrap is at version five and is one of the most popular frontend frameworks. It has an extensive list of prebuilt components and an impressive collection of JavaScript plugins. In this article, you’ll learn how to use Bootstrap and make the most of its features.
Installing Bootstrap in Your Project
There are three ways to use Bootstrap in your project. You can download and host the CSS and JavaScript files, install it in your project using npm, or copy and paste the appropriate cdn links in your project.
With the cdn approach, you need to remember to place the Bootstrap link before any other CSS link in the head tag of your HTML file.
Some Bootstrap components have functional activities, such as button toggling and positioning that requires the importation of JavaScript and Popper script. So, if you intend to utilize any functional components, you’ll need to add the script tag to your HTML file as well.
The final thing you need to start using Bootstrap is the viewport <meta> tag.
The Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1">
Since Bootstrap is a mobile-first technology, the viewport <meta> tag will aid in responsive design. A simple way to use bootstrap in your project is to just copy Bootstrap’s starter template.
Creating a Website With Bootstrap
When you’re creating a new website, one of the first things you need to consider is the layout. After that, you can move to other components like buttons and typography.
Bootstrap has a collection of structural components that you can use to organize elements on a web page. These layout structures include:
- Containers
- Grid
- Columns
- Gutters
- Breakpoints
Using a slightly altered version of the Bootstrap starter template, you can start outlining the structure of your webpage and add new components.
The index.html File
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Bootstrap</title>
</head>
<body>
<!-- Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
The Bootstrap Container Class
The Bootstrap container class pads, contains, and aligns the elements on your webpage. If you plan to use Bootstrap’s default grid, then you’ll need to also use Bootstrap’s containerclass. There are three types of container classes; container, container-fluid, and container-{breakpoint}. The container class is the default container; it is responsive and has a fix-width at each of Bootstraps six breakpoints.
Bootstrap’s six default breakpoints includes:
- Extra Small: Less than 576px.
- Small: Greater than or equal to 576px.
- Medium: Greater than or equal to 768px.
- Large: Greater than or equal to 992px.
- X-Large: Larger than or equal to 1200px.
- XX-Large: Bigger than or equal to 1400px.
To use Bootstrap’s container in your project, you can simply add the desired container class to the external div on your webpage.
Using Bootstrap’s Container
<div class="container">
<!-- place website elements here -->
</div>
Inserting the code above in the body of your existing HTML file will make your webpage responsive, and it will also create padding on each side of your webpage.
The Bootstrap Grid System
Bootstrap’s grid uses a twelve-column system that relies on the row and col grid classes, as well as the container class. Each row has twelve columns, and any element can span across one or more of these columns. The column class will indicate how many columns an element should occupy. For example, an element using the col-2 class will span across two columns, an element using the col-3 class will span across three columns, and so forth.
The Bootstrap grid system is based on the flexbox module. If only two columns occupy a row, they’ll divide the space equally among themselves. The gutter class is one of Bootstrap’s structural elements, and it controls the spacing between each column in the grid system. Each grid column has 12px of padding on either side.
Using Bootstrap’s Grid System
<nav class="row">
<!-- navbar -->
<h2>Navigation Bar</h2>
</nav>
<div class="row" id="webpage-body">
<article class="col" id="main-content">
<!-- main content on a webpage-->
<h1> Article </h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, distinctio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
</p>
</article>
<aside class="col-sm-4">
<!-- sidebar -->
<h3> Related Article </h3>
<h3> Related Article </h3>
<h3> Related Article </h3>
<h3> Related Article </h3>
</aside>
</div>
<footer class="row">
<!-- footer -->
<h2>Footer</h2>
</footer>
Inserting the code above into the container div will create a Bootstrap grid system of three rows and two columns. The first row at the top will hold the navbar, the third row at the bottom will hold the website footer, and the second row in the middle will hold the content of the webpage. The second row has two columns—the main article and an aside.
Creating a local CSS file and adding a border to each section of the grid will allow you to see it more clearly.
The style.css File
.row{
border: 2px blue solid;
}
.col, .col-sm-4{
border: 2px red solid;
}
Linking to the CSS file above will create the following output in your browser:
An obvious difference in the image above is the size of the columns. Usually, two (or more) columns in a row occupy the same amount of space unless you explicitly state otherwise. The col-sm-4 class in the HTML code above ensures that the second column only spans over four of the twelve columns in the row. The sm in the col-sm-4 class represents the small breakpoint, so, the aside section will only occupy four columns from the small breakpoint and above.
Bootstrap Components
After you’ve decided on the layout of your webpage the next step is to add website building elements, which Bootstrap calls components. Bootstrap’s list of components include:
- Navbar
- Buttons
- Button group
- List group
- Cards
- Collapse
- Dropdowns
The Bootstrap Navbar Class
Every Bootstrap navigation bar requires the navbar class. They also require the use of the <nav> tag or assigning the “navigation” keyword to the Bootstrap role attribute in the navbar’s parent div. To make the navbar responsive you’ll need to use the collapse JavaScript plugin.
The Bootstrap navbar class uses an aria-current attribute that takes the “page” value to indicate the current page, or “true” to indicate the current section of a webpage. The value you assign will depend on the structure of your website (single page or multiple pages). You should also use the active class to indicate the current page or section.
Using Bootstrap’s Navbar
<nav class="row navbar navbar-dark bg-primary navbar-expand-lg">
<div class="container-fluid">
<div class="col">
<a class="navbar-brand" href="#">Website Logo</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class=" col collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Replacing the navigation row of the Bootstrap grid with the code above will create the following output in your browser:
There are several other important classes and Bootstrap attributes in the code above, such as the navbar-brand class, which targets the logo section of your navbar. The navbar is also completely responsive thanks to the collapse JavaScript plugin.
Responsive Navbar
You may recall that Bootstrap has six default breakpoints and one of those breakpoint is large (lg). The navbar-expand-lg class in the <nav> tag above expands into a horizontal list of navigation items at the large breakpoint and above, and that list reverts to a button at any breakpoint below large.
If you want to learn more about creating responsive websites, we’ve put together a piece outlining how to do this with media queries in HTML and CSS.
The Bootstrap Button Component
The Bootstrap button component uses the <button> tag and requires that you set the typeattribute to “button”.
Bootstrap has several types of buttons. To create the more conventional button you would use the btn class, but to create a hamburger button like in the code above you’d use the navbar-toggle class.
When Should You Use Bootstrap?
Bootstrap is known as one of the more popular CSS frameworks because it is a trailblazer. Long before responsive design was so commonplace in software development, Bootstrap transformed itself into a completely responsive framework.
Over the years, Bootstrap has continued to advance and improve, making it the number one choice for top companies, such as Twitter and Spotify. However, it will not always be the best option for your software development needs. For example, if you’re creating a React application there’s a design system called MUI that’s customized for React applications.
