Design Method

A Look At Bootstrap & Some Popular Components

Bootstrap
 

This tutorial is for developers who may have been living under a rock for the past couple of years. Either that or you are new to the world of web development, in which case this tutorial should enlighten you to the wonderful world of Bootstrap.

Firstly, Bootstrap is a web development framework full of components and features that can be utilised by simply including (at a minimum) the bootstrap stylesheet. Obviously there are some more complex features of Bootstrap which will also require the inclusion of JQuery & Bootstrap.js, however for most of the visual features you will find that you can use them just by including the Bootstrap CSS.

[code]
<!– The link below is to the LATEST Minified Bootstrap CSS ONLY –>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!– The link below is to the LATEST Minified Bootstrap JavaScript –>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
[/code]

The above code links are required to ensure that Bootstrap will work properly, as I mentioned earlier however the JavaScript isn’t necessary unless you’re using components that rely on it, such as the Dropdown buttons. These links are perfect if you just need to drop Bootstrap into an existing project, or just want to use a few of the components. If you are actually developing your project using Bootstrap as the core then you will probably want to download and include the source files.

I thought it would be a good idea make a tutorial introducing you to Bootstrap, whilst showing you a few of the components that you can easily implement into your design.

Firstly lets take a look at what we will be building:

So to begin with, lets look at the structure of the HTML page.

The page setup

[html]
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Tutorial</title>
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!– Latest compiled and minified JavaScript –>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
[/html]

  • The code above is just a simple HTML5 Doctype, with the Minified Bootstrap CSS Included within the header, a custom stylesheet for a couple of elements, & Bootstrap.js & JQuery.
  • This is what you will typically need for a page using Bootstrap.

Navigation

For the navigation we have used a fixed bar along the top of the page. To code this from scratch wouldn’t be a hard task, but it could take up some time testing compatibility between browsers, ensuring that it wouldn’t interfere with other content and making sure it works on mobile devices.

Luckily for us, Bootstrap is here to make our lives more efficient. If you needed to demonstrate a website which didn’t have a design to a client, then you can see how with Bootstrap you would be able to make the site presentation-worthy with relative ease.

[html]
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="https://designbypelling.co.uk">Pelling</a></li>
<li><a href="https://designbypelling.co.uk/blog/">Our Blog</a></li>
</ul>
</div>
</nav>
[/html]

  • The markup used for the Navigation is clean, and quite simple.
  • Adding the .navbar-fixed-top class to the nav element, and adding a container div around the unordered list element will fix the navbar to the top (.navbar-fixed-top), and adding a container div around the unordered list will keep it centred.
  • Navbars in Bootstrap require JavaScript so you must include the Bootstrap.js file within your page.

Hero Area

Creating an eye catching area to show off content can sometimes be a time consuming task, again Bootstrap has us covered.

[html]
<div id="hero" class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>A very simple introduction to bootstrap.</p>
<p><a class="btn btn-primary btn-lg" href="http://getbootstrap.com" role="button">Learn more</a></p>
<!–.jumbotron–></div>
[/html]

  • The markup above creates the emphasized area by very simply adding the .jumbotron class to a div containing the content.
  • It’s flexible, very lightweight code which will fill the container it is within and add emphasized typography to the content within.
  • To use this, just add the .jumbotron class to the div containing the content you wish to show off.

Breadcrumbs

Breadcrumbs are an essential feature for usability. Breadcrumbs allow users to easily work out where they are on a website and let them easily find the information they are looking for. Working out how to display breadcrumbs in a unobtrusive, yet stylish way can again take a bit of time, but… you guessed it, Bootstrap can do it!

[html]
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="http://getbootstrap.com">Bootstrap</a></li>
<li class="active">Bootstrap Tutorial</li>
</ol>
[/html]

  • Very simple markup once again, just an ordered list with a class added to the OL element, .breadcrumb.
  • Thats literally all you have to do, and it will produce an effective way of displaying your page navigation links.
  • Note that the / separators are automatically added using the :before & content pseudo classes.
  • So simple, yet so effective.

Blockquote

Blockquotes are for quoting blocks of content from another source within your page.

They are a useful way for emphasizing and differentiating between content.

[html]
<blockquote>
<p>Bootstrap is an extremely useful framework which can provide developers with a toolkit of useful components from Forms, Buttons, Styles, Icons, Typography, Responsive design, to Grid Systems.</p>
<p>Bootstrap is useful for all developers, for users who only have the bare-bones HTML of a system Bootstrap can make your design stylish and user friendly without requiring a designer…</p>
<p>It’s lightweight and most of the features can be used simply by including the minified CSS, meaning you can drop Bootstrap into your projects just to use a few features without comprimising your load times.</p>
<p class="bs-callout">Be careful though, you don’t want to rely on Bootstrap for everything, all your websites could look the same!</p>
</blockquote>
[/html]

  • By default the Blockquote element will just be displayed with a larger margin, appearing more indented than other page elements, by default with Bootstrap however, the typography appears more quote-like, and a border is added, indenting the content.
  • You don’t have to do anything to the Blockquote element in your HTML, it will inherit styles from the Bootstrap stylesheet.
  • To add a source to the quote, just add the source into the Blockquote element, and wrap it in a footer tag. Just like this:

    [code]<blockquote>Quote<footer>Source of quote</footer></blockquote>[/code]

Forms

Forms are a huge part of building websites, and just in general… How many forms do you fill in on average every day? Facebook, Gmail, YouTube… I fill in a lot of forms, so when you’ve built a website which has forms, the default browser styles for forms are just terrible, tiny little grey boxes with no padding. They just look ugly. Once again, Bootstrap is here!

[html]
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
[/html]

  • Individual form controls automatically receive some global styling. All input, textarea & select elements with a class of .form-control are set to 100% width by default.
  • For optimum spacing it is best to wrap form elements within a div with a class of .form-group.
  • The two main classes you will use when creating bootstrap forms are

    [code]<div class="form-group"><input class="form-control" type="text"></div>[/code]

  • There is too much you can do with bootstrap forms to write about here, so checkout their docs.

List Groups

Unordered lists appear on most websites you look at, they are a great way to break information down and allow people to see the most important points of an article without having to strain their eyes.

There’s so much that unordered lists do on websites, from Navigation, Sidebars & Image Galleries. Bootstrap has a few ways to make our standard list look that little bit better.

[html]
<div class="list-group">
<a href="#" class="list-group-item active">
Unordered List
</a>
<a href="#" class="list-group-item">List Item 1</a>
<a href="#" class="list-group-item">List Item 2</a>
<a href="#" class="list-group-item">List Item 3</a>
<a href="#" class="list-group-item">List Item 4</a>
</div>
[/html]

  • The markup above isn’t actually an unordered list, but the same effect can be applied to an unordered list. The class .list-group has been applied to a div containing the list items, the output is stylish and clear to read.
  • List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
  • You can add pretty much any HTML content within these list groups, making them a very useful way to display information.

Dropdown Buttons

Dropdown buttons are cool. Lets face it they make your page look nice and tidy too!

With a dropdown link you can make a mini navigation look good and take up just a tiny amount of space.

You must have JavaScript included in your page if you want to use these buttons.

[html]
<!– Split button –>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-lg">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle btn-lg" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
[/html]

  • Button dropdowns are based on Bootstrap’s usual button, but you can use the button to trigger a dropdown menu by placing it within a div with a class of .btn-group and providing proper menu markup.
  • By placing the .btn-group div around both the Button & UL elements, the page will render them all as one button, with a dropdown.
  • This relies on the JavaScript file being included, the dropdown will not work otherwise.

Alerts

Dismissible alerts are great when you have to show users information without wanting to compromise the page design, again these require JavaScript.

[html]
<div class="alert alert-dismissable alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Congratulations!</strong> You’ve read to the end of the tutorial.
</div>
[/html]

  • To create a dismissible alert just add the class .alert-dismissable to the div containing your alert.
  • You must also add a close button inside this div. Close buttons are a normal button with the class .close
  • To ensure that this alert will work across all devices make sure your close button has a data element attached: data-dismiss="alert".

Hopefully this overview of Bootstrap, and some of it’s most popular features has been useful to you! As usual check back every Tuesday for more tutorials

Contact