Steven Wu shows you how to use the latest, mobile-friendly version of this framework to build a custom sign-up page.
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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
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.
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.
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.
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.
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.
