Build a sign-up page with Bootstrap 3

With the recent release of Bootstrap version 3.0, big changes have been made. Most notably, the responsive frontend framework has been rebuilt from the ground up to be mobile-first. This means whenever you start using this framework, your website will be responsive and mobile-friendly from the get-go.

The overall aesthetic has also changed. Most of the original Bootstrap styles have been removed, and in their place is a modern, flat approach. Even the icon library has transformed from being image-based to using glyph icons, making it much easier to add icons into your project and improving overall performance.

The codebase has been rewritten, except for the class names in the base CSS – even the variable names are all different. Bootstrap previously used CamelCasing but this has been updated to use hyphens instead.

There are now four grid systems, separated by the screen width you wish to work with. These are broken down to extra-small devices (phone), small devices (tablets), medium devices (desktops) and finally large devices (large desktop screens).

Other particularly noteworthy additions to version 3 include improvements to the navbar, modals, a better customiser, list groups and panels.

In this tutorial I will take a closer look at these changes and improvements, and demonstrate how the new Bootstrap can be used to build a custom sign-up landing page.

Download Bootstrap

First off, you need to head over to Bootstrap's website and download the latest version. At the time of writing, the newest release is version 3.2.0. A luxury for those who are familiar with CSS preprocessors such as Sass or Less is that you can write your CSS with either of these preprocessors. To allow beginners to follow with along this tutorial, we'll be using traditional CSS.

This responsive framework has been rebuilt from the ground up to be mobile-first

Once you've extracted this zip file, you will discover that it only contains the CSS, Fonts and JavaScript we require to adopt this framework.

If you open up the index.html in the project files, you will see the has all the basic CSS framework and external links which we need to get started with this project. You will also notice that just above the closing tag is the minified latest version of jQuery plugin.

Navigation

Bootstrap's navbar component is responsive, and has been designed to be mobile-first. This navigation will be automatically collapsed and is toggleable on mobile devices.

Simply set up a div with the appropriate default navbar classes to ensure our navigation stays static at the top of our page. You have the options to stick the navigation to the top or even bottom.

<div class="navbar navbar-default navbar-static-top" role="navigation">
</div>

Within this we'll need a div class name of container . The container div is used to set a fixed width and the correct padding for our navigation. Inside our container we can add in our navigational structure.

<div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
    <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right" role="tablist">
            <li class="active"><a href="#">Home</a></li>
          </ul>
        </div>

The button and icon-bar are used as the burger menu on a mobile device, which won't be seen on the desktop. The class navbar-brand is used to identify our website logo. Following this is a <ul> which will contain our actual website navigation links.

Carousel and Grid system

Bootstrap comes with a fluid grid system, which scales up to 12 columns as the device or viewport size increases. To incorporate the grid system into our layout, add a parent div called container (this sets a fixed width) followed by a div called row.

For medium-sized devices and desktops of up to 992px, we can use the class prefix col-md-8 which will span eight columns, within which our carousel will sit.

We'll start off by creating a containing div with a unique ID for our rotating carousel plus the carousel and slide classes which generate the rotating effect. The data-ride attribute is especially important as it's used to mark an animation starting point on page load.

<div id="carousel-slider" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-slider" data-slide-to="1"></li>
      <li data-target="#carousel-slider" data-slide-to="2"></li>
    </ol>

The <ol> we just declared are the indicators or small circles placed at the bottom of the slider to show the current active slide and number of remaining slides. Directly beneath this is the slider content. This space is defined using the class carousel-inner.

Within this we can have unlimited ‘item' divs to house each element of our slider content. The first ‘item' div must have a class of active defined.

<div class="carousel-inner">
      <div class="item active">
        <img src="img/banner-1.jpg" alt="City">
        <div class="carousel-caption">
          <h3>…</h3>
          <p>…</p>
        </div>
      </div>
     </div>

A carousel slider would not be complete without specific controls with a left and right arrow to manually change the slider. Each arrow is set up as an anchor tag, with a span class of glyphicon glyphicon-chevron-left and respectively -right. Since Bootstrap uses fonts instead of images to show icons, we use glyphicon classes to present icons.

<a class="left carousel-control" href="#carousel-slider" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-slider" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

This wraps up the carousel, and without a single line of JavaScript. It all feels like magic.

Next page: more on how to build a sign-up page with Bootstrap 3