How to Build a Responsive Bootstrap Website
How to Build a Responsive Bootstrap Website
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:
<meta name="viewport" content="width=device-width, initial-scale=1.0">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.
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">Here’s a demo of the page we’re going to build:
See the Pen Responsive Bootstrap Website by Leandro Calado (@lcaladoferreira) 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:
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">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:
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
<div class="container">
<!-- more navigation code here -->
</div>
</nav>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.
<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>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:
<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>The Content Section
For the content section, we’ll be using the new Flexbox-based Bootstrap grid system. We start by sectioning out the page into two columns, a wider and a smaller column. So the initial markup goes like this:
<div class="row">
<!-- wider column -->
<div class="col-md-8 mb-4">
<!-- page content -->
</div>
<!-- narrower column -->
<div class="col-md-4 mb-4">
<!-- sidebar links -->
</div>
</div>The col-md-* class indicates that the two-column layout will only be triggered from medium-sized screens upwards. Smaller screens will get both columns stacked on top of each other. Also, notice the numbers at the end of the col-md-* class. Their sum amounts to 12, which is the total number of columns in the Bootstrap grid: 8 + 4 = 12. The mb-4 class is one of the many utility classes Bootstrap makes available. This particular one is part of the spacing utility classes and is used to create some margin at the bottom of each column.
Bootstrap lets you easily nest columns by adding a further div element with the class of row inside the containing column. You can’t have more than 12 columns overall, but you can certainly have fewer than 12 if you like. Our demo is going to have three equal-length, nested columns. Inside the wider column, add the following code:
<!-- nested columns -->
<div class="row">
<!-- first nested column -->
<div class="col-md">
<h3 class="display-4">Title</h3>
<p>
Paragraph text.
</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!-- second nested column -->
<div class="col-md">
<!-- column content -->
</div>
<!-- third nested column -->
<div class="col-md">
<!-- column content -->
</div>
</div>For more details, head over to Bootstrap’s Grid docs, which are really user-friendly and packed with awesome information.
The Right Sidebar
The right sidebar will contain a vertical navigation list. Inside the smaller nested column, include the markup for the unordered list:
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<!-- more links -->
</ul>Bootstrap adds some interest to the simple unordered list with the pills class. Adding the flex-column class ensures the list displays vertically.
Building the Footer
Our footer is going to be a simple, one-column container with copyright information. But now that you know how the Bootstrap grid works, you can go ahead and make it as complex as you like.
So the code for the footer goes here:
<footer class="container mt-4">
<div class="row">
<div class="col">
<p class="text-center">Design by <a href="#">Zetiz Labs</a></p>
</div>
</div>
</footer>text-center is a handy utility class for text alignment, while mt-4 is another spacing utility class that creates some margin top for the footer div.
Have a look again at the final result:
See the Pen FrontEnd Bootstrap by Leandro Calado (@lcaladoferreira) on CodePen.
Conclusion
We’ve actually come to the end of the article. Congratulations for building your first responsive website. Try resizing the windows or opening the demo page in various other devices, to see the actual responsive nature.
There’s actually no end to what you can do with Bootstrap. You can customize it completely to make it look more personal, either by using your custom stylesheet document or by using its Sass variables and Sass maps.
I hope you had fun reading this article. Thank you!
If you’ve heard about Bootstrap but have been putting off learning it because it seems too complicated, then play through our Introduction to Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.
Comments
Post a Comment