Create a Fully Functional Mobile Website with BootStrap

When I first started learning Bootstrap, I thought it was too plain and just no fun to use.  After some time of using Bootstrap, I found it very useful, and much easier to design for mobile.  Bootstrap is a framework for HTML, CSS and JavaScript for developing responsive, mobile-first projects on the web.

Download source code

You can download this tutorial’s source code of this tutorial here.


The template for a Bootstrap website starts like this:

To implement Bootstrap in our website, we use the Bootstrap CDN for CSS and JavaScript.  You can choose to use the CDN’s or you can choose to download the complete Bootstrap framework.  The “3.3.5” is the version of Bootstrap.  As time goes by, the version gets updated, so ensure that your website is up-to-date with the current version of Bootstrap.

Let’s get on with it.  In this part, I will introduce to you the Navbar, the Jumbotron, Glyphicons, the Grid System, and the Carousel.

To fluid or not to fluid

Looking back at the above template, there is a div with a class container-fluid.  You got two class options, .container if you want a fixed width or .container-fluid if you want a full width.


The jumbotron is one of Bootstrap’s lightweight and flexible component.  A simple jumbotron looks like this.

A jumbotron is created using a div with a classname jumbotron.

You can give the jumbotron some color and/or image as well, using the jumbotron class.

Jumbotron styled
Figure 1: Jumbotron styled

Nav and Navbar

Navs have their shared markup, starting with the base .nav class.  Let’s have a look at this very simple nav:

You can replace the .nav-tabs with .nav-pills.  You can stack pills vertically with .nav-stacked.  You can also make them justified with .nav-justified.

Navbars, on the other hand, are responsive meta components that serve as navigation headers for your website, as shown in Figure 2.  They begin collapsed in mobile views and become horizontal as the available viewport width increases, as shown in Figure 3.

Navbar in mobile view
Figure 2: Navbar in mobile view
Figure 3: Navbar
Figure 3: Navbar

The following code is a rather lengthier version from the previous .nav we just used.

We gave this navbar an inverted look .navbar-inverse.  The .navbar-default gives the navbar a plain white background look, with .navbar-inverse, you give your navbar a darker look.  However, if you don’t want the light or the dark navbar look, you can always style to the color you want, but this also will affect the burger menu.

The button has a class of collapsed, this is only viewed when the device is a phone.  The three span with class icon-bar gives the button three lines, which is now frequently termed the “burger menu”.  Although, you are a not limited to three icon-bar’s.

You can change the navbar to the style you want by styling the .navbar, .navbar-toggle, and .icon-bar.  Of course, the first thing to do is remove the .navbar-default or .navbar-inverse.

You can add .navbar-static-top to ensure the alignment you want for your navbar.  This creates a full-width navbar that scrolls away with the page.  Your navbar can also be aligned to the left, .navbar-left, or to the right, .navbar-right, or it can be fixed to the top, .navbar-fixed-top, or to the bottom, .navbar-fixed-bottom.

The .navbar-brand is where you are able to brand the navbar with your company name or blog/website name.  You will notice that the .navbar-brand is a part of the .navbar-header, therefore, the brand name will still appear when it’s viewed on a mobile device.  The div with a class .navbar-collapse and .collapse ensures a responsive navbar.  The first list class is set to active to show the user which page of the website they are viewing currently.

Figure 4: Navbar for mobile, styled
Figure 4: Navbar for mobile, styled
Figure 5: Navbar, styled
Figure 5: Navbar, styled

Finally, before I end of navbars and move on the next section of this tutorial, I want to style one more thing to the navbar.  You can choose to leave your navbar in the position it currently is, at the top.  Or if you want to have it placed within the jumbotron, for neatness, or your preference, we wrap the whole nav into a .navbar-wrapper, and style the necessary.

The good thing about Bootstrap, is that they allow us to customize and adapt their example templates.  This styles was taken from Bootstrap’s Carousel example.

Figure 6: Positioning the navbar
Figure 6: Positioning the navbar


Glyphicons is a library of icons and symbols, and they are fun to use.  To demonstrate its use, we will add glyphicons to our navbar menu items.  There are over 250 glyphicons that you can use to suit your requirements.  For more information about glyphicons, visit http://getbootstrap.com/components.

For performance reasons, icons are best used with another element, and allow for spacing between the icon and the text.

Figure 7: Glyphicons
Figure 7: Glyphicons

You can see in the code, the <span> with the class of glyphicon and glyphicon-*.  We use a span because icon classes cannot be directly combined with other components.

For the benefit of assistive technologies we can add an aria-label attribute on the controls, like this.


The carousel is like an image gallery slider, but, you don’t have to use it for images only.  It’s a slideshow for cycling through elements, so, you can have text, and/or images in them.

The id is the name of your carousel that is required as it is also referred to in the list as a data-target.  That id name can be any name you find suitable.  If you are wondering what is data-target, it is basically a data attribute called target, that carousel.js uses in its JavaScript code to target that id.  To know more about data attributes, there is a nice tutorial here.

The .carousel is specifying that this div contains a carousel; while the .slide adds a CSS transition and animated effect when the item is slide across the screen.  You can choose to keep the .slide or not.  The .carousel-indicators are the little dots at the bottom of the carousel.  This indicates how many slides there is in the carousel as well as which slide the user is currently viewing.  Within the .carousel-inner div, all the content for each slide is specified.  The content of each slide is defined in the .item class, which can include text or images.

The left and right controls defined in the last 8 lines above allows the user to go back and forth between the slides manually.

A bit of CSS to cater for positioning of the image as well as height of the carousel.

The Grid system

The Grid system is first thing one learns when they learning Bootstrap.  It is a mobile-first fluid grid system that appropriately scales up to 12 columns.  Your rows must be placed within a .container (for fixed-width) or .container-fluid (for full-width), this allows for proper alignment and padding.  There are four screen sizes: -xs- for extra small; -sm- for small; -md- for medium; and -lg- for large screen sizes.

Extra small devices are phones with screen width smaller than 768px; Small devices are tablets with a screen width of 768px and up; medium devices are desktops with a screen width of 992px and up; and large devices are large desktops with a screen width of 1200px and up.

If you apply any .col-md-* class to an element, you are not only affecting its styling on medium devices but also on larger devices if a .col-lg-* class is not present.  Media queries in the LESS files are used to create the key breakpoints in the grid system.  Each row much be equal to 12 columns, if its more than 12 columns, those columns will wrap onto a new line.

In our example, we used the Stacked-to-Horizontal grid system, which displays as horizontal on desktop and stacked on mobile and tablet devices.

Figure 7: Grid system
Figure 7: Grid system

In this introduction to Bootstrap, you were introduced on some of its basic features.  Creating a Jumbotron, styling a navigational menu, attaching some glyphicons, seeing how useful a grid system can be and creating a slideshow using Carousel.js.  Bootstrap is useful for developing for mobile devices.

Hope this tutorial was helpful in getting to grips with its complexities.  What type of website would you be building with Bootstrap?  Do you have any questions about styling with Bootstrap?  Feel free to leave comments.

Published by

Ronica Singh

A software engineer, web/app developer, gamer and love coding for fun. Like to learn a new language or technology. My interests are in game development as well as web app development.

Share this article