How to Build a Responsive Bootstrap Website

Syed Fazle Rahman
Syed Fazle Rahman
Share
In this article, we’re going to build a responsive Bootstrap website from scratch. By the end of this article, you’ll be familiar enough with the latest version of this popular CSS framework to be able to build your own variations of it according to your project’s needs.
Building responsive websites is a must nowadays. People access websites from all kinds of devices, and Google has made a point of stressing the importance of responsive web design when it comes to assigning ranking in web page results. Designing responsive websites from scratch can be taxing for beginners, although the latest Flexbox and CSS Grid specifications make achieving great results in this field much easier than it used to be. However, for those who aren’t ready to tackle cutting-edge layout techniques yet, the Bootstrap grid still offers an excellent alternative.

What “Responsive Bootstrap Website” Means

The first thing that comes to mind when we use the word “Responsive Design” is that websites should be compatible with all kinds of devices and screen sizes. There’s a constant demand in the industry to make every website responsive for better readability of the online contents in different environments. With the help of CSS3 and definitely HTML5, this is now a consolidated trend. But what if you’re a developer and not a designer? BONK! Well, you don’t have to worry any more. Since Bootstrap is a superhero in the field of CSS frameworks, you’ll be able to tackle responsive web design with its help in no time.

Setting Up

Ensuring you get a responsive Bootstrap website is as simple as placing the correct meta tag inside the head of your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The above meta tag is quite self-explanatory in nature. We’re setting the width of the page to the width of the device and initially scaling it to 1 — its default size. Apart from this, you’re good to go: Bootstrap is responsive by default.
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
Here’s a demo of the page we’re going to build:

See the Pen Building Responsive Websites Using Bootstrap by SitePoint (@SitePoint) on CodePen.

Let’s Begin Building Our Responsive Bootstrap Website

I’ve divided the above responsive web page into different categories, and we’ll see how to build each one of them in detail:
  1. the responsive navigation
  2. the marketing area
  3. the contents section
  4. the right sidebar
  5. the footer

The Responsive Navigation

Let’s build the navigation bar of the website. It will contain the website’s title and some right-aligned menu link items. This is going to be fixed to the top of the website, as you’ve seen in the demo page. So here’s the markup for this:
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
The navbar class is for showing the navigation section. An additional fixed-top class makes it stick to the top of the page. The navbar-light
and bg-light classes control the text color and background color of the navigation bar respectively. Pretty clear! Let’s move ahead and insert some more code into it:
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">

    <!-- more navigation code here -->

  </div>
</nav>
The container is used to contain everything inside the navigation bar as a wrapper. Till now, whatever we’ve added is just the basic structure of our navigation bar. Let’s see the real magical stuff that makes the navigation responsive.
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Responsive Website</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <!-- left navigation links -->
      <ul class="navbar-nav mr-auto">

        <!-- active navigation link -->
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>

        <!-- regular navigation link -->
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>

        <!-- more navigation links -->

      </ul>

      <!-- right navigation link -->
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
The branding and menu items are self-explanatory. It should be clear that adding the class navbar-brand
gives the title a clean look and is used for the website’s name. The nav items are wrapped inside an additional div with the classes collapse navbar-collapse, which are used to make the menu appear like a stack when viewing in smaller browsers. Just below the branding, you might be seeing an additional link with the navbar-toggler class that wraps a span navbar-toggler-icon
. This link is visible only on the smaller screens with a list icon. Also see we’ve used data-toggle=collapse that Bootstrap uses to hide/show the menu items in smaller windows. data-target is used to identify which menus to hide/show.

The Marketing Area

The marketing area will be created using a div with the jumbotron
class. Inside it, add h1 with a class of display-2, a paragraph, and a link with the btn btn-primary btn-lg classes. The display-2 class makes a common heading stand out. The same goes for the lead
class on the <p> tag. The code should look like below:
<div class="jumbotron">
  <h1 class="display-2">Learn Geometry</h1>
  <p class="lead">Marketing message here.</p>
  <a class="btn btn-lg btn-primary" href="#" role="button">Call to Action »</a>
</div>

The Content Section

For the content section, we’ll be using the new Flexbox-based Bootstrap grid system. We start by sectioning out the page into two columns, a wider and a smaller column. So the initial markup goes like this:
<div class="row">
  <!-- wider column -->
  <div class="col-md-8 mb-4">
    <!-- page content -->  
  </div>
  <!-- narrower column -->
  <div class="col-md-4 mb-4">
    <!-- sidebar links -->
  </div>
</div>
The col-md-*
class indicates that the two-column layout will only be triggered from medium-sized screens upwards. Smaller screens will get both columns stacked on top of each other. Also, notice the numbers at the end of the col-md-* class. Their sum amounts to 12, which is the total number of columns in the Bootstrap grid: 8 + 4 = 12. The mb-4 class is one of the many utility classes Bootstrap makes available. This particular one is part of the spacing utility classes and is used to create some margin at the bottom of each column. Bootstrap lets you easily nest columns by adding a further div element with the class of row
inside the containing column. You can’t have more than 12 columns overall, but you can certainly have fewer than 12 if you like. Our demo is going to have three equal-length, nested columns. Inside the wider column, add the following code:
<!-- nested columns -->
<div class="row">

  <!-- first nested column -->
  <div class="col-md">
    <h3 class="display-4">Title</h3>
    <p>
      Paragraph text.
    </p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>

  <!-- second nested column -->
  <div class="col-md">
    <!-- column content -->
  </div>

  <!-- third nested column -->
  <div class="col-md">
    <!-- column content -->
  </div>
</div>
For more details, head over to Bootstrap’s Grid docs, which are really user-friendly and packed with awesome information.

The Right Sidebar

The right sidebar will contain a vertical navigation list. Inside the smaller nested column, include the markup for the unordered list:
<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <!-- more links -->
</ul>
Bootstrap adds some interest to the simple unordered list with the pills class
. Adding the flex-column class ensures the list displays vertically. Our footer is going to be a simple, one-column container with copyright information. But now that you know how the Bootstrap grid works, you can go ahead and make it as complex as you like. So the code for the footer goes here:
<footer class="container mt-4">
  <div class="row">
    <div class="col">
      <p class="text-center">Design by <a href="#">Zetiz Labs</a></p>
    </div>
  </div>
</footer>
text-center is a handy utility class for text alignment, while mt-4
is another spacing utility class that creates some margin top for the footer div. Have a look again at the final result:

See the Pen Building Responsive Websites Using Bootstrap by SitePoint (@SitePoint) on CodePen.

Conclusion

We’ve actually come to the end of the article. Congratulations for building your first responsive website. Try resizing the windows or opening the demo page in various other devices, to see the actual responsive nature. There’s actually no end to what you can do with Bootstrap. You can customize it completely to make it look more personal, either by using your custom stylesheet document or by using its Sass variables and Sass maps. I hope you had fun reading this article. Thank you!

If you’ve heard about Bootstrap but have been putting off learning it because it seems too complicated, then play through our Introduction to Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.

Frequently Asked Questions on Building a Responsive Bootstrap Website

What is the Importance of a Responsive Bootstrap Website?

A responsive Bootstrap website is crucial in today’s digital age. It ensures that your website looks and functions well on all devices, regardless of their screen size. This is particularly important considering the increasing number of people who use mobile devices to access the internet. A responsive website improves user experience, which can lead to increased engagement and conversion rates. Additionally, search engines like Google prioritize responsive websites in their search results, which can help improve your website’s visibility and SEO ranking.

How Can I Make My Bootstrap Website More Responsive?

Making your Bootstrap website more responsive involves several steps. First, ensure that you’re using the correct meta viewport tag in your HTML file. This tag helps control the layout on mobile browsers. Second, use the Bootstrap grid system to create flexible layouts that adapt to different screen sizes. Third, use Bootstrap’s responsive utility classes to show or hide certain elements based on the device’s screen size. Lastly, always test your website on different devices and browsers to ensure it’s truly responsive.

What are Some Common Mistakes to Avoid When Building a Responsive Bootstrap Website?

Some common mistakes to avoid include not using the correct viewport meta tag, not using the Bootstrap grid system correctly, not testing your website on different devices and browsers, and not considering the user experience on different devices. It’s also important to avoid using too many custom CSS styles, as this can override Bootstrap’s default styles and cause responsiveness issues.

How Can I Use Bootstrap’s Grid System to Create Responsive Layouts?

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and allows up to 12 columns across the page. You can use different classes to specify how many columns a certain element should span on different devices. For example, the class .col-md-6 would make an element span 6 columns on medium devices and larger. By using these classes, you can create complex, responsive layouts with ease.

How Can I Test the Responsiveness of My Bootstrap Website?

You can test the responsiveness of your Bootstrap website by resizing your browser window to see how the layout adapts. You can also use the device toolbar in Chrome’s developer tools to simulate different devices. Additionally, there are online tools like BrowserStack that allow you to test your website on real devices in different browsers.

How Can I Improve the Mobile User Experience on My Bootstrap Website?

Improving the mobile user experience involves considering how users interact with your website on a smaller screen. This could involve making buttons and links larger and easier to tap, ensuring text is readable without zooming, and optimizing images to load faster on slower mobile connections. You can also use Bootstrap’s responsive utility classes to show or hide certain elements based on the device’s screen size.

How Can I Use Bootstrap’s Responsive Utility Classes?

Bootstrap’s responsive utility classes allow you to show or hide certain elements based on the device’s screen size. For example, the class .d-none will hide an element on all devices, while the class .d-sm-block will display the element as a block on small devices and larger. These classes can be very useful for improving the user experience on different devices.

How Can I Customize Bootstrap’s Default Styles?

You can customize Bootstrap’s default styles by overriding them with your own CSS. This can be done by adding your own styles after the Bootstrap CSS file in your HTML document. However, it’s important to be careful when doing this, as overriding too many styles can cause responsiveness issues.

How Can I Update My Bootstrap Website to the Latest Version?

Updating your Bootstrap website to the latest version involves replacing the old Bootstrap CSS and JavaScript files with the new ones in your HTML document. You should also check the Bootstrap documentation for any changes in classes or functionality that could affect your website. Always test your website thoroughly after updating to ensure everything still works as expected.

How Can I Learn More About Building Responsive Bootstrap Websites?

There are many resources available to learn more about building responsive Bootstrap websites. The Bootstrap documentation is a great place to start, as it provides detailed information on all of Bootstrap’s components and features. There are also many online tutorials and courses available on websites like Codecademy, Udemy, and Coursera.