How you get Responsiveness with Bootstrap in just 3 Steps

Photo by Daniel Cheung on Unsplash

Table of Contents

• Get Started
• Making Navigation responsive
• Layout with row column Grid

Get Started

If you wanted to get your website responsive without using media queries Well this problem has a solution name Bootstrap. How you can do it I will be going to explain with simple Example.
For adding Bootstrap on your project you need to add a CDN link in your website head section.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Woah Now you are ready to use the Most powerful CSS library just above to links. You might curious of the output of the example so i am attaching final output of the example.

Making Navbar Responsive

lets Build Navigation for our example. It will have Brand name and links at left and search input at right. Add this inside your body tag.

<nav class=”navbar navbar-expand-md navbar-dark fixed-top bg-dark”>

.navbar class is for showing navigation, .navbar-expand-md class is for show links till the mid-screen breakpoint, .navbar-dark and .bg-dark is for text color dark and background color dark respectively, and .fixed-top for making navbar stick to the top. Now add Brand name link

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

Brand name link is self-explanatory. For showing links when the mid breakpoint for device reached we need to add a button when the user clicks on the button it will show the links for navigation. It uses navbar-toggler class.

<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarsExampleDefault” aria-controls=”navbarsExampleDefault” aria-expanded=”false” aria-label=”Toggle navigation”> <span class=”navbar-toggler-icon”></span>

This button uses js and jquery so you need to link bootstrap js and jquery CDN with your project.

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
...
</div

Using .collapse class content inside this dive will be collapse in toggler button. so now we add our links and search inside this div. After that our nav section code looks like this.

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<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">
<ul class="navbar-nav mr-auto">
<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>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav

Now time to add some content in main section i will use .jumbotron class for showing headlines with light grey background.

<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called aunique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>

For wrapping content I am using .container class. which is responsive by default at all breakpoints. .display-3 makes the title bigger rest of the code is self-explanatory. after that I am using the bootstrap grid system for row and columns. Bootstrap has a very rich amount of variety in laying out your website.
Here I am explaining a simple example with one row. This has 12 columns inside it is your choice how you break row in two parts. I am using three columns inside a row it will give me three equal parts of the row then I will add my content to each column I will use col-md-4 class for each column this means that it will get 4 columns space 4 *3 = 12. Remember This 12 Always while dividing you row with columns.

<div class="container">
<div class="row">  <div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
</div>

Add this code below the jumbotron div. Woah you are done whit your website layout it is fully responsive. I used a very simple example for lay-outing but this is basic and power full structure. There are plenty of classes in bootstrap you can use to style your website. I recommend to read Bootstrap documentation.