12 min remaining

If you’re creating a site for your business, then you probably have a long wish list. You want the design to reflect the look and feel of your brand. You want to have the functionality required to meet the needs of your visitors without going over budget. And you want to create responsive layouts that display elements like buttons and forms consistently, no matter what device or browser the visitor is using.

By building with Bootstrap, you can check that last item off your list. Bootstrap is an open-source framework for quickly building responsive websites and mobile-first web projects. Because it offers a collection of reusable code, you won’t have to build a site from scratch.

Though Bootstrap is an open-source toolkit for developing with HTML, CSS, and JavaScript, it is often referred to as a CSS framework.

Free Intro Guide to HTML & CSS [Download Now]

To understand why, consider that CSS is generally easier to learn for people at all levels of technical experience and is faster in browsers than JavaScript. For these reasons, Bootstrap developers wrote in CSS over JavaScript whenever possible. The CSS library included in Bootstrap is therefore the largest.

That’s why we’ll spend the majority of this post focused on Bootstrap CSS but will refer to HTML and JavaScript when necessary.

Before we explore how to use and edit Bootstrap CSS, let’s take a closer look at what it is.

What sets Bootstrap apart from other development toolkits is that it was developed mobile-first. Meaning, the code was optimized for mobile devices (i.e. the smallest screen size) first and then scaled up to display on larger screens. As a result, building with Bootstrap CSS ensures that your site supports proper rendering and touch zooming for all devices.

Another reason Bootstrap is so popular is that it comes bundled with templates for typography, forms, buttons, drop-down menus, navigation, and other interface components. Using these pre-styled templates, you can add features that enrich the visitor experience on your site without having to code them from scratch.

Though Bootstrap does simplify the process of building a site, you’ll have to be familiar with at least HTML and CSS to use the framework. For example, if you don’t understand the CSS box model, then you’ll likely get stuck when building your first Bootstrap grid.

Now that we understand what Bootstrap CSS is and who should be using it, let’s briefly discuss the different download options you have.

How to Download Bootstrap CSS

Before we walk through the process of downloading Bootstrap, it’s important to note that you can load Bootstrap remotely via BootstrapCDN instead of downloading it. Since this will require visitors to have an internet connection to visit your site and will require you to post more code, however, downloading Bootstrap is the more popular choice.

There are two different forms of Bootstrap available for download. Each version — a precompiled and a source code version — appeal to different users depending on whether they prioritize ease-of-use or flexibility. Let’s take a closer look at each below.

Precompiled Bootstrap

The precompiled version is the most basic form of Bootstrap. You’ll download precompiled CSS and JS files and minified CSS and JS files that are easy to drop in nearly any web project.

Once downloaded, you’ll unzip the compressed folder and see the following structure.

bootstrap/

├── css/

│   ├── bootstrap-grid.css

│   ├── bootstrap-grid.css.map

│   ├── bootstrap-grid.min.css

│   ├── bootstrap-grid.min.css.map

│   ├── bootstrap-reboot.css

│   ├── bootstrap-reboot.css.map

│   ├── bootstrap-reboot.min.css

│   ├── bootstrap-reboot.min.css.map

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap.min.css

│   └── bootstrap.min.css.map

└── js/

    ├── bootstrap.bundle.js

    ├── bootstrap.bundle.js.map

    ├── bootstrap.bundle.min.js

    ├── bootstrap.bundle.min.js.map

    ├── bootstrap.js

    ├── bootstrap.js.map

    ├── bootstrap.min.js

    └── bootstrap.min.js.map

Using the compiled version is easier and faster to use than the source code version — but it’s more difficult to customize. Any change you want to make to a pre-styled element or layout has to be applied with an override to the current styles.

If you want to customize the CSS and JS files included in Bootstrap as you please, then you’ll be better off downloading the source code version.

Bootstrap Source Code

The source code version includes the precompiled CSS, JS, and font assets as well as source files for the CSS, JS, and icon fonts respectively. If you choose to download the Bootstrap source code, then you’ll unzip the folder and see the following structure.

bootstrap/

├── dist/

│   ├── css/

│   └── js/

├── site/

│   └──docs/

│      └── 4.4/

│          └── examples/

├── js/

└── scss/

The dist/ folder contains everything listed in the precompiled section above. The docs/ folder includes the source code for Bootstrap documentation and examples of Bootstrap usage. The js/ folder contains the source code for Bootstrap JS and the scss/ folder for Bootstrap CSS.

Since this version of Bootstrap requires you to have Autoprefixer and a SASS compiler, the set-up process is longer and more difficult than setting up the pre-compiled version. Once set up, however, you can change and customize the files any way you want.

Each version of Bootstrap is ideal for different use cases, but because the precompiled Bootstrap is simpler and faster to use, we’ll focus on that version for the rest of the post. Below let’s look at how you can use the precompiled Bootstrap to build a website.

Let’s break down this process step-by-step.

Loading Bootstrap CSS and JS

First, create a folder on your computer called “bootstrap.” Move the compiled CSS files from your Bootstrap download into that folder. If you are also using the JS part of Bootstrap, move the compiled JS files into the folder as well.

In that same folder, create another file and call it index.html. Open this file with a text editor of your choice, like Notepad++. You can copy and paste the basic HTML template on Bootstrap’s official site into the file or code it from scratch. Below is an example of an HTML page coded from scratch.

 

 

   <!DOCTYPE html>

<html lang="en">

<head>

 

  <title>Bootstrap Tutorial Sample Page</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

 

</head>

<body>



</body>

</html>

You’re now ready to load Bootstrap CSS into your project. Simply add the following line of code into the header of the index.html file, right before the </head> tag.

 

 

  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

If you plan to just use the CSS part of Bootstrap, then you’re all set.

If you plan to use the JS part as well, then you need to add two more lines of code. Components including alerts, toggle buttons, carousels, and dropdowns require the use of JavaScript to function so continue these steps if you want to add any of these elements to your site.

First, you’ll need to load the jQuery library. To do so, download jQuery onto your computer. Unzip the file and save it in the “bootstrap” folder along with the compiled CSS and JS files and index.html file. You’ll then add the following line of code in the index.html file. This time, you’ll add it to the footer, instead of the header, right after the <body> tag.

 

 

  <script src="jquery-3.3.1.min.js"></script>

To load Bootstrap JavaScript, add the following line of code right after the call for jQuery.

 

 

  <script src="bootstrap/js/bootstrap.min.js"></script>

Once you’ve completed these steps, this is what your index.html file should look like:

 

 

   <!DOCTYPE html>

<html lang="en">

<head>

 

<title>Bootstrap Tutorial Sample Page</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

 

</head>

<body>

 

 

<script src="jquery-3.3.1.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

Once you save the folder, you’ll have a basic Bootstrap layout that looks like this:

Basic Bootstrap layout with text Hello, world!

Source

This can now function as the homepage of your site.

Building a Basic Template

To continue building this page, you can add a navigation bar, header, footer, glyphicon font, favicon, and other interface components. Let’s walk through adding one component — a navigation bar — step-by-step so you understand how to use Bootstrap.

Say you want to add a Bootstrap navbar that looks something like this to the homepage:

Bootstrap Navbar with navigation links and an inline form

Source

Now a prospect can arrive on your homepage and immediately find out more about your company, the features of your product, and your pricing — or they can search something else.

Below is the code for this Navbar example.

 

 

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <a class="navbar-brand" href="#">Navbar</a>

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

 

 <div class="collapse navbar-collapse" id="navbarNav">

   <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Features</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Pricing</a>

      </li>

 <li class="nav-item">

        <a class="nav-link" href="#">About</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

 

Let’s break this snippet down into its supported subcomponents: color scheme, brand, toggler, nav, and form.

Color Scheme

Take a closer look at that first line of code. See navbar-dark bg-dark? That calls for a dark background color. If you prefer a light color scheme, replace with navbar-light bg-light. It will look something like the following:

Bootstrap Navbar with light color scheme

Source

Or you can choose one of the other default colors.

Brand

In that second line of code, see navbar-brand? That designates your company, product, or project name. Simply replace “Navbar” before the </a> tag with the correct name.

Toggler

Next, you’ll see a big chunk of code that denotes the toggle button. This button is hidden on desktop. It appears only on mobile, when the content of the navigation bar must be collapsed to fit the smaller screen.

In the code above, the navbar-toggler style is defined so the brand name shows on the left of the mobile screen and the toggle button on the right. Clicking on the button will reveal the collapsed content, as shown below.

Bootstrap Navbar with toggle button displayed on mobile

Source

Nav

In the next bit of code, see navbar-nav? Using this subcomponent, you can add links in your navigation bar. You just need to wrap the appropriate modifier class (nav-link) around the word you want to hyperlink.

Form

You can also add a form, like a search box, in your navigation bar with the form-inline subcomponent. You can see this bit of code at the bottom of the template above.

Now that you know how to add Bootstrap’s responsive navigation header with branding, navigation, and more, you can follow a similar process to add other elements to the page. Let’s take a look at a few of those below.

Bootstrap CSS Examples

Bootstrap offers HTML and CSS templates, or “examples,” to help you start building your site quickly. While Bootstrap Source Code comes with more advanced examples with custom components and layouts that add onto the framework, we’re going to focus on examples that use built-in components available in both the precompiled and source code version.

We’ve already touched on a few examples above, including the Navbar. Below we’ll take a closer look at a few additional examples.

Bootstrap Grid

CSS grid systems are used for creating page layouts through a series of rows and columns that house your content. In the Bootstrap grid system, rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper positioning and padding. These rows are used to create horizontal groups of columns.

Since Bootstrap is a 12-column system, you’ll have to specify the number of twelve available columns you wish to span. Say you’d like to create three equal-width columns that are centered on the page across devices at any size. Then you need three “four-of-twelve” columns, as represented by the .col-4 class. Below is the grid example in full.

 

 

  <div class="container">

  <div class="row">

    <div class="col-4">

      One of three columns

    </div>

    <div class="col-4">

      One of three columns

    </div>

    <div class="col-4">

      One of three columns

    </div>

  </div>

</div>

 

On the front-end of your site, it would look like this on mobile and desktop.

Bootstrap grid with three equa-widthl columns

Source

But what if you want the grid to appear one way on desktop and another way on mobile? Let’s say you want the columns to appear side-by-side on desktop, but stack on top of each other on mobile. Then you can specify the width of the columns with the prefix for “small.” This would make the columns 100% wide until the small breakpoint (540px). Below is the grid example in full.

 

 

  <div class="container">

<div class="row">

<div class="col-sm-4">

One of three columns

</div>

<div class="col-sm-4">

One of three columns

</div>

<div class="col-sm-4">

One of three columns

</div>

</div>

</div>

 

The video below shows how it would look on desktop and then change on mobile.

Bootstrap grid with three columns displays differently on desktop and on mobile

There are many more options you can play around with. Using Bootstrap’s grid system, you can create equal-width columns that span multiple lines. You can set the width of one column and have the sibling columns automatically resize around it. You can size columns based on the natural width of their content — and much more.

Bootstrap Alerts

You can add alerts to your Bootstrap site to provide important messages to your visitors. Bootstrap offers eight default colors for alert messages. Let’s say you want to add an alert to indicate that a visitor has successfully created an account, for example. Then you can use the example below.

 

 

  <div class="alert alert-success" role="alert">

A simple success alert—check it out!

</div>

 

It will look like this on the front-end of your site.

Bootstrap success alert

Source

If you’ve loaded the compiled JS onto your site, you can also add a dismiss button to let visitors close the alert once they’ve read it.

Bootstrap Buttons

With Bootstrap, you can choose from several predefined button styles to quickly add buttons to landing pages or forms on your Bootstrap site. Let’s say you want to add an “info” button to your site. Below is the example and how it would look on the front end.

 

 

  <button type="button" class="btn btn-info">Info</button>

 

Bootstrap info button

Source

While the .btn classes are designed to be used with the <button> element, you can use them on other elements as well. If you’d like to turn a link into a button, for example, then you can use the code below:

 

 

  <a href="#" class="btn btn-info" role="button">Link Button</a>

 

Let’s say I wanted to add a button to my Bootstrap site that encourages visitors to learn more about CSS animation, for example. Then I could link the button to a blog post on the topic. Here would be the code:

 

 

  <a href="https://blog.hubspot.com/website/css-animation" class="btn btn-info" role="button">Learn More</a>

 

And here is how it would function on the site:

Visitor clicks on Bootstrap button with link is redirected to linked article

Source

You can change the color, size, and other aspects of your button by adding the appropriate modifiers.

You can find hundreds of other examples in the Bootstrap documentation to help you build your site.

Once you’re satisfied with the layout, you may want to customize the appearance of these components by changing their colors, font size, borders, or other existing Bootstrap styles. To do so, you can simply override the existing styles. Let’s look at how below.

Remember how you added the following line of code into the header of the index.html file to load Bootstrap CSS on your site?

 

 

   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

 

Right below this, paste the following code:

 

 

  <link rel="stylesheet" type="text/css" href="custom.css">

 

This will ensure that whatever CSS you add in the custom.css file overrides the default styles in the index.html file.

The structure of your index.html file should now look like this:

 

 

   <!DOCTYPE html>

<html lang="en">

  <head>

 

    <title>Bootstrap Tutorial Sample Page</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="custom.css">

 

  </head>

<body>



<script src="jquery-3.3.1.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

It’s important to note that this process of overriding the default CSS styles can work for both the precompiled version of Bootstrap and the source code version. With the latter however, you can also directly edit the Bootstrap SASS source code if you have experience with SASS.

Since many users don’t know SASS, let’s look at an example of editing the precompiled Bootstrap.

We’ll start with a simple layout created by developer and technical writer Tania Rascia. Building off the basic HTML template provided by Bootstrap, she added a navigation bar, jumbotron header, grid, and glyphicons using the templates bundled in the framework. The result is shown below.

Bootstrap template with navigation bar, jumbotron header, grid, and glyphicons

Source

The page is clean, responsive, and cross-browser friendly, but rather austere. To personalize the design, Rascia added custom CSS to the custom.css file. By using CSS selectors, she was able to apply unique style properties to the HTML elements on her page. 

First, she wanted to remove the white space between the navbar and the jumbotron header. So she added the following code to the file using the class selector "navbar."

 

 

  .navbar {

  margin-bottom: 0;

}

 

She also wanted to change the color of the jumbotron to green and the color of the font to white and center the text. She therefore added the following code to the file using the class selector "jumbotron."

 

 

  .jumbotron {

  background: #27a967;

  color: white;

  text-align: center;

}

.jumbotron p {

  color: white;

  font-size: 26px;

}

 

She made several other changes as well. Rather than go through them one-by-one, I’ll just copy and paste the contents of her custom.css file below. You'll notice a mix of type selectors and class selectors are used. 

 

 

 body {

background: #3E4649;

color: #f7f7f7;

font-family: 'Montserrat', sans-serif;

}

h1,

h2 {

font-weight: bold;

}

p {

font-size: 16px;

color: #cdcdcd;

}

.navbar {

margin-bottom: 0;

}

.jumbotron {

background: #27A967;

color: white;

text-align: center;

}

.jumbotron p {

color: white;

font-size: 26px;

}

.navbar-inverse {

background: #2E2F31;

border: 0;

}

.dropdown-menu {

background: #2E2F31;

border-radius: 0;

border: 0;

}

.navbar-inverse .navbar-nav li a {

color: #f7f7f7;

font-size: 16px;

}

.navbar-inverse .navbar-nav li a:hover {

background: #27A967;

}

.navbar-inverse .navbar-nav .dropdown-menu li a:hover {

background: #2C463C;

}

.dropdown-menu li a {

padding: 10px;

}

.btn-primary {

color: #fff;

background-color: transparent;

border-color: white;

margin-bottom: 5px;

}

.btn-primary:hover {

color: #27A967;

background-color: white;

border-color: white;

}

.glyphicon-large {

font-size: 100px;

}

.call-to-action {

text-align: center;

}

.call-to-action p {

margin-bottom: 30px;

font-family: sans-serif;

}



With these changes, she’s completely transformed her Bootstrap website. Take a look below.

Bootstrap template with navigation bar, jumbotron header, grid, and glyphicons with custom CSS overriding default styles

Source

Using CSS overrides, the customization options are virtually infinite with Bootstrap. You can browse through the Bootstrap Expo for a look at some of the most creative uses of Bootstrap.

Building Your Responsive Site

Bootstrap is a powerful front-end framework for building and customizing a mobile-friendly site. With Bootstrap, you don’t have to start from scratch or give up control over the appearance of your site. Get started exploring this framework now to see just how much it’s capable of.

New Call-to-action

 css introduction

Originally published Mar 31, 2020 7:00:00 AM, updated May 27 2020

Topics:

Bootstrap CSS