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:
[code language="html"]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
[/code]
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.
[code language="html"]
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
[/code]
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:
- the responsive navigation
- the marketing area
- the contents section
- the right sidebar
- 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:
[code language="html"]
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
[/code]
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:
[code language="html"]
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
<div class="container">
<!-- more navigation code here -->
</div>
</nav>
[/code]
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.
[code language="html"]
<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>
[/code]
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:
[code language="html"]
<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>
[/code]
Continue reading %How to Build a Responsive Bootstrap Website%
