What is Bootstrap Responsive & How to use it?
By Sanghita Ganguly, Community Contributor - February 6, 2023
Creating responsive websites naturally entails fitting with every device and size screen. Bootstrap is a robust framework for implementing a responsive web design.
Front end languages like HTML, CSS, and JavaScript for this framework, as it holds the libraries for these languages. You must import the bootstrap CSS and JS files to use the framework in your project.
In the following sections, let’s put intot actions the concepts of Bootstrap for responsive website along with test scenarios, components, and live testing on the cloud.
Table of Contents
Test Scenarios for Bootstrap Responsive
- Test several viewport sizes to check the fitness of a content’s scalability.
- Test the display and alignment of content.
- Image visibility and resize.
- Responsive navigation with links, menus, buttons, and sidebars.
- Test the vertical and horizontal scrollbars (required in tables).
How to use Bootstrap for a Responsive Website?
To know how Bootstrap responsive websites are used, you need to know about the major components of the Bootstrap website. So, let’s start it!
1. Navigation bar
The primary element of a navigation bar is the navbar class. Here is the basic structure of a navigation bar.
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light"> <div class="container"> <!-- more navigation code here --> </div> </nav>
The Containers hold the contents within a navigation bar. The basic element of a container is a .container class.
Here is a code for the responsive navigation bar–
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Static Navbar</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a href="#" class="navbar-brand">Brand</a> <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Profile</a> <a href="#" class="nav-item nav-link">Messages</a> <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a> </div> <div class="navbar-nav ms-auto"> <a href="#" class="nav-item nav-link">Login</a> </div> </div> </div> </nav> </div> </body> </html>
2. Content area
The content area is the mandatory part of a website. You have to ensure that the content (including all the texts, paragraphs, images, tables, audio-visual area, etc. all published elements) is clearly visible and the user must has a positive impression after visiting your site. That indicates a positive user experience and high content reach, which helps to grow your ultimate business strategy.
- The col-md-* class creates the columns layout for content.
- The bootstrap grid has a total number of 12 columns.
- Also, there is mb-4 class which creates a margin at the end of every column.
Note: You can’t be permitted to use more than 12 columns in bootstrap.
Here is a basic bootstrap structure for the content area–
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <h1 style="font-size:10vw;">Responsive Text</h1> <p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p> <p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p> <p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p> </body> </html>
3. Sidebar
Sidebars are the important parts of a site. The main function of a sidebar is to help in navigation. It’s a strong navigating element.
- So, use <nav> element for permitting responsive navigation to your website.
- You need a .sidebar class to create a responsive sidebar.
- Use .sidebar-nav class to avail overall navigation on a web page. Furthermore, this class supports dropdowns.
Code for the basic sidebar
<!-- Basic Sidebar --> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark pmd-navbar pmd-z-depth"> <!-- Sidebar Toggle Button--> <a href="javascript:void(0);" data-target="basicSidebar" data-placement="left" data-position="slidepush" is-open="true" is-open-width="1000" class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect pmd-sidebar-toggle"><i class="material-icons md-light">menu</i></a> <a class="navbar-brand" href="#">Brand</a> <!-- Navbar Right icon --> <div class="pmd-navbar-right-icon ml-auto"> <a href="javascript:void(0);" class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect"><i class="material-icons pmd-sm md-light">search</i></a> </div> </nav> <section id="pmd-main"> <!-- Left sidebar --> <aside id="basicSidebar" class="pmd-sidebar bg-light pmd-z-depth" role="navigation"> <ul class="nav flex-column pmd-sidebar-nav"> <li class="nav-item pmd-user-info"> <a data-toggle="collapse" href="#collapseExample" class="nav-link btn-user media align-items-center"> <img class="mr-3" src=" " width="40" height="40" alt="avatar"> <div class="media-body"> User </div> <i class="material-icons md-light ml-2 pmd-sm">more_vert</i> </a> <ul class="collapse" id="collapseExample" data-parent="#basicSidebar"> <li class="nav-item"> <a class="nav-link" href="#"> <i class="material-icons pmd-list-icon pmd-sm">delete</i> <span class="media-body">View Profile</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="material-icons pmd-list-icon pmd-sm">delete</i> <span class="media-body">Settings</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="material-icons pmd-list-icon pmd-sm">delete</i> <span class="media-body">Logout</span> </a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#inbox"> <i class="material-icons pmd-list-icon pmd-sm">inbox</i> <span class="media-body">Inbox</span> </a> </li> <li class="nav-item"> <a class="nav-link active" href="#"> <i class="material-icons pmd-list-icon pmd-sm">star</i> <span class="media-body">Stared</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="material-icons pmd-list-icon pmd-sm">send</i> <span class="media-body">Sent Email</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="material-icons pmd-list-icon pmd-sm">drafts</i> <span class="media-body">Drafts</span> </a> </li> </ul> </aside> <div class="pmd-sidebar-overlay"></div> <!-- Start Content --> <div class="pmd-content custom-pmd-content" id="content"> <h2 class="headline">Sidebar Constructor</h2> <p>This structure shows a permanent app bar with a floating action button. The app bar absorbs elements from the tablet and mobile bottom bars.</p> <p style="margin-bottom:0;">An optional bottom bar can be added for additional functionality or action overflow. A side nav overlays all other structural elements. A right nav menu can be accessed temporarily or pinned for permanent display.<br><br></p> </div> </section>
4. Footer
It’s an extra navigation process. It makes your website more attractive and gives the feeling of completeness. Footers hold company info, copyrights, and other links.
Here, is a basic script for the footer-
footer> <div class="container"> <div class="row"> <div class="col-md-4 footer-column"> <ul class="nav flex-column"> <li class="nav-item"> <span class="footer-title">Product</span> </li> <li class="nav-item"> <a class="nav-link" href="#">Product 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Product 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Plans & Prices</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Frequently asked questions</a> </li> </ul> </div> <div class="col-md-4 footer-column"> <ul class="nav flex-column"> <li class="nav-item"> <span class="footer-title">Company</span> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Job postings</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News and articles</a> </li> </ul> </div> <div class="col-md-4 footer-column"> <ul class="nav flex-column"> <li class="nav-item"> <span class="footer-title">Contact & Support</span> </li> <li class="nav-item"> <span class="nav-link"><i class="fas fa-phone"></i>+47 45 80 80 80</span> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-comments"></i>Live chat</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-envelope"></i>Contact us</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-star"></i>Give feedback</a> </li> </ul> </div> </div> <div class="text-center"><i class="fas fa-ellipsis-h"></i></div> <div class="row text-center"> <div class="col-md-4 box"> <span class="copyright quick-links">Copyright © Your Website <script>document.write(new Date().getFullYear())</script> </span> </div> <div class="col-md-4 box"> <ul class="list-inline social-buttons"> <li class="list-inline-item"> <a href="#"> <i class="fab fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fab fa-facebook-f"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fab fa-linkedin-in"></i> </a> </li> </ul> </div> <div class="col-md-4 box"> <ul class="list-inline quick-links"> <li class="list-inline-item"> <a href="#">Privacy Policy</a> </li> <li class="list-inline-item"> <a href="#">Terms of Use</a> </li> </ul> </div> </div> </div> </footer>
Making Bootstrap Mobile Responsive Websites
Bootstrap is the most suitable framework for designing mobile responsive websites. That’s why it’s also called Mobile First. Let’s discuss the infrastructure of the visibility of web content on mobile (or how we can see the content on our mobile screen?).
- First, you need a page layout to make prominent visibility of your web content on your gadget.
- Bootstrap has a Grid System for this purpose. It has a large number of preset classes to create layout designs.
- These classes create a mobile-first responsive page layout that contains a set of Rows and Columns to host your content.
- The in-built classes for rows and columns are .row and .col-xs-4, respectively where rows create a group of columns.
- Columns hold your content. Content should be placed within columns. Columns are inherited from rows.
Learn More: CSS Grid vs Bootstrap: Which one is better for you?
Media Query for creating Breakpoints in the Grid System
* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }This media query is to include maximum width in small devices-
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
You can create a basic grid system by using a set of .col-md-* classes on mobiles and tablets also. Try this one for extra small and medium device grid classes-
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
If you want a better dynamic and powerful implementation of the above code then try it-
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"> </div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
Read More: Breakpoints for Responsive Web Design
Bootstrap Responsive for all Devices
There are some attributes and their measurements for bootstrap responsive sites for all devices. The attributes are grid behavior, container width, class prefix, column width, etc.
Class prefix:
- .col-xs- : Extra small devices Phones (<768px)
- .col-sm-: Small devices Tablets (≥768px)
- .col-md-: Medium devices Desktops (≥992px)
- .col-lg-: Large devices Desktops (≥1200px)
How to test the Responsiveness of a website?
The easiest way of testing any website’s responsiveness is with the Google Chrome Inspector. Apart from this, you can opt for BrowserStack Live for a seamless experience.
Browserstack Live for Responsive Web Testing.
- Live allows you to test a website on different devices with different screen sizes on different Android and iOS mobiles.
- Live supports testing on Samsung, Vivo, Oppo, Nexus etc., Android devices and iPhones, and iPads from iOS 7 to iOS 16.
- It allows debugging your mobile websites with the Chrome Dev tool.
- You can test your website’s performance on different network conditions with the help of Live.
Was this post useful?
We're sorry to hear that. Please share your feedback so we can do better
Thanks a lot for your feedback!
