8 Practical Bootstrap Projects by Maria Antonietta Perna

Author:Maria Antonietta Perna [Various]
Language: eng
Format: epub
Publisher: SitePoint
Published: 2017-08-08T23:00:00+00:00

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.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.