Bootstrap Themes – Free Download

The bootstrap grid system is so popular that people have created free bootstrap themes that you can use for your site. Notwithstanding, you should always check the license of your theme before you use it.

One bootstrap themes resource to start with is free bootstrap themes.

For this resource above, you can first preview the theme. If you like it, then click the download button for a link to a minified version of the code. Simply copy the code and paste it into a new bootstrap.css file, if you wish to use it on your site.

Another one you might consider is commercial bootstrap themes.

Bootstrap Grid System – Gain Control

The bootstrap grid system is a brilliant method to gain control over the responsiveness of your website. Consider the built-in bootstrap classes in the following code:

<div class=”row”> <!– start row –>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_1.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_2.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_3.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_4.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_5.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_6.jpg”>
++</div>

</div> <!– end row –>

The main thing you need to know about this example derives from the <div class=”col-xs-6 col-md-3 col-lg-2″> tag.

Remember that bootstrap is built on 12 evenly spaced grids.

The class “col-xs-6” indicates that on an extra small screen, the image will consume six of those grid spaces. Thus, you will see two columns of pictures.

The class “col-md-3” indicates that on a medium screen, the image will consume three of those grid spaces. Thus, you will see four columns of pictures.

The class “col-lg-2” indicates that on a medium screen, the image will consume two of those grid spaces. Thus, you will see six columns of pictures.

You can see how the bootstrap grid system (along with these built-in classes) allows you to easily gain control over how your content is displayed.

Plan first! So, as you build your site you will know how many of the grid spaces to consume on an extra small, medium, or large screen size.

Read the documentation on the bootstrap grid system, for more information.

How to Leave a Breadcrumb Trail

A good site should communicate to the users where they are on your site, at all times. A typical way to telling users where they are is to leave a breadcrumb trail on all your pages.

To build a bootstrap navigation bar, you use an unordered list, <ul>. For a bootstrap breadcrumb trail, you will us an ordered list, <ol>. This makes sense. Order is not so important for the navbar, but it is important for the breadcrumb trail. You want users to know where they are, and how to get back to where they came from.

For example, directly under the main heading, <h1>, on a page called “Albums”, you would create a breadcrumb trail as follows:

<!– start breadcrumb –>
<ol class=”breadcrumb”>
++<li><a href=”index.html”>Home</a></li>
++<li><a href=”albums.html”>Albums</a></li>
</ol>
<!– end breadcrumb –>

Using the bootstrap class “breadcrumb”, the trail on your albums page should display as pictured.

bootstrap breadcrumb trail

You would then add <li> elements to your breadcrumb trail depending on how many levels deep you go into your website. For example if someone clicks on one of your albums, then it would take that user to the photos page. Therefore, you would add a third <li> element to the breadcrumb on the photos page.

It is suggested to read the bootstrap documentation on breadcrumb trails, for more information.

Collapsible Navigation Bar – A Must for Mobile Friendly

After you learn how to build a basic bootstrap navigation bar, you will want to know how to transform it to a collapsible navigation bar. Why? Well, if the user is on a small mobile device, then the navigation bar may consume the entire screen. This would result in a bad user experience, and the user may quickly leave your site. If you build a collapsible navigation bar, then the user experience is improved.

In order to build a collapsible navigation bar, you will need to program your site so it knows what to display when the nav bar is collapsed, and when it is not collapsed.

Start with your basic nav bar code from the previous lesson, and build on it to add the code necessary to build a collapsible navigation bar.

The correct code is shown below. Directly below are descriptions of all the additions shown in the code.

Collapsible Nav Bar Code
HTML5 Code for a Collapsible Navigation Bar

An Analysis of the Collapsible Navigation Bar Code

Make another <div> element for the collapsed navbar. Label it with comments, so you can distinguish the nav bars.

Add the built-in bootstrap class “navbar-header” to the collapsed navbar. This class tells your page that the collapsed navbar should sit on top of everything else.

Add the “collapse navbar-collapse” class to your un-collapsed ‘div’ element.

The next step is to make a make the <button> in your collapsed ‘div’ interact with your un-collapsed <div>. So, set a “main_navbar” id inside your un-collapsed <div>.

Now you will add a whole slew of characteristics to your button. Look above at all the characteristics added to the <button> tag. The type given improves accessibility. The class tells what to show when the navbar is collapsed. The data-toggle is picked up by bootstrap.js to give the button interactivity. The data-target specifies what actually collapses (it’s the main navbar). Finally, aria-expanded implies the button will not initially be seen.

Take a look at your progress. The images below show how the nav bar appears, collapsed and un-collapsed, on a small screen.

Wk2NavBarCollapsedWk2NavBarUnCollapsed

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>

 

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.