Navigation Bar – Build It Bootstrap Style

Letting users know where they can go on a website is commonly done with a navigation bar. Bootstrap has lots of functionality for making a navigation bar.

Code for a  navigation bar typically starts directly below the HTML <body> tag. The following code could be used as a starting template for a bootstrap navigation bar:


<nav class="navbar navbar-default">
++<div class="container-fluid">
++++++<ul class="nav navbar-nav">
++++++++<li class="active"><a href="#">Home</a></li>
++++++++<li><a href="#">Photos</a></li>
++++++</ul>
++</div>
</nav>

 

  • The <nav> tag is important because it will alert screen readers that the user is on a navbar. This would be important for visually impaired users.
  • The “navbar navbar-default” and “nav navbar-nav” classes separate this element from other elements on the page so that it actually looks like a navigation bar (rather than a unordered list).
  • Finally, the “active” class gives an indication telling the users where they are on your website.
  • The “container-fluid” class offers full functionality across different browsers and screen sizes.

 

Basic Bootstrap – Getting Started

The Bootstrap framework helps to quickly develop clean and responsive websites. The site getbootstrap.com provides a free download of the latest version of Bootstrap. The components page provides great documentation.

Basic Bootstrap
These folders should be present after extracting the basic bootstrap zip directory.

The main file in the css folder is bootstrap.css. This is the main Bootstrap library.

the fonts folder has a set of fonts that contain some of the icons that come with Bootstrap.

The js folder contains three JavaScript libraries which allow Bootstrap to function. The bootstrap.min.js file sits on top of the jquery.min.js file to add extra functionality. The bootstrap.min.js file is a minimized version of the bootstrap.js file. Minification of files is best practice, because it can decrease page load time.

Below is suggested code or an index.html file setup to use Bootstrap.


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<!– The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags –>

<title>Always Title Your Page for Best SEO</title><!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<link href=”css/bootstrap-theme.min.css” rel=”stylesheet”>

<link href=”css/styles.css” rel=”stylesheet”>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>
<![endif]–>

</head>

<body>

<header>    </header>

<footer>    </footer>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.min.js”></script>

</body>

</html>

 

Responsive Bootstrap Layout Template

A responsive Bootstrap layout can be created using the idea that your web page is a grid of twelve evenly spaced square-grids. Assume you want your page to consist of two evenly spaced panels. Each panel would consist of six square-grids.

HTML5 <div> tags define areas of the page for styling. They are used often to create areas for styling.

Responsive Bootstrap Layout for Even Two-Panel Page


<html>
++<head>
++++<link rel="stylesheet" type="text/css" href="bootstrap.css" />
++++<link rel="stylesheet" type="text/css" href="styles.css" />
++</head>
<body>
++<div class="container">
++++<h1>This is a header</h1>
++++++<div class="row">
++++++++<div class="col-md-6 thin_border">
++++++++++Panel 1 Content
++++++++</div>
++++++++<div class="col-md-6 thin_border">
++++++++++Panel 2 Content
++++++++</div>
++++++</div>
</body>
</html>

 

responsive bootstrapEffectively this creates two panels, consisting of six square-grids each. However, two columns will only appear on what Bootstrap defines as medium screen sizes are larger. The class “col-md-6” is saying make a column of six-square grids wide if the screen size is medium or larger.

Notice there are two linked style sheets. You can link as many as you like. They will cascade off of each other. Each style sheet you add can override the previous one if they have identical classes or selectors. Importantly, put your modifications in a new styles file. Do not change the Bootstrap file. Typically, web programmers will use just one more style sheet in addition to Bootstrap. But technically, more can be used.

In this example, styles.css has only:


.thin_border {
++border: 1px solid black;
}

This CSS3 code puts a border around out two columns.

You can copy this example in your own .html file. Be sure to put the bootstrap.css and style.css files in the same folder as your .html file. Open the file in different browsers or screen sizes and see how it responds. If the screen size is narrow, you should see the two six square-grids stack on top of the other.

These are the basics of responsive Bootstrap layouts. This layout can be combined with an MVC framework to make your web applications mobile friendly. Get started with Bootstrap, and get responsive!

Bootstrap Framework – Free Download

The Bootstrap framework is one of the most popular libraries for developing MOBILE-FIRST, responsive web pages. Using the Bootstrap framework is the quickest way to get away from the old-school default look of web pages, and into a modern look.

Bootstrap has many navigation and widget components that give a visually pleasing design. A big advantage of knowing how to use Bootstrap is that it greatly reduces much of the CSS3 customization needed to develop a responsive web page.

Free Download for CSS3 Bootstrap Framework

Download Bootstrap for free, and take a look. It’s a very big file – 6,800 lines. There are many html tags, and ways to format them. Bootstrap does much of the heavy lifting for you.