Bootstrap Tutorial: A Guide for Beginners

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.

You’ll 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 beginner’s 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, let’s 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 abefore 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 the Getting 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.

image45

(source: http://getbootstrap.com/getting-started/_

Once you have downloaded, unzipped and saved everything in a convenient place, we can have a look at what’s 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 we’ll 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:

image47

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 customertestimonials.

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 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 you’are 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.

image46

A standard navigation bar is created with

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

Let’s 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:

image49

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

image48

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

image51

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

image50

Now, we move on to the banner.

A banner to impress

The banner is a key element to make your content[<p style="text-align: justify;">

</p>

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.

You’ll 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 beginner’s 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, let’s 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 abefore 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 the Getting 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.

image45

(source: http://getbootstrap.com/getting-started/_

Once you have downloaded, unzipped and saved everything in a convenient place, we can have a look at what’s 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 we’ll 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:

image47

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 customertestimonials.

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 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 you’are 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.

image46

A standard navigation bar is created with

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

Let’s 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:

image49

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

image48

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

image51

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

image50

Now, we move on to the banner.

A banner to impress

The banner is a key element to make your content](https://blog.udemy.com/wp-content/uploads/2015/08/image511.png) 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”>

image53

Then, we make the following changes:

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

image52

To get this:

image56

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>

image54

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>

image55

Final result:

image57

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:

image58

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:

image59

Let’s 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 other grid 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: servicesand projects.

Services Section

In our template, inside the section <div id=”<b>services</b>”>

  • 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:

image60

  • 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=”<b>projects</b>”>

  • 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

image61

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:

image62

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:

image63

And, here you go!

image64

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=” <b>col-md-6</b>”>

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:

image35

We are almost done with the footer. Next, we are adding a label and a glyphicon.

Labels
The page was designed with Bootstrap v.3.3.5 and we want to highlight it with alabel. 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>

image36

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 image10

  • Inside the second <p>, add a <span class="c4 c2 c16"><span></span> 
  • Inside the <span>, use the class .glyphicon and .glyphicon-heart like so:
    <span class=" glyphicon glyphicon-heart" aria-hidden="true">

image37

The role of glyphicons is purely decorative, so to hide them from assistive devices (screen readers) we add the attribute aria-hidden=”true”

Here you go:

image38

Good job!

Next, we’re 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. Here’s 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 theexample with scrollspy.)

Even if it seems like a challenge, you can be assured that it’s 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, let’s build a slideshow of testimonials.

To build the slideshow, we will use:

Testimonials Slideshow

  • Copy the first markup example available on the documentation

image39

  • Inside <div id=”<b>testimonials”</b>>, add the carousel markup.
  • You can get rid of the indicators.
  • We only keep the wrapper for slides and the controls.

image40

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.

image41

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

image42

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:

image43

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 with image 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

That’s 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 won’t tell you right now.

image44

For now, we will show you how to create a modal via data-attributes.

2-step process
On the bootstrap documentation, let’s 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” anddata-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"> Contact Me </a>
 </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”.

image11

Very important: the data-target and the identifier must match. So, remember to update the data-target=”#contactMe” inside the trigger button, to match theid=”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:

image12

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>

     </li> </ul>

    image13

    (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">

    image14

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

    image15

    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">

    image16

    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 it’s 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 <b><body></b> element:
    <body data-spy="scroll">
    • Inside the body, add data-target:
    <body data-spy="scroll" data-target="#menu">

    image17

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

How to redirect domain to www url with nginx

Snippet from nginx config file that redirects all requests (http and https) to the www URL Continue reading