How to Create a Responsive Website with the Bootstrap CSS Framework

Google has stressed on mobile-friendliness by making it a ranking metric for websites. It now penalizes websites and webpages that are not mobile-friendly. Designing a responsive website can be difficult especially if you have no skills in web development. Bootstrap has made it easy by providing a CSS framework that enables developers to build flexible frontends that can be customized to their liking.

The best part is that you don’t have to be an expert. Thanks to bootstrap themes, you can easily build a website that opens on any type of screen or mobile device. The steps below show how you will link your Bootstrap files to HTML.

How to Link Bootstrap Files to HTML

  • Start by downloading Bootstrap 4 from the official Bootstrap website.
  • Unzip the files and create an HTML file. Give it a name of your liking. 
  • Copy the CSS and JS files in the new file and create an index.html file.
  • Copy the code and paste it below under the <head> tag in the index.html file to link to Bootstrap CSS.
  • Copy and paste the code below after the Footer in the index.html file to add Bootstrap JavaScript.

How to Build a Responsive Website using Bootstrap 4

The tools and commands provided below should work despite the hosting solution used. Be it a dedicated, shared, or in-house hosting plan; you should be just fine carrying out the commands described.

Your responsive website will be divided into 5 main sections. These include:

  1. Navigation
  2. Information
  3. Contents section
  4. Right sidebar
  5. Footer

Navigation Bar

This section contains the title of the website together with other menu items. It will appear at the top of the website page. To ensure it falls just right, use the “navbar” class which helps to showcase the navigation section as shown below:

As observed, there are other classes included as well. The “fixed-top” class helps to fix the navigation bar at the top. The “bg-light” and “Navbar-light” classes control the nature and color of the background and text in the navigation bar.

Add the code below to provide a container “div” that is used to manipulate and store the navigation content.

Up to now, we’ve managed to create the basic structure of the navigation bar. To make it responsive we need to add more.

The “navbar-brand” cleans up the look and brings out the name of the website. The “nav” elements are stored inside an extra “div” together with the “collapse navbar-collapse” classes which help to put the menu in stacks when viewed on smaller screens.

Below the branding, you can see an additional “navbar-toggler” class that stores the “navbar-toggler-icon.” This allows a list icon to appear on smaller screens. Bootstrap uses the “data-toggle=collapse” to show or hide menu items on smaller windows. Lastly, “data-target” identifies which menu to show or hide.

Information Section

The “jumbotron” class, which is contained in a “div”, is used to add information on a website. Add the code below to get started:

The “display-2” and “lead” classes help to bring out common headings and make them stand out. With the help of “btn btn-primary btn-lg”, they also make the content in the middle to pop out.

Content Section

The content section is one of the most important parts of a responsive website. It’s built using the Flexbox grid system from Bootstrap. Start by splitting the section into two columns, a larger and a smaller one. Here’s the code for the first column:

“col-md-*” shows that the two columns will appear on medium-sized screens and above. Both columns will be placed on top of each other on smaller screens. The numbers that follow “col-md-*” add up to 12, which is the total number of columns found in the grid. Class “mb-4” is a spacing utility that creates a gap between the columns. You can add “div” elements to nest columns as shown in the code below:

Right Sidebar

We will now create a navigation list that will sit vertically on the right sidebar. To do this, add the code below into the smaller column:

The unordered list is made a little interesting by the “pills” class. The “flex-column” makes the list sit vertically.

Footer

The footer will contain copyright information and other important business details. The code below builds your footer:

Once done, you’ll have built your first mobile-friendly and responsive website using Bootstrap CSS framework. Test it out on different mobile devices to see how it works. Keep experimenting and adding more style as there’s still a lot you can do with Bootstrap.

, ,

Post navigation

Arunlal Ashok

Operations Engineer at Endurance International Group. Linux lover. Like to play on Linux console. I started this blog to share and discuss Linux thoughts.

Always happy for an open discussion! Write to arun (@) crybit (dot) com. Check about me for more details. About this blog and our strong members, check The team CryBit.com
We like to travel. Our travelogues are published at Trip Mentor

Leave a Reply

Your email address will not be published. Required fields are marked *