Bootstrap Components

Bootstrap Components

Bootstrap has a variety of built in components that allow for better page design and user interface design. The more common components are glyphs, alerts, cards, modals and navigation bars. This page will discuss the common elements. Other available components include: button groups, bread crumbs, jumbotron, progress bars and more. For the full list, click here.

Glyphs

Bootstrap has a number of built in icons that can be used when creating web pages. These include home, save, edit, arrows, stars, comments, etc. They are part licensed through the Glyphicons Halfling set. These icons allow designers to quickly and efficiently represent information graphically for their users. The glyphs are typically set using a span and the required glyph class. 
<span class='glyphicon glyphicon-envelope'></span>

The above code produces the following icon: The full list of available glyphs can be found here.

Alerts

Alerts are an easy way to draw attention to specific content that you want users to see. Alerts use the basic contextual colors, except for the default, as it does not stand out enough. An alert can be made simply in a div by specifying the alert class along with the contextual alert class. In addition, you must assign the role of the div to be an alert which helps with the styling. Bootstrap should automatically add rounded borders, but if not, apply the appropriate style to the element. 
<div class='alert alert-warning' role='alert' style='border-radius:5px'>This is your warning.  Pay attention.</div>


With the addition of some extra code, and being sure that the bootstrap javascript is loaded, you can make the alerts dismissable. The extra attributes in the button class are read by both the css and javascript files associated with Bootstrap. Notice the x on the far side of the alert. 
<div class='alert alert-success' role='alert' style='border-radius:5px'>
			<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
				<span aria-hidden='true'>&times;</span>
			</button>
		Great Job.  You saw the warning.</div>


Cards

Cards allow users to set aside information with headers, footers and main content, if desired. Cards can also be colored using the standard contextual colors. To create a card with a header and content, use the following code. Note the use of the card-heading, card-title and card-body classes. This help style the card. In addition, you could add another div below card body with the class card-footer to add a footer to the card. Finally, the width of the card can be controlled using either columns or the width style. 
<div class='card bg-danger' style='width:50%'>
	<div class='card-header'>
		<h3 class='card-title'>My Card Title</h3>
	</div>
	<div class='card-body'>
		This is the card content.<br/>  
		See me?
	</div>
</div>

My Card Title

This is the card content.
See me?

Modals

Modals are dismissible pop-up windows that can display HTML content. A modal, as opposed to the standard JavaScript alert, can hold text, images, tables, bootstrap columns, etc. Modals can also be programmed with buttons of the designers choice that have appropriate actions. At this point, we can make modals appear, but performing actions on button clicks requires some JavaScript programming. It is important that only one modal is open at a time and please note that there are sometimes issues on mobile devices.

The basic parts of a modal are similar to that of a card. There is a header, body and footer. All of these items are located inside the modal-content holder which, in turn, is located inside the modal-dialog element. See the example below for more information. Also, pay close attendtion to the role=dialog and aria-labelledby='...' in the main div and the role=document in the modal-dialog div. This information is important for the javascript to make the modal appear/disappear. In addition, the aria-labelledby value is the same is the id of the modal-title.
<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
        <h4 class='modal-title' id='myModalLabel'>Important Report</h4>
      </div>
      <div class='modal-body'>
      	<h2>Things to Do</h2>
        <ol>
        	<li>Thing 1</li>
        	<li>thing 2</li>
        	<li>Thing 3</li>
        </ol>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
        <button type='button' class='btn btn-success'>Print Report</button>
      </div>
    </div>
  </div>
</div>

To make the modal appear, we must create a button. The button code requires two attributes: data-toggle=modal and data-target-'...', where the data-target value is the id of the main div that applies the modal class. 
<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>
  See Report
</button>


Navigation

Bootstrap also provides a way for developers to create nav bars. This is important as building a responsive navigation system is not easy, but BS helps out in this area. To start, we must make a nav element with class=navbar. If you choose not to use the nav element as the main element, you must add role=navigation to the navbar parent element. In addition, the navbar can be styled using navbar-defalt (dark on light) or navbar-inverse (light on dark). Also, the navbar can be fixed to the top or bottom of the page if desired using navbar-fixed-top and navbar-fixed bottom. Here are some examples of navbar declarations. 
<div role='navigation' class='navbar navbar-default'>...</nav>  //this is a default navbar that will scroll off the page
<nav class='navbar navbar-inverse navbar-fixed-top'>...</nav>	//inverted navbar fixed to top of page

Within the nav element, there are several pieces that need to be present:
  1. A div with a container-fluid class which spans the full width of the viewport.
  2. A div serving as the header, class=navbar-header. This typically holds the branding, navbar-brand, as text or an image. The brand has special padding and margins.
  3. An unordered list serving as the items on the nav bar, each in its own li element with an a tag wrapped around the link. Also note that the navbar-nav has an id. This will be important later.
<nav class='navbar navbar-default'>
  <div class='container-fluid'>
    <div class='navbar-header'>
      <a class='navbar-brand' href='#'>Brand</a>
    </div>
    <ul class='nav navbar-nav' id='mainNav'>
        <li><a href='#'>item 1</a></li>
	<li><a href='#'>item 2</a></li>
	<li><a href='#'>item 3</a></li>
	<li><a href='#'>item 4</a></li>
    </ul>
  </div>
</nav>

To make the navbar collapsable in smaller displays (responsive), there are several items that we need to add:
  1. Include the JQuery javascript library on the page for the collapsable animations 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
  2. Wrap the navbar-nav, the ul, in a div with a class to collapse the navbar when necessary. 
    <div class='collapse navbar-collapse' id='mainNav'>
  3. A button in the navbar header that will toggle on when the nav bar collapses. This button will have three lines on it which can be created using a span class with the icon-bar class. The code refers to a data-target which must be the same as the navbar-collapse id.
    <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#mainNav'>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span> 
      </button>

Other additions can be made to the nav bar including: Putting it all together, we get: 
<nav class='navbar navbar-default'>
  <div class='container-fluid'>
    <div class='navbar-header'>
      <a class='navbar-brand' href='#'>Brand</a>
	  <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#mainNav'>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span> 
      </button>
    </div>
	<div class='collapse navbar-collapse' id='mainNav'>
		<ul class='nav navbar-nav'>
			<li><a href='#'>item 1</a></li>
			<li><a href='#'>item 2</a></li>
			<li><a href='#'>item 3</a></li>
			<li class='dropdown'>
				<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>Dropdown <span class='caret'></span></a>
				<ul class='dropdown-menu'>
						<li><a href='#'>Dropdown 1</a></li>
						<li><a href='#'>Dropdown 2</a></li>
						<li><a href='#'>Dropdown 3</a></li>
						<li role='separator' class='divider'></li>
						<li><a href='#'>Dropdown 4</a></li>
				</ul>
			</li>
		</ul>
		<ul class='nav navbar-nav navbar-right'>
			<form class='navbar-form navbar-left' role='search'>
				<div class='form-group'>
					<input type='text' class='form-control' placeholder='Search'>
				</div>
				<button type='submit' class='btn btn-default'>Submit</button>
			</form>
		</ul>
	</div>
  </div>
</nav>