Bootstrap Tutorial: A Guide for Beginners

AUGUST 10, 2015 BY UDEMYTUTORIALS

By Sandy Ludosky for Udemy

Interested in more than a beginners guide? Check out Sandysfull Bootstrap course.
Note: This post is part of our Getting Started series of free text tutorials on some of our most popular course topics.
To jump to a specific section, click the table of contents below:

Intro
Get your Bootstrap Project Started
The Project Files
Downloading the Bootstrap Files
Bootstrap Files: What and what for?

Building Faster with the Bootstrap Library

Navbar: Quick and easy setup
A Banner to Impress

Webpage Layout Powered by the Grid System

Grid System: How it works
Services Section
Projects Portfolio
Inside the Footer

Javascript Plugins Made Easy!

Carousel.js
Pop-up Modal
Scrollspy Navigation

Leveraging Bootstrap
Applying Custom Styles
Customizing the Navbar
Styling the Banner

Mobile First
Mobile First: How it works
Advanced Grid System: Multi-column layout
Responsive Utilities

The Viewport Meta Tag

Media Queries

Bonuses
Tooltip.js
More Carousel.js options
Font Awesome
Adding a background image to the banner
Thousands of sites are built every day with The Twitter Bootstrap Framework. This is the most popular HTML, CSS and JavaScript
responsive framework. Every developer and designer should know or learn how to use it.
If you have never used Bootstrap before, you are probably missing out. Why?
Bootstrap saves you a lot of time The framework includes predefined CSS classes, styled HTML components and configured
Javascript plugins ready to use, to help developers design pages better and faster.
Well documented with a massive support system The framework is continuously maintained with regular updates and bug fixes.
Plus, the documentation is very easy and approachable for newbies.
Responsive and mobile first Bootstrap comes with great features allowing your design to work across devices, from very small to
large.
Free and open-source This is the biggest advantage of all. Bootstrap offers a free collection of features and tools. It is super simple
for developers to create responsive layouts in no time.
This step-by-step tutorial teaches you the fundamentals and tools you need to know to create responsive pages with much less effort.
Youll learn the power and flexibility of the framework with through step-by-step explanations and examples. We will cover the full
range of topics, from the simplest to the more advanced.
What you should know to make the most of this tutorial:
Do you know HTML and CSS?
If the answer is yes, you are in the right place.
You should know how to identify HTML tags to create a webpage, and use CSS (Cascading Stylesheet) to make it pretty.
Do you know Javascript?
A beginner level is enough. The Bootstrap documentation is very helpful, with plugins configuration kept simple.
Do you know Bootstrap?
No knowledge of Bootstrap is required. This tutorial is a complete beginners guide to get you started with the responsive framework.
What you will learn:
How to download the Bootstrap files
The pre-defined CSS classes and HTML styled components
The fluid grid system
The JavaScript plugins
Mobile first and the responsive utilities
Leveraging and customizing the Bootstrap resources
And, a few bonuses!
So, lets begin!

Get your Bootstrap Project Started

The Project Files
The project files are available for download as part of this tutorial.
The bootstrap-project.zip includes all the resources you need for you to follow along.
It is divided into chapters corresponding to each section of this tutorial, with a before and an after.

before: allows you to start from a specific section of the tutorial

after: includes the completed version of a section
Plus, a final folder is available if you want to skip ahead and take a sneak peek at the finished product.
We will also show you how to download the bootstrap materials as if you were starting a project from scratch.

Downloading the Bootstrap Files

First things first you will head over to theGetting Started page to download the Bootstrap resources.
Bootstrap offers three download options. Click the first button from the left to download the package, including the compiled CSS and
Javascript files.
This is the most basic form of Bootstrap and the easiest way for you to get started.

(source: http://getbootstrap.com/getting-started/_
Once you have downloaded, unzipped and saved everything in a convenient place, we can have a look at whats inside:

Bootstrap Files: What and what for?

The CSS files
bootstrap.css
bootstrap.min.css
bootstrap.css is the normal version. It can be used at the development stage.bootstrap.min.css is a minified version, less the spaces,
tabs and comments. It is lighter, and therefore recommended for production when the site is ready for launch.
Bootstrap-theme.css
bootstrap-theme.css
bootstrap-theme.min.css
The Bootstrap theme is an optional and additional file. It comes also with predefined classes to add 3-D effects with gradients and
shadows on some elements (e.g., buttons).
You also have the minified version when your site is ready for deployment.
The JavaScript files:
bootstrap.js
bootstrap-min.js
You need to add bootstrap-min.js for plugins functionalities, such as modal.js, carousel.js, and scrollspy.js, that well use in the
project. It also comes in normal and minified versions.
The Glyphicons
Bootstrap includes a collection of over 250 glyphicons in font format. These should be free.
Glyphicon example below:

You will see other files with the .map extension like this:
bootstrap.css.map
bootstrap-theme.css.map
You are now all set and ready to start your learning experience with Bootstrap!
We will kick off with the page layout.
Together, we want to build a one-page portfolio with:
An eye-catching banner
A portfolio gallery to showcase work projects, services and customer testimonials.
This should be a great way to get introduced to the Bootstrap library.

Building faster with the Bootstrap library

You need:
A code editor
A modern browser
The Bootstrap and project files
The library includes:
A powerful fluid grid system
A large collection of built-in CSS and components, ready to use out the box.
JavaScript plugins, easy to integrate with minimal configuration
The documentation is organized into sections:
CSS
Components
And, JavaScript
Each page is divided into chapters with code snippets and examples that you can copy and plug right into your source code.
In the project, we will use:
The navbar component
The Jumbotron
and, some typography pre-defined classes

Navbar: Quick and easy setup

The navbar provided by Bootstrap is available in different variations with lots of add-ons:
Search field
Collapsible menu
Brand image
Buttons and forms
And, there is more behind the scenes:
The navbar is responsive and its appearance adapts intelligently as the viewport width increases.
It requires JavaScript. The javascript.min.js file is usually added at the bottom of the HTML document right after the JQuery
assets.
It is absolutely necessary for functionalities like drop-downs and collapsible menus, to name a few.
I know what youare thinking: it seems like a lot of work.

Well, Bootstrap has already done the hard work for you. We will not be building everything from the ground. We will show you how.
In your code editor, open index.html. You will only need this file open for a moment.
In your index.html file, you will see that we have already made some code available. We will change a few things.

A standard navigation bar is created with

<nav class='navbar navbar-default></nav>

Lets explain the markup bit by bit:
First, we have the <nav> element. If you are familiar with HTML5 semantic, you know that this is used to make your page accessible.
The <nav> element includes 2 classes: .navbar and .navbar-default
navbar: represents the main class, common to every navbar component.
.navbar-default: adds styling with a silver shade, and a combination of gradients and shadows.
There is also .navbar-inverse to obtain an inverted navbar. Try to replace .navbar-default with .navbar-inverse to see the result.
We will move further down to find the <ul> element with the menu links: home, services and projects.
Now, we are going to start changing things:
Navbar fixed to top
It is easy to achieve with a pre-defined class:
Inside the <nav> element, add .navbar-fixed-top like so:

This will keep the navbar glued to the top. When you scroll down the page, the navbar stays in place.
Conversely, you can also use .navbar-fixed-bottom to have the navbar fixed to the bottom.
Component alignment
Now, the navbar would look better with the brand name on one side and the menu on the other side. The component alignment will
do the job perfectly.
By default, an HTML element is aligned to the left. Adding the class .navbar-right allows you to float the element to the right.

Inside the parent element <ul>, add .navbar-right

Now, the menu is automatically flushed to the right.

Brand image
Next, we include a brand image to replace the brand name Joedoe.com.
Inside the anchor tag with the class .brand-image, replace the text link JohnDoe.com with an image tag <img src=..

alt=>
The image source is images/bootstrap-logo.png

And there you have it: a nice navbar fixed to the top with the Bootstrap logo and the menu on the right.

Now, we move on to the banner.

A banner to impress
The banner is a key element to make your content
compelling and powerful. The jumbotron seems like the perfect choice for it.
Jumbotron
The jumbotron is a grey box with rounded corners. It will serve to call extra attention to the banner we are about to build.
As shown below:
copy the code snippet
add to your source code inside <div id=banner>

Then, we make the following changes:

A name wrapped in a <h1>
A title wrapped in a <h2>

To get this:

Feel free to replace it with your own content, of course!

Buttons
A great call-to-action will make all the difference in your portfolio site. Why not use a fancy button?
Bootstrap buttons have a common class .btn and another specific class to add styling and a color.
Example:

<a class="btn btn-default">Learn More</a>

Color options include:

.btn-default
.btn-primary
.btn-success
.btn-primary
-btn-info
.btn-warning
.btn-danger
Inside the jumbotron, replace .btn-primary with .btn-warning, like so:

<a class="btn btn-warning">Learn More</a>

Next to .btn-warning, you have the class .btn-lg

Size options include:
.btn-lg for a large button
.btn-sm for a small button
.btn-xs for very small
and, no class defaults to a medium size.
We keep .btn-lg, which will work best for a call-to-action.
Alignment classes
Finally, we center the text inside the jumbotron with the alignment classes.
In the parent element of the jumbotron, add .text-center.

<div class="jumbotron text-center"></div>

Final result:

The services and projects portfolios are coming next.

Now is a great time to talk about the grid system.

Webpage layout powered by the grid system

A portfolio is the place to showcase your most valuable work. So, you want to make it visible to a wide audience and on all devices.
For that, we need a responsive and flexible layout that can work across all devices, from large screens to smartphones.
You can achieve that with the grid system and the pre-defined grid classes.
The grid system is mobile first, fluid and responsive.
Responsive and fluid: it scales up to 12 columns as the device size increases
Mobile first: the design will always be full-width unless you specify otherwise with the pre-defined grid classes.

Grid System: How it works

The markup below is a basic example of the grid system:

The .container represents the highest level of the grid system structure.
Within the .container, we add the .row, which, as you may expect, creates a row.
You can then complete the grid layout by adding columns.
The above grid example above, with 3 div elements and the class.col-md-4, will render like this:

Lets break this down a bit:

col is the common prefix to every pre-defined grid class.
md is short for medium devices. It targets medium and large screens. (>992px). See othergrid options
4 is the number of columns you want to add to your design.
It can be a number between 1 and 12.
We will repeat this together, because now we have to build the sections:services and projects.

Services Section
In our template, inside the section <div id=services>
Add a div .container
Within the container, add the .row to include the columns.
The expected result is 3 paragraphs on 1 row.
We are only targeting the desktop and large screens for the moment.
So, we add 3 divs and.col-md-4 like so:

Inside, add an <h3>

And, use lorem ipsum for the <p> content.
Let s do the same for the projects portfolio section, where we will add images.

3-3 Projects Portfolio

Inside the section <div id=projects>
Add a .container
Within the container, add a .row to include the columns.
The expected result is 4 images on 1 row.
We are only targeting the desktop and large screen for the moment. So, we add 4 divs and.col-md-3

We will add images soon

Image thumbnails
We are getting closer to finalizing the projects gallery. We are just missing images.
Each column .col-md-3 will hold an image thumbnail.
The thumbnail is a component designed to showcase images. The markup is minimal and the setup quick just what we are looking
for!
Copy the markup from the documentation below:

Add the code snippet inside each column like so:

<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="images/projects/web-template.png" alt="image">
</a>
</div>

This is a 4-column layout, so make sure to use.col-md-3.

You can then add a source image for each thumbnail.
We have made images available in the images folder (images/projects/web-template.png).
Or, feel free to use your own assets. This is your portfolio, after all.
This is how the final markup should look:

And, here you go!

Now, add another row to display 4 more thumbnails

In total, we have 2 rows and 8 image thumbnails.
We have another section dedicated to testimonials. This is empty for now. We will leave this part for later, when we will create a
slideshow with carousel.js.

Inside the footer

We will complete the design layout with the footer.

We have 2 paragraphs and we want the 2 on the opposite sides of the screen. This can be done with a 2-column layout.
We start with a .container inside the footer tags
Next, we include a .row to wrap 2 columns
Then, we add .col-md-6 <div class= col-md-6>
6 and 6 add up to 12 columns, which will be the full width of the 12-column grid.
Finally, we re-align each paragraph with .text-left and .text-right like so:

We are almost done with the footer. Next, we are adding alabel and a glyphicon.
Labels
The page was designed with Bootstrap v.3.3.5 and we want to highlight it with a label. It works like the button with a common class
.label and modifier class to add the styling and a color.
Wrap Bootstrap v.3.3.5 within <span> tags
Add the common class .label to the opening <span> tag
Choose a modifier class to add color.
We will add .label-primary

<span class="label label-primary">Bootstrap (v3.3.5)</span>

Glyphicons
Glyphicons are free to use with the Bootstrap resources.
Every glyph has a common class .glyphicon, then another class specific to the glyphicon selected.
We are going to use glyphicon-heart to display Designed with
Inside the second <p>, add a <span>
Inside the <span>, use the class .glyphicon and .glyphicon-heart like so:

<span class=" glyphicon glyphicon-heart" aria-hidden="true">

The role of glyphicons is purely decorative, so to hide them from assistive devices (screen readers) we add the attributeariahidden=true
Here you go:

Good job!
Next, were going to take another step further into the Bootstrap learning experience with the JavaScript plugins.

Javascript plugins made easy!

Knowing some JavaScript will be enough to get you up and running with making your site interactive, and with the help of Bootstrap.
Heres how:
We will start with carousel.js to create a slideshow and display customers testimonials
Next, we will add a modal. This is like a small window popping up on a click event
Lastly, scrollspy.js: another plugin that comes with the power of updating the active state of a menu link based on the scroll
position of a webpage. (See the example with scrollspy.)
Even if it seems like a challenge, you can be assured that its not.

Carousel.js
Below the projects gallery, we have included a testimonials section so visitors can read through reviews left by satisfied customers.
Given the great amount of content possible, displaying 4 or 5 testimonials could use up a lot of real estate. Therefore, we will include a
carousel to allow visitors to slide through testimonials one after another instead of scrolling down the page. Real smooth!
So, lets build a slideshow of testimonials.
To build the slideshow, we will use:
Carousel.js
Media objects
Testimonials Slideshow
Copy the first markup example available on the documentation

Inside <div id=testimonials>, add the carousel markup.

You can get rid of the indicators.
We only keep the wrapper for slides and the controls.

Try it now!

You will see the structure of the carousel with 2 controls (left and right arrows) on each side. There is no content for now.
Next, we will add the content: the testimonials.
Media Object
Inside each .item slide, we add a media object.
Copy the code example available in the documentation and paste directly inside the.item.

Get rid of the <div> and <img> tags of the .item slide
And, replace them with the media object code snippet.

To complete the markup of the media object, simply add:

the image source: images/testimonials/
lorem ipsum within the .media-body
To adjust the layout, wrap each media object in a column with.col-md-8 and .col-md-offset-2
This is the final markup below:

What about .col-md-offset? Well, we have not covered it yet.

Offsetting columns works in combination with the grid system classes. It allows you to move columns to the right by increasing the
left margin.
It works much like the grid classes.
The prefix is to target the viewport size. col-md-offset
The suffix number, between 1 and 11, indicates by how much you want to move the columns further to the right.
See the difference for yourself with or without .col-md-offset-2.
Without, the columns are not centered.
With, the 8 columns are centered and moved further right by 2 columns.
Image shapes
We will finish with some images. Images can be styled easily withimage shape.
Which one do you want?
Img-rounded
Img-circle
Img-thumbnails
Add .img-circle to the <img> tag like so:

<img class="media-object img-circle" src="images/testimonials/male-client2.png" alt="image">

We now repeat the process from the top to have 3 (or more) slides in total.
Add an .item slide
Add a .container
Include a .row and 8 columns with .col-md-8
And, offset by 2 columns with.col-md-offset-2
Add the media object markup.
Finally, change the image shape with .img-circle

Thats it! Now visitors can enjoy cycling and reading through your clients testimonials. What a treat!

Pop-up Modal
The Modal plugin is like a dialog box or a pop up window used to display information to visitors.
We will add a modal to the jumbotron section. You remember with the call-to-action button, right?
Clicking the button will make a window pop up to display well, we wont tell you right now.

For now, we will show you how to create a modal via data-attributes.
2-step process
On the bootstrap documentation, lets head over to the javascript section and select modal.js to see how the markup looks:
We first need a trigger button.
data-target and data- toggle are data-attributes that you embed inside your markup to bind the HTML elements with javascript.
Example:

<a class="btn btn-warning btn-lg" href="#" data-toggle="modal" data-target="#contactMe" href="#"Contact Me </a>

In the jumbotron:
Inside the button element is where we add data-target=#contactMe and data-toggle=modal. This is the trigger button.
Change the text to Contact Me!.

<p>
<a class="btn btn-warning btn-lg" href="#" data-toggle="modal" data-target="#contactMe" href="#" role="button">
</p>

Next, there is the modal element.

It has 3 primary sections:
A modal-header
A modal-body
A modal-footer
We have already made the modal element available in the project with our own markup.
In the source code, this modal structure is invisible until triggered with a click event.

The modal element has a unique identifier id=contactMe.

Very important: the data-target and the identifier must match. So, remember to update thedata-target=#contactMe inside the
trigger button, to match the id=contactMe in the modal.
Try it now!
When you click on Contact Me, the button will fire off the modal dialog and display surprise! A contact form:

Inside the .modal-body, we have added a contact form. You can also include:
A video
An image
Or, remote content
We will make a detour to the CSS section to explain how to set up a contact form.
Contact Form Modal
This is a great example of a pre-styled and enhanced HTML element. Form elements are ready to use with no extra styling required.
Here is how we did it:

The form documentation includes code examples and snippets that make the process straightforward.
We have pasted the HTML form code snippet inside the.modal-body
And, we have kept just what we need:
fields for the name and an email address
and, a textarea for the message.
Each label and input is wrapped in a .form-group
The for and id attributes must always match to allow autofocus.
Forms add-ons and variations include:
Static Control
Focus, disabled and readonly State
Help text
And, control sizing
We will look at the 2 last ones: help text and control sizing.
A help text is extra information to the user.
Below the textarea, we add the following code:

<span id="helpBlock" class="help-block">250 characters maximum</span>

(optional) Add the attribute aria-describedby=helpBlock inside the associated input or textarea for assistive technologies such as
screen readers.
Control sizing is made possible with super helpful classes like.input-lg and .input-sm
Try .input-lg inside each input to see how it renders.

<div class="form-group">
<label for="sender-name" class="control-label input-lg">Name:</label>
<input type="text" class="form-control input-lg" id="sender-name">
</div>

List-inline
Below the submit button, we have added an additional modal-footer to include a list of social media links.

<li> are, by default, block-level elements, meaning each will use one line.
In order to display the social media links on one single line, we use .list-inline like this:

<ul class="list-inline">

This will result in an inline list like below, when the modal dialog opens up:

Changing the modal size

The modal comes in 2 sizes: large and small.

In your markup, add the modifier .modal-lg next to .modal-dialog. This will make the modal bigger.

<div class="modal-dialog modal-lg" role="document">

Conversely, .modal-sm gives you a small modal.

<div class="modal-dialog modal-sm" role="document">

Try it!

Scrollspy navigation
The scrollspy plugin watches for position change on a webpage to automatically update the active state of the navigation links.
It means literally what its called.
Spy = it spies on the element to which it is attached
Scroll = it updates based on the scroll position
We will add the scrollspy behavior to the navigation bar. Just like the modal.js, it requires 2 steps:
We add the data-attribute data-spy=scroll to the element we want to spy. We will add this one to the<body> element:

<body data-spy="scroll">

Inside the body, add data-target:

<body data-spy="scroll" data-target="#menu">

The data-target refers to the element we want to update with the active state. In this case, this is the menu navigationhome,
(
services
and projects). This one will have a unique identifier.

Inside the div that wraps the unordered list <ul>, add a unique identifier.

<div class="collapse navbar-collapse" id="menu">

<ul class="nav navbar-nav navbar-right text-center">
<li class="active"><a href="#banner">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Projects</a></li>
</ul>
</div>

Important: both the data-target and the id must match.

Try it now!
When you click a menu link, the page skips to the targeted section and the link automatically updates to active. This is a much better
user experience.
Bootstrap can help achieve great results with little to no effort. Look at the portfolio that you just built. Impressive!
Next, we will take your Bootstrap experience to the next level by teaching you how to combine default and custom styling.

Leveraging Bootstrap
Looking at the source code of some websites, it is very common to find properties from Bootstrap. However, you could not guess by
just looking at the interface. These sites look nothing like Bootstrap.
Many developers and designers use Bootstrap to get a quick start in their project. Their expertise allows them to fully take advantage
of the framework while staying in control of their design.
You can do it too!
We will show you how to do that in a manner that is quick, effective and non-obstructive.

Applying custom styles

In your code editor, open css/style.css. Inside, we have added some global styling.
Below is where you will write your custom style to override the default Bootstrap CSS.

Very important: you never ever want to change the bootstrap files: bootstrap.css or bootstrap.js.
This is recommended practice to keep your custom style and the Bootstrap files separate.
Your custom style must be in style.css or else.
And, the bootstrap files remain untouched.
Naturally, you must add your style.css stylesheet in the head section of theindex.html, like we did for you.

The goal here is to override the default Bootstrap CSS. To do so, your custom style always comes last. This follows the rule of
Cascading Stylesheets, so CSS rules positioned last take precedent.
And, this is how we can start customizing Bootstrap.

Customizing the navbar

The default navbar is easily recognizable. Anyone could guess that your site is a product of Bootstrap. However, you want it to be your
portfolio, not just a copy of a Bootstrap template. Time to be original!
We will start by targeting the text links. They look a bit tiny.
And, we will also change the font size.
In style.css, we have already added the corresponding selectors.
First, we target the .navbar with font-size:20px;
Second, we make the width of the <li> larger.
(style.css)

We also target .navbar-brand in case you should decide to keep a text link in lieu of the bootstrap logo.
Finally, we align the text links with .text-center in the HTML markup

Looks different already.

Styling the banner

For the banner we want to get rid of the jumbotrons default grey color and display the content on a plain background color. Finally,
we increase the font size of the headings.
In order to figure out which CSS rule needs overriding, we must look into the default Bootstrap CSS. We dont mean for you to open
and inspect the bootstrap.css. No! Instead, we will use the inspector tool.
The inspector tool
If you are using Chrome, the inspector tool comes with the web developer tool.
Click right on the element you want to inspect
Select inspect element to open the console

In the console, the left side allows to inspect the DOM (Document Object Model)
The right side provides you with styling details about the HTML element inspected (highlighted)
Try it yourself! Highlight the jumbotron, click right and select inspect element to open the console.

As seen on the console, the .jumbotron class has the following CSS rules.
We want to override: .jumbotron {background-color: #eee}

(console right panel)

In style.css, complete the code like so:

.jumbotron { background-color: transparent; }

Once your custom change is applied, you notice that the information on the console has changed.
Your custom style.css is available first, meaning that it takes precedence over other styles.
If you scroll down the console a little, you will see that the same selector originating from the bootstrap.min.css is stricken
through, meaning that it has been overridden by your custom style.

If you use Firefox,firebug will help you through the same process.
Web developer tools for other browsers are listed here.
Font size
As part of the customization, we make the headings bigger with.font70 and .font80.
These rules are available at the top of style.css.
Complete the code like below:

<h1 class='font80' >John Doe</h1>

<h2 class='font70'>Developer &amp; Designer</h2>

Same for the headings of the sections services, projects and testimonials:

<h1 class="font60">Services</h1>
<h1 class="font60">Projects</h1>
<h1 class="font60">Testimonials</h1>

Finally, lets change the color to something lighter.

.jumbotron {
Background: transparent;
color: #ecf0f1;
}

For the color swatches, we are usingflatuicolors.

And, the page customization is now complete.

We told you that it would be effective, non-obstructive and quick!

Effective: the inspector tool helps find exactly which selector to target.
Non-obstructive: we allow the bootstrap and custom files to co-exist in a project without interfering with each other. The last
file will override the first without altering the original files.Because your site is powered by the framework, you must always
have the Bootstrap files in your project. However, removing the custom style will not break your site. You would only lose the
custom style.
And quick: because of the first two!

Mobile First
There are over 3.1 billion mobile web users worldwide. In the U.S. alone, 25% of mobile web users use mobile only. And, the numbers
keep growing.
Mobile first is an important concept to consider. As the web landscape becomes increasingly complex, it is becoming even more
challenging for developers and designers to create the best universal web experience.
Thankfully, the Bootstrap framework is responsive, flexible and mobile first. It provides great tools and solutions to help build layouts
that can gracefully adapt to any device.
Lets see it in action with a quick demo.
Try to reduce the size of your browser and watch what happens.
First, the navigation bar is replaced with a square-shaped icon with 3 lines across it.
Clicking the icon will toggle the menu up and down to alternately reveal and hide the menu content.
On a large screen, we see a horizontal menu that turns into a collapsed menu when switching to a small screen. Genius!

This is a great example of adaptive design that Bootstrap can help us achieve with little effort.
However, not everything looks as nice on a small device as on a desktop view.
When you scroll down the page, you may notice a few areas that need improvement.
The pre-defined grid options classes and the responsive utilities will come to the rescue.
In this part, we are about to take it up a notch with more control over how your design renders on multiple devices.
Topics include:
Mobile first: How it works
The advanced grid system with multiple-column layouts
The responsive utilities
The viewport meta tag
And, the media queries

Mobile first: How it works

The services section is made of 3 columns. For that, we are using.col-md-4.
You remember the third sections introduction to the grid system, where we explained thatmd is short for medium.
col-md is used to target medium-sized and large screens only.
Any smaller size will not be targeted, bringing the column size to its default: full-width.
Confused? Lets clarify with a demo:
Reduce the size of the screen to see what happens with theservices layout.
With the grid system, the default styling is always full-width until overridden with a pre-defined class like.col-md-4.

Full-width looks best on a smaller screen hence the concept of mobile first. So, we wont change anything here.
However, if you decide to override mobile first on a tablet, you would use the class.col-sm-4 to target 768px-wide devices and larger.
Lets try that next.

Advanced grid system: Multi-column layout

The projects gallery displays on 4 columns. That looks nice on desktops and large screens.
What about on a tablet? It looks a bit squished. It would be nice to see 2 images on a row.
With an advanced grid system, it is possible to combine multiple pre-defined grid classes to create a multi-column layout like the
example below:

<div class="col-sm-6 col-md-3">

</div>

The markup should look like this:

On tablet view, the class .col-sm-6 will limit the number of images to 2 per row, while the number will remain at 4 on a desktop view
with .col-md-3.
See below if it makes more sense:
Desktop view

Tablet view 2 images per row!

Now, going even smaller, like on a smartphone, things start to get a bit cluttered. There is a lot going on. And, we have a lot to scroll
down through before reaching the bottom.
To improve the mobile user experience, it is best to keep the content to a minimum and limit the number of images to 4 in total.
How so? By making one row invisible. This is when the responsive utilities come into play.

Responsive utilities
Just like the grid options, responsive utilities allow more flexibility in the responsive layout. Their purpose is to make elements visible
or invisible based on breakpoints.
In Responsive Web Design, breakpoints are used to target different devices with specific styling.

Hidden row
To make the second row disappear when we reach the small (<768px) breakpoint, we use .hidden-xs.

And thats all there is to it!

Testimonials: Adaptive content
Moving on with the responsive utilities, we will adapt the testimonials section to the mobile screen.
On a tablet view, the testimonials carousel looks fine.
On a small device, its harder to read.
Inside the section testimonials:
We add another .container right before the closing tag.

</section><!testimonial -->
Inside the .container, we add:
A <h1>
And, a media object (the same that we have inside the carousel) like so:

Now, the goal is to make the content interchangeable and adaptive based on the viewport size.
.visible-xs makes the content visible on small devices only
Conversely, .hidden-xs hides the content on small devices
To do so:
We add .hidden-xs to the container with the carousel

<div class="container visible-xs">

And, we add .visible-xs to the second container without the carousel

<div class="container hidden-xs">

Then, the web content adapts as the viewport changes size.

Now try it in your browser
On medium to large screens, we can slide through testimonials. Then, the slideshow gets replaced by static content when we reach
the smaller breakpoint.
Interchangeable Headings
We are purposely making the heading bigger. However, this may not suit the mobile display. Too big!

The idea is to duplicate headings in the markup and to alternately display them as the screen size decreases.
In the banner, update the code like this:

<h1 class='font80 hidden-xs'>John Doe</h1>

<h2 class='font70 hidden-xs'>Developer &amp; Designer</h2>

(Duplicate: will show on small screens only):

<h1 class='visible-xs'>John Doe</h1>

<h2 class='visible-xs'>Developer &amp; Designer</h2>

The first headings will display on screens of 768px and larger

The second set of headings (duplicate) will show on smaller screens with a regular font size: 36px.

Repeat the process for each section:

Services
Projects
Testimonials
Example:

<h1 class='font60 hidden-xs'>Services</h1>

<h1 class='visible-xs'>Services</h1>

Now, you are probably wondering how the browser can figure out which class to apply. This is when the meta viewport tag comes into
play.

The Viewport Meta Tag

The meta viewport is set in the head section of theindex.html

<meta name="viewport" content="width=device-width, initial-scale=1">

The viewport represents the visible area of a page, which varies as the device size gets smaller or larger.
With the viewport meta tag, the width of the screen is detected and the information is sent to the browser, which knows the CSS to
apply for a specific breakpoint. It lets you control how you want your site to display on different screen sizes.
For better control over cross-platform responsive design, you can write styling that will take effect for specific breakpoints. CSS lets
you define it with the media queries.

Media Queries
The @media rule is used to define different styling for key breakpoints.
Some global styling was not really to our liking.
So, in style.css, we use the @media rule to write custom styling for the navigation links and the footer to better fit the small screen
view.

@media screen and (max-width: 468px) {

}

Navigation links <li>

Because full-width always works best on small screens, we set the width of the<li> at 100%
In the media queries, update with the code below:

@media screen and (max-width: 468px) {

.navbar li {
width: 100%;
}
}

Footer
For the footer, the columns become full-width automatically with mobile first.
However, we use text alignment classes in the markup and it looks funny on a small screen.
So, we adjust like so:
text-align:left
Plus, we are adding a little bit of margin on the top and bottom.
In the media queries, update with the code below:

footer p {
text-align: left;
margin: 3px 0;
}

Before After Better!

Bootstrap provides a table of media queries that you can use in FEWER files. Replace the @variables with numerical values to define
your breakpoints and you are good to go.
Congrats for making it this far! Still cant get enough of Bootstrap?
There is more to come, and we have saved the best for last. Here come the bonuses!

BONUSES
Topics include:
Tootip.js
Carousel.js
Font Awesome
Adding a background image to the banner
Tooltip.js
Tooltip.js is a quick way to display extended information on mouseover, like the example below when hovering over an image.

It works via data-attributes, and the configuration is minimal.

Inside <div id=project>, each image thumbnail will include a tooltip:
First, the attributes: data-toggle and data-placement are added to the <img> element.
Another attribute is title with the text you want to display as a value.

<img data-toggle="tooltip" data-placement="bottom" title="Add text" src="images/projects/web-template6.png" alt='image'

You will not be able to see the tooltip yet.

Tooltip.js needs to be initialized with a little script at the bottom of the index.html like so:

$(function () {
$('[data-toggle="tooltip"]').tooltip()
});

We call tooltip() on [data-toggle=tooltip]

Try it! You must refresh your browser first.
Update data-placement to position the tooltip: left, right or top
Update title to add your text
More Carousel.js options
We want to show you how to have more control over the carousel behavior, such as:
Interval
And, pause on hover
The interval is the amount of time between each slide. The default is 5000ms, which is in milliseconds.
To give your visitors all the time they need to read through testimonials, we should increase this value a bit.
Options can be easily implemented via data-attributes, inside the carousel parent element, along with other data-attributes like this:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >

To change the default value of interval, we write data-interval

The value is in milliseconds. So, we write 10000 for a 10-second interval.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="10000" >

Thats more time to read all the great feedback left by customers!
You also can allow a pause between each slide.

On mouseover, the cycling pauses automatically, and then it resumes on mouseout.

This is another option available with data-pause=hover
Add it to the carousel parent element like so:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover"

Now, try it!

The slideshow cycles through the slides every 10 seconds, stops on hover and resumes on mouseleave.
It is definite advantage to be able to control the behavior of a site this way. You can read more aboutoptions here.
Font Awesome
Font Awesome is a collection of 519 scalable vector icons, also designed by the Bootstrap team. They are delivered in font format, so
they can be customized with CSS.
We will update the following sections with the Font Awesome icons.
Services
Modal Contact Form
We will start with a quick setup with CDN.
Quick setup with CDN
Font Awesome offers a quick and handy way to get started with the CDN.
In the head section, we have added the Font Awesome CDN.

A CDN is a Content Delivery Network, or a system of distributed servers that delivers content based on the users geographical
location.
This is like using a regular stylesheet, except that the file is hosted on an external server. Therefore, the page is lighter and loads much
faster.
Now, we are going to seeexamples of icons and see how to add them to our designs.
To add a Font Awesome icon, use <i> tags
The common class is .fa
Then, add a modifier for the icon selected. Example: .fa-camera-retro
Here is the result:

<i class="fa fa-camera"></i>

In the services sections, we add a few icons to make it more appealing.

In the markup, add a <p> above the <h3>
The <p> will host the icons wrapped in <i>

Complete the markup like so:

<p><i class="fa fa-mobile"></i></p>

You can also customize the size with .fa-4x

<p><i class="fa fa-mobile fa-4x"></i></p>

Update all 3 columns with Font Awesome icons like this:

<p><i class="fa fa-desktop fa-4x"></i></p>

<p><i class="fa fa-mobile fa-4x"></i></p
<p><i class="fa fa-pencil fa-4x"></i></p>

Font Awesome is in font format, so we can customize with the CSS color property in style.css:

#services i {
color: #3498db;
}

We do the same for the contact form in the modal dialog. In the modal footer, we have included text links that we will replace with
font icons.
From this:

To this:

In the modal element, we replace the text links with social media font icons.
The markup looks like this:

<ul class="list-inline">
<li><a href="#"><i class="fa fa-facebook-square fa-3x"></i></a></li>
<li><a href="#"><i class="fa fa-twitter fa-3x"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin fa-3x"></i></a></li>
<li><a href="#"><i class="fa fa-github fa-3x"></i></a></li>
</ul>

Background Image
This is the final touch to wrap it all up.
In the project files, we have added background imagesimages/background.
In style.css, we can update like so:

#banner {
background: url("../images/background/bg-1.jpg");
background-size: cover;
}

Try it!
We hope you enjoyed this tutorial.
You are now well on your way to creating some awesome pages.
To further your learning with Bootstrap, watch Start Now With Bootstrap and create a portfolio website with HTML, CSS & Bootstrap.
These 5 hours of video content will get you up to speed with the front-end framework. Practice makes perfect.
Photo courtesy of Unsplash and Freepik

Filed Under: Uncategorized

TOP UDEMY COURSES:

Top Java Courses
Top Python Courses
Top Excel Courses
Learn Excel With This GIF Tutorial
Become a Web Developer from Scratch! (8100+ students)
Advanced Excel Training (42,660+ students)
Coding for Entrepreneurs (4810+ students)
iOS Development Code Camp (1155+ students)

Advanced Java Programming (735+ students)

POPULAR POSTS
How to Build an iPhone App from Scratch for Non-Technical People: Your quick and dirty guide
Excel Formulas: 10 Formulas That Helped Me Keep My Job
Code Wars: Ruby vs Python vs PHP [Infographic]
Top 10 Programming Languages to Learn in 2014
How to Add Ringtones To Your iPhone (Updated for iOS 7)
8 Best PowerPoint Presentations: How To Create Engaging Presentations
Java Interview Questions: How to crack the TOP 15 questions
Drupal vs Joomla vs WordPress: CMS Showdown [infographic]
Making an App: 6 Things You Should Consider Before Getting Started
10 Frmulas de Excel para ser Ms Productivo

Return to top of page

Copyright 2016 Udemy, Inc. Built on the Genesis Framework