Responsive Website with Bootstrap 5
• Shallom Kyle Jacinto
April 21st 2021 • 5 minute read
In this article we will create a responsive with a new version of bootstrap, a no jquery bootstrap version wich is boostrap 5. We will learn how to responsive it on small, medium and large devices.
What is bootstrap?
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
To make this explanation simple, We can make website with a ready made component without a hassle😉.
Getting Started
Note! You must know atleast the basics of web development, HTML, CSS and JS or else i suggest you to learn this technologies on w3schools.com
Create an html file and name it to index.html after that copy this starter html codes below and save it.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- your bootstrap css here -->
<title>Bootstrap 5 tut</title>
</head>
<body>
<h1>Responsive tutorial</h1>
<!-- your bootstrap js here -->
</body>
</html>
Next open bootstrap.com go to docs/gettingstarted copy the bootstrap css commented code to your head tag and the commented bootstrap bundler with popper code before the end tag of the body. Our code will look like this on below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- your bootstrap css here -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Bootstrap 5 tut</title>
</head>
<body>
<h1>Responsive tutorial</h1>
<!-- your bootstrap js here -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
So we have already installed the bootstrap 5 in our web page. To make this things really work, copy this inside your body tag <button class="btn btn-primary">click me</button>and it should create us a button. Great!😄
Navigation Bar
Bootstrap made a responsive navigation bar
component so you can go to Navigation link and copy the whole nav codes and paste it inside your body. You can copy the nav codes below.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<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="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</div>
</nav>
After you run it, you will see a navigation bar. Try to resize your chrome or your browser and you will see that the navigation bar changes, Its because when the browser or your device is on small screen, the navigation links will collapse and hide to prevent the navigation links messy, and it create us a menu button to show/hide the navigation links.
When you resize your browser or you're on large screen, the navigation links will be expand to show us the links so you can directly click the links. Take a look on a example below.
Responsive Content
So this is the main topic for this article, You'll know how to make your website responsive with bootstrap.
First create a div tag with a class of container and inside your div container, create a div tag with a class of row, open this link if you want explanation of row class. After that create a four card component inside your body tag. You can make your own card or you can copy my example card codes below.
<!-- card -->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<!-- card -->
<div class="card"> ... </div>
<!-- card -->
<div class="card"> ... </div>
<!-- card -->
<div class="card"> ... </div>
<!-- card -->
<div class="card"> ... </div>
So we have already a four cards, on every card add a class of col-lg-3 because in bootstrap our screen is divided into 12 columns. To handle the columns you must put the last number of col-lg-* to be total to 12, not less than or more than to 12 or else your content will not response correctly . On our web, we have four cards so add all cards a class of col-lg-3.
<!-- card -->
<div class="card col-lg-3"> ... </div>
<!-- card -->
<div class="card col-lg-3"> ... </div>
<!-- card -->
<div class="card col-lg-3"> ... </div>
<!-- card -->
<div class="card col-lg-3"> ... </div>
When you run it on browser you'll see the cards in your content are aligned into 4, it's because of col-lg-3 make our cards divided into 4. The lg in col-lg-* represent the large devices which is laptops, So the division into 4 will only works on lg or large devices.
On medium devices like tablets, instead of col-lg-* we use col-md-*. md stands for medium devices.
<!-- card -->
<div class="card col-lg-3 col-md-6"> ... </div>
<!-- card -->
<div class="card col-lg-3 col-md-6"> ... </div>
<!-- card -->
<div class="card col-lg-3 col-md-6"> ... </div>
<!-- card -->
<div class="card col-lg-3 col-md-6"> ... </div>
So we use col-md-6 because when the screen is on medium devices, our cards will be divided into 2 and another 2. Try to resize your browser to see the difference.
And finally for small devices, we use col-sm-*.
<!-- card -->
<div class="card col-lg-3 col-md-6 col-sm"> ... </div>
<!-- card -->
<div class="card col-lg-3 col-md-6 col-sm"> ... </div>
<!-- card -->
<div class="card col-lg-3 col-md-6 col-sm"> ... </div>
<!-- card -->
<div class="card col-lg-3 col-md-6 col-sm"> ... </div>
So when the device is on small screen the cards will be displayed one by one. Great! Now you already know how the responsive work.
For more documentation, go to bootstrap.com