Build a responsive website with bootstrap | Step by Step Guide

SurbhiKhatriFebruary 2, 2022

0 283 7 minutes read

Back in 2010, Graphic Designer Ethan Marcotte released the concept of “responsive website” and wrote about the need for creating websites that could be adjusted as per users’ devices like Desktop, Laptop, Tablets and Mobile Phones. Building a responsive website is crucial as 75% of websites credibility comes from design.

With so many mobile users increasing every day it has become more important to have a website optimized for mobiles too! As per one survey- more than 50% traffic came from mobiles back in 2021 while most companies were focusing on desktop optimized websites.

When a responsive website is so necessary, why not learn how to create one that appeals to everyone?

We understand that creating an optimal web page can be quite tough, especially if you’re just starting out with this whole business thing. So we’ve decided to give our readers step by step instructions on building their first ever Responsive Website using Bootstrap’s framework.

But before I take you through the process, first of all, let me tell you more about Responsive Websites. That way we can be sure that what we do is worth it.

What is responsive website?

Wikipedia defines responsive web design as “Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.” A good example is if you are viewing a webpage on Desktop and it has a menu bar, but when viewed elsewhere, such as from mobile devices with vertical orientation for viewing websites, then horizontal.

A responsive web design is a web design that uses CSS media queries to change the layout of a site based on the device being used to view it. A responsive design uses fluid grid systems, flexible images, and CSS3 media queries to adapt the layout of content based on the user’s environment. This means that when you resize your browser window, or view the site from your smartphone, tablet or other device that supports web browsing, you see a different layout than what you would see on your desktop computer.

Why we need Responsive Website

You know that one reason you might not trust a website or business is the design, as 94% of people who took part in a research have said. So, this proves just how important it is to have responsive web design.

Another statistic tells us there are roughly 1.18 billion websites on the internet and 3 new ones created every second (on average) according to Siteefy’s stats: so if we assume only 10000 businesses like yours exist and while searching for your service specifically on Google- which lists only 10 results per page -how would your website be ranked among those top ten?

And what about when users cannot see images properly because they’re too large for their mobile device? They’ll leave your site and move onto another one where image quality matters more than anything else; 90% of shoppers believe that.

A responsive website design is pivotal in order to retain users, increase engagement and most importantly build trust. Below are some of the important advantages of having a responsive design.

As it uses a single URL for all devices, this builds the trust
It saves money since you don’t have to build separate websites for each device
A positive impact on users encourages them to visit your website in various devices increasing conversion and sales.

I think I have made my point. The question is now HOW? While many websites nowadays are built on HTML, CSS and JAVAScript, we also have a BOOTSTRAP which complements all these 3 and make it easy to build a Responsive Website. Wondering what Bootstrap is? First, take a look at Bootstrap before going in the process.

What is BOOTSTRAP?

Bootstrap is a CSS framework that helps in building mobile-friendly and responsive websites developed by Mark Otto and Jacob Thornton at Twitter. The Bootstrap website released it as open source in 2011, while supporting all browsers except for Internet Explorer 11 or below. Besides HTML and CSS, the Bootstrap project also uses JavaScript plug-ins to create designs with typography among other things, required for a responsive site, such as calendars, forms with validation rules among others using plugins like jQuery Mobile which simplifies app development. Remember: the newest version of Bootstrap 5 has been released!

What are the advantages of Bootstrap over others?

Bootstrap supports all browser and is CSS Compatible
It is responsive means automatically adjusts with the size of device
Many JavaScript Plug-ins are available
A wealthy documentation and supportive community
Free and professional wordpress templates, plugins

Why Create Website with Bootstrap?

Bootstrap is the most popular and powerful front-end framework for developing responsive, mobile-first projects on the web. It has a 12-column responsive grid system that can be used to create layouts of all shapes and sizes, a robust collection of CSS components like modals, toggles, tabs, and scrollspy. Bootstrap also has an extensive JavaScript plugins library. This provides clean, beautiful markup which can be easily customized to fit your brand.

Bootstrap uses HTML5 elements where possible in order to provide semantic code and make your website more accessible. It is also compatible with all major browsers and mobile devices such as Android, iPhone, iPad etc. It comes with predefined styles for typography, forms, etc., but you can customize them by changing the variables or create it from scratch using Twitter’s custom variables. You can also use Google fonts on your website easily with Bootstrap’s Google fonts API integration.

Steps to build responsive website with Bootstrap

Step 1: Install and Setup

You can direct download bootstrap setup from it’s official site https://getbootstrap.com/ or you can just include the CDN files in <head></head> mentioned here : –

Step 2: Create Grid System

Bootstrap is totally depends upon it’s grid system. And one of the reason of it’s popularity. It’s provide mobile first flexbox grid layout. It contains 12 column. The grid system is a combination of ‘containers’, ‘rows’ and ‘columns’. Let’s see an example to understand, how it works :

<div class=”container”>

<div class=”row”>

<div class=”col”>

Column

</div>

<div class=”col”>

Column

</div>

The above example creates two equal column in responsive manner for all devices and for all viewports.
Actually grid system is based on ‘min-width’ media query and there are predefined breakpoints for ‘col’ and i.e. ‘sm’, ‘md’, ‘lg’, ‘xl’ and ‘xxl’ and breakpoints for these grid tiers are min-width 576px, 768px, 992px, 1200px, and 1400px. You should always remember one thing in your mind whenever using these grid that sum of all grid should be 12. For example –

<div class=”container”>

<div class=”row”>

<div class=”col-8″>col-8</div>

<div class=”col-4″>col-4</div>

</div>

Step 3: Create Navigation Bar

One of the feature which I personally liked too much about bootstrap. It provides full responsive Navbar means you may have 6-7 or may be more menu-items in your navbar and it is not possible to show all menu-items in mobile same as it was looking in desktop version. So it provides a great solution with toggle button. All menu-items get disappeared in mobile devices and it will show only when we clicked on toggle button. Here is code how to use it.

<head>

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>

</head>

<body>

<nav class=”navbar sticky-top navbar-expand-lg bg-dark”>

<div class=”container”>

<a class=”navbar-brand” href=”#”>Logo</a>

<i class=”fas fa-bars”></i>

</button>

<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>

<ul class=”navbar-nav mr-auto w-100 justify-content-end”>

<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=”#”>About</a>

<li class=”nav-item”>

<a class=”nav-link” href=”#”>Contact</a>

<li class=”nav-item”>

<a class=”nav-link” href=”#”>Services</a>

<li class=”nav-item”>

<a class=”nav-link” href=”#”>Other</a>

</li>

</ul>

</div>

</nav>

<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>

<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>

</body>

Step 4: Create Content Part

Using Bootstrap, we can create any website very fast. It’s reduce our lot’s of time for the functionality which are going to use in our website like it’s provide very simple Carousel, Tabs, Modal, Accordion, Customizable Dropdowns, and many form fields. We just need to write down only classes in our HTML code and it will automatically start working. Let’s see one simple example of accordion how to use it.

<div class=”accordion” id=”accordionExample”>

<div class=”accordion-item”>

<h2 class=”accordion-header” id=”headingOne”>

<button class=”accordion-button” type=”button” data-bs-toggle=”collapse” data-bs-target=”#collapseOne” aria-expanded=”true” aria-controls=”collapseOne”>

Accordion Item #1

</button>

</h2>

<div id=”collapseOne” class=”accordion-collapse collapse show” aria-labelledby=”headingOne” data-bs-parent=”#accordionExample”>

<div class=”accordion-body”>

<strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.

</div>

<div class=”accordion-item”>

<h2 class=”accordion-header” id=”headingTwo”>

<button class=”accordion-button collapsed” type=”button” data-bs-toggle=”collapse” data-bs-target=”#collapseTwo” aria-expanded=”false” aria-controls=”collapseTwo”>

Accordion Item #2

</button>

</h2>

<div id=”collapseTwo” class=”accordion-collapse collapse” aria-labelledby=”headingTwo” data-bs-parent=”#accordionExample”>

<div class=”accordion-body”>

<strong>This is the second item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.

</div>

Conclusion:
Having a responsive website can increase the engagement rate and conversion. So, when next time you hire a Web Development Company, don’t forget to ask them to design a responsive website.