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:
- Navigation
- Information
- Contents section
- Right sidebar
- 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.
I agree with you Ann. For sure, you don’t need to be an expert web developer in order to create a responsive and mobile-friendly website. With free and premium Bootstrap themes all over the web today, any newbie out there can effortlessly make their own website. Anyways, thanks for the great content Ann. It’s a cool addition to anyone’s knowledge!