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:
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.
Here’s a demo of the page we’re going to build:
<p class=”codepen” data-height=”300" data-theme-id=”dark” data-default-tab=”html” data-slug-hash=”gOXbxMr” data-preview=”true” data-editable=”true” data-user=”lcaladoferreira” style=”height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;”>
<span>See the Pen <a href=”https://codepen.io/lcaladoferreira/pen/gOXbxMr">
Responsive Bootstrap Website</a> by Leandro Calado (<a href=”https://codepen.io/lcaladoferreira">@lcaladoferreira</a>)
on <a href=”https://codepen.io">CodePen</a>.</span>
</p>
<script async src=”https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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
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:
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:
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.
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:
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:
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:
For more details, head over to Bootstrap’s Grid docs, which are really user-friendly and packed with awesome information.
The right sidebar will contain a vertical navigation list. Inside the smaller nested column, include the markup for the unordered list:
Bootstrap adds some interest to the simple unordered list with the pills class. Adding the flex-column class ensures the list displays vertically.
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:
<p class=”codepen” data-height=”300" data-theme-id=”dark” data-default-tab=”html” data-slug-hash=”JjOoyEq” data-preview=”true” data-editable=”true” data-user=”lcaladoferreira” style=”height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;”>
<span>See the Pen <a href=”https://codepen.io/lcaladoferreira/pen/JjOoyEq">
FrontEnd Bootstrap</a> by Leandro Calado (<a href=”https://codepen.io/lcaladoferreira">@lcaladoferreira</a>)
on <a href=”https://codepen.io">CodePen</a>.</span>
</p>
<script async src=”https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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.
Originally published at https://lcaladoferreira.blogspot.com on January 26, 2022.
