82,79 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Unearth the potential of Bootstrap with step-by-step guidance.
About This Book
- An applied guide exploring web application development with Bootstrap 4
- Learn responsive web design and discover how to build mobile-ready websites with ease
- Become an expert in Bootstrap framework, and speed up frontend development and prototyping through real-life examples
Who This Book Is For
If you're a web developer with little or no knowledge of Bootstrap, then this course is for you. The course offers support for version 4 of Bootstrap; however, it will offer support for version 3 as well. So, you will be ready for whatever comes your way. Prior knowledge of HTML, CSS, and JavaScript is expected.
What You Will Learn
- Discover how to use Bootstrap's components and elements, and customize them for your own projects
- Understand the framework's usage in the best way with the recommended development patterns
- Use Sass to customize your existing themes
- Apply the Bootstrap mobile-first grid system and add responsiveness and aesthetic touches to image elements
- Customize the behavior and features of Bootstrap's jQuery Plugins extensively
- Style various types of content and learn how to build a page's layout from scratch by applying the power of Bootstrap 4
- Work with content, such as tables and figures
In Detail
Bootstrap framework's ease-of-use (along with its cross-browser compatibility, support for mobile user interfaces, and responsive web design capabilities) makes it an essential building block for any modern web application.
With the first module, plunge into the Bootstrap frontend framework with the help of examples that will illustrate the use of each element and component in a proper way. You will get a better understanding of what is happening and where you want to reach. Also, you will gain confidence with the framework and develop some very common examples using Bootstrap. All these examples are explained step by step and in depth.
The second module is a comprehensive tutorial; we'll teach you everything that you need to know to start building websites with Bootstrap 4 in a practical way. You'll learn about build tools such as Node, Grunt, and many others. You'll also discover the principles of mobile-first design in order to ensure that your pages can fit any screen size and meet responsive requirements. Learn Bootstrap's grid system and base CSS to ensure that your designs are robust and that your development process is speedy and efficient.
Right from the first chapter of the third module, you'll delve into building a customized Bootstrap website from scratch. Get to grips with Bootstrap's key features and quickly discover the various ways in which Bootstrap can help you develop web interfaces. Once you reach the final pages of this book, you should have mastered the framework's ins and outs, and should be building highly customizable and optimized web interfaces.
The course will enable you to rapidly build elegant, powerful, and responsive interfaces for professional-level web pages using Bootstrap 4.
This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:
- Bootstrap by Example – by Silvio Moreto
- Learning Bootstrap 4, Second Edition – by Matt Lambert
- Mastering Bootstrap 4 – by Benjamin Jakobus and Jason Marah
Style and approach
This course will help you unearth the potential of Bootstrap and will provide a step-by-step guide on how to create beautiful websites and model web applications.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 842
Veröffentlichungsjahr: 2017
Ähnliche
Table of Contents
Bootstrap 4 – Responsive Web Design
Bootstrap 4 – Responsive Web Design
Copyright © 2016 Packt Publishing
All rights reserved. No part of this course may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this course to ensure the accuracy of the information presented. However, the information contained in this course is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this course.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this course by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Published on: September 2016
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78839-731-5
www.packtpub.com
Credits
Authors
Silvio Moreto
Matt Lambert
Benjamin Jakobus
Jason Marah
Reviewers
Paula Barcante
Sherwin Robles
Marija Zaric
Content Development Editor
Roshan Kumar
Graphics
Jason Monterio
Production Coordinator
Melwyn D'sa
Preface
Bootstrap has become a very popular tool in front-end projects over the years. The framework's ease-of-use along with its cross-browser compatibility, support for mobile user interfaces, and responsive web design capabilities, make it an essential building block for any modern web application. The course will enable you to rapidly build elegant, powerful, and responsive interfaces for professional-level web pages using Bootstrap 4.
At the beginning of the course, take a deep dive into the Bootstrap frontend framework with the help of examples that will illustrate the usage of each element and component in a proper way. By seeing examples, you will get a better understanding of what is happening and where you want to reach. With this guide, along the examples, you will get confident with the framework and develop some very common examples using Bootstrap. These are a landing page, a web application, and a dashboard, which is desired by 10 out 10 web developers.
Second module is comprehensive tutorial, which will teach you everything that you need to know to start building websites with Bootstrap 4 in a practical way. You'll learn about build tools such as Node, Grunt, and many others. You'll also discover the principles of mobile-first design in order to ensure your pages can fit any screen size and meet the responsive requirements. This guide will make sure you're geared up and ready to build amazingly beautiful and responsive websites in a jiffy.
By third module, get to the grips with Bootstrap's key features and quickly discover the various ways in which Bootstrap can help you develop web-interfaces You will know how to both extend the framework, integrate it with third-party components and frameworks, as well as optimize and automate your Bootstrapped builds.
What this learning path covers
Module 1, Bootstrap 4 By Example, This module will take a deep dive into the Bootstrap frontend framework with the help of examples that will illustrate the usage of each element and component in a proper way. By seeing examples, you will get a better understanding of what is happening and where you want to reach. Along the examples, you will be able to nail the framework and develop some very common examples using Bootstrap. These are a landing page, a web application, and a dashboard, which is desired by 10 out 10 web developers. You will face these kind of page countless number of times during your life as a developer, and you will do that using Bootstrap at its finest, including component customizations, animations, event handling, and external library integration.
Module 2,Learning Bootstrap 4, This module will help you to design elegant, powerful, and responsive interfaces for professional-level web pages. This module will introduce a wide range of new features that make frontend web design even more simple and exciting. You'll get a feel of build tools such as Node, Grunt, and more to start building your project. You'll discover the principles of mobile-first design to ensure your pages can adapt to fit any screen size and meet the responsive requirements of the modern age. You'll get to play with Bootstrap's grid system and base CSS to ensure your designs are robust and beautiful, and that your development process is speedy and efficient. Then, you'll find out how you can extend your current build with some cool JavaScript plugins, and throw in some Sass to spice things up and customize your themes. If you've tinkered with Bootstrap before and are planning on migrating to the latest version, we'll give you just the right tricks to get you there. This module will make sure you're geared up and ready to build amazingly beautiful and responsive websites in a jiffy.
Module 3, Mastering Bootstrap 4, The motivation behind this module is to provide a comprehensive, step-by-step guide for developers that wish to build a complete, production-ready, website using Bootstrap 4. Once you turn the final pages of this module, you should be mastering the framework's ins and outs, and building highly customizable and optimized web interfaces. You will know how to both extend the framework, integrate it with third-party components and frameworks, as well as optimize and automate your Bootstrapped builds.
What you need for this learning path
Module 1:
To follow this module's developments, you will need a web browser on your computer, preferably Google Chrome, because it will be used in some examples. But other browsers can work as well. Also, you will need some basic knowledge in HTML, CSS, and JavaScript beforehand. Despite the fact that we will initially talk in a slow pace about those technologies, it will be good for you to know some basic concepts about them. Another plus is knowledge of the jQuery library, which is a dependency of Bootstrap. We will actually use jQuery in Chapter 7 of this module, Of Course, You Can Build a Web App!, and they will be very simple examples. So just keep in mind to train some jQuery skills.
Module 2:
To get started using Bootstrap 4 there are a few tools we would recommend installing on your computer. First of all you'll need a text editor like Sublime Text or Notepad. Secondly you'll need a command line tool. If you're on a MAC you can use Terminal which is included with OSX. If you're on Windows we would recommend downloading Cygwin. That's all you need to get started with the module. In Chapter 2, we will cover the installation of a few other tools that we'll be using in our project like: Node.js, NPM, Grunt.js, Jekyll, Harp.js and Sass by using Bootstrap Build Tools. If you already have those tools installed great! If not, don't worry we'll go through it step by step later in the module.
Module 3:
This module targets intermediate-level frontend web developers. The module is not intended to be an introduction to web development. As such, we assume that readers have a firm grasp of the basic concepts behind web development, essential HTML, JavaScript, and CSS skills, as well as practical experience of applying this knowledge. Furthermore, the reader should have an understanding of jQuery. Elementary knowledge about AngularJS, build tools, and React are desirable for the module's final two chapters. However, unfamiliarity with the two frameworks will not stop readers from completing and understanding the examples
Who this learning path is for
If you're a web developer with little or no knowledge of Bootstrap, then this course is for you. The course offers support for the version 4 of Bootstrap, however, it will offer support for version 3 as well. So, you will be ready for whatever comes your way. Prior knowledge of HTML, CSS, and JavaScript is expected.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this course—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the course's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a course, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt course, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this course from your account at http://www.packtpub.com. If you purchased this course elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
You can also download the code files by clicking on the Code Files button on the course's webpage at the Packt Publishing website. This page can be accessed by entering the course's name in the Search box. Please note that you need to be logged in to your Packt account.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
The code bundle for the course is also hosted on GitHub at https://github.com/PacktPublishing/Bootstrap-4-Responsive-Web-Design. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our courses—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this course. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your course, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the course in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this course, you can contact us at <[email protected]>, and we will do our best to address the problem.
Part 1. Module 1
Bootstrap 4 By Example
Learn responsive web development with Bootstrap 4's front end framework
Chapter 1. Getting Started
With the advent and increase in popularity of the mobile web, developers have had to adapt themselves to handling new challenges, such as different layouts in different resolutions, the new user experience paradigm, and optimization for low-bandwidth connections. While facing this, there were also a lot of old problems related to browser compatibility and lack of patterns in the community.
This was the outline scenario when the Bootstrap framework arrived. Developed by Twitter, the main goal of Bootstrap is to provide a web frontend framework for responsive developing with cross-browser compatibility. It is awesome! Developers fell in love with it and started to adopt it right away.
Therefore, to cover this book's objective of presenting the Bootstrap framework to build responsive, mobile-first websites faster than ever before, we must get started by setting up our work environment in the best recommended way. Thus, the topics that we will cover in this chapter are:
Getting Bootstrap
There are several versions of the framework, but in this book, we will provide support for the latest Bootstrap 3 version (which is v3.3.5), along with the newest version 4 (which is 4.0.0-alpha). When a feature or component is differently supported by one of these versions, we will point it out properly.
First of all, access the official website at http://getbootstrap.com/ and click on the Download Bootstrap button, as shown in the following screenshot:
Tip
Downloading the example code
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
Then you will be redirected to another page that contains these buttons:
Click on the Download Bootstrap button to get the framework, since we will cover the full framework using, not Sass, but just HTML, CSS, and JavaScript. After the download, extract the files and you will see that the framework is organized in folders.
Tip
Other versions and releases
Check out the official repository at https://github.com/twbs/bootstrap/ to pick up other versions and see the new releases under development. You will also be able to see other features and community activity.
If you want to go hands-on straightforward with version 4, go to http://v4-alpha.getbootstrap.com/ and download it, or enter the GitHub repository and select the corresponding branch of version 4.
After you've extracted the files, you will see some folders. The first one, in alphabetical order, is css. Here, you will find the main CSS file (named bootstrap.css), other files related to the minified version, and a bootstrap-theme.css file, which is a simple theme of using the Bootstrap components.
There is also a fonts folder; it contains the files used for the icon components that we will see in future chapters. Finally, there is a folder named js, where we can find the bootstrap.js file, the minified version, and the specification for npm.
Tip
What is the npm file?
The npm is the most famous package manager for JavaScript. It is set as the default package manager in the Node.js environment.
Setting up the framework
Now that we have downloaded the framework and covered its basic file architecture, we will advance to setting up Bootstrap on a web page.
Folder structure
First, let's explicit the folder structure that we will be using in this book. In a folder that we will call main_folder, we extract the Bootstrap contents and create a file called hello_world.html at the same level. Inside the Bootstrap contents will be some folders for fonts, CSS, and JavaScript. The final layout should be like this:
Warming up the sample example
Now, we will add the recommended setup of the Bootstrap framework to the hello_world.html file. Open it in your preferred code editor and add the outline HTML code, like this:
Next, add the code for loading css inside the head tag:
And at the end of the body tag, load the JavaScript file:
Open the hello_world.html file in a browser (we will use Google Chrome in this book) and open the JavaScript console. In Chrome, it can be found at Options button (the hamburger button on right upper corner. Go to More Tools | Developer Tools, just as shown in the following screenshot, and click on Console in the opened window. You will see a message saying Bootstrap's JavaScript requires jQuery:
jQuery is a cross-platform JavaScript library, and it is the only third-party requirement for Bootstrap. To get it, we recommend the download from the official website and the latest version (https://jquery.com/download/). Bootstrap requires version 1.9 or higher.
Note
Just use versions above 2.x if you do not want to add support for Internet Explorer 6, 7, and 8. In this book, we will use version 1.11.3.
Copy the jQuery file inside the js folder, and load it in the HTML code at the end of the body tag but before the bootstrap.js loads, like this:
Bootstrap required tags
Bootstrap has three tags that must be at the beginning of the <head> tag. These tags are used for text encoding and improved visualization on mobile devices:
The viewport tag is related to the mobile-first philosophy. By adding it, you ensure proper rendering in mobile devices and touch zooming.
You can also disable the zoom functionality by appending user-scalable=no in the content key. With this option, users will only be able to scroll on the web page, resulting in a feel of using a native mobile application.
Note
If you are going to use this tag, you must be sure that users need not use the zoom feature and it will create a good user experience. Therefore, use it with caution.
Also, if you want to add support for older versions of the Internet Explorer (IE) browser (older than version 9), you must add some libraries to have fallback compatibility for the HTML5 and CSS3 elements. We will add them via CDN, which is the Bootstrap recommendation. So, add these lines at the end of the <head> tag:
Tip
Do you know what CDN is?
CDN, the abbreviation of Content Delivery Network, is a term used to describe a network of computers that are connected in order to deliver some content. A CDN should provide high availability and performance.
At this point, the file should be like this:
This is our base page example! Keep it for the purpose of coding every example of this book and for any other web page that you will develop.
We would like to point out that Bootstrap requires the doctype HTML5 style before the <html> tag:
Building our first Bootstrap example
Now we are all set for the framework. Replace the Hello World! line in the body tag with this:
Open the hello_world.html file in the browser, and it must appear like what is shown in the following screenshot:
Congratulations! You have created your first Bootstrap web page. It is simple but very important to understand the details of how to set the framework correctly to keep the recommendation pattern.
Furthermore, we added some components in this example that will be explained in future chapters, but you can start becoming familiar with the CSS classes used and the placement of the elements.
The container tag
You may notice that in our example, the page content is too close to the left-hand side and without a margin/padding. This is because Bootstrap has a required element called container that we have not added in the example.
The container tag must be placed to wrap the site content and nest the grid system (we will present the grid system, called scaffolding, in the next chapter). There are two options for using the container element.
The first one is for creating a web page responsive with a fixed-width container. This one will add responsive margins depending on the device viewport:
In case you want a full-width container, covering the entire width of the viewport, use container-fluid:
In our example, we will create a fixed-width responsive website. So, our code will be like this:
The next screenshot shows what our example looks like with the addition of the container class. I recommend for practicing and complete understanding, that you change the container class to .container-fluid and see what happens. Change your viewport by resizing your browser window and see how Bootstrap adapts your page visualization:
The preceding image shows the differences between using .container and .container-fluid. See the differences of the margins in the sides.
Soon during this book, you will be able to create more complex and beautiful websites, using more advanced Bootstrap components such as the show case shown in the following screenshot, which is an example of a landing page.
Do not worry. We will start at a slow pace to reveal the basics of Bootstrap and how to use it properly on our web page. The following example is our first goal when we develop a landing page example. Just keep in mind that we will always use the same basis presented in this chapter.
Optionally using the CDN setup
Bootstrap also offers a setup using CDN to load the framework. It's much easier to set up but comes with some regards. Instead of the <link> that we created to load the CSS, we must load it from CDN using this:
And to load the JavaScript file, replace the JavaScript <script> tag with the following line:
There is some discussion on whether or not to use CDN. We will not touch upon this point, but the main pro is having the content provided faster with high availability. The main con is that you cannot have direct control over what is in the content provided, having unreliable imported code.
The decision of whether or not to use CDN depends on the case. You should consider the different arguments and choose an option that best fits your web page. There is no right or wrong, just different points of view.
Community activity
The Bootstrap framework is discussed in several places across the Internet. It is important to have an engaged community that keeps evolving the framework and supporting it. You can have support and acquire more knowledge by going to some other resources, such as the following:
There are many other resources spread across the Internet. Use them all to your advantage, and appreciate the taste of developing in fast pace with the best frontend framework of our time.
Tools
Bootstrap has an official HTML lint called Bootlint (https://github.com/twbs/bootlint). It checks the DOM for mistakes in using Bootstrap elements and components. Add Bootlint to avoid mistakes that delay your development. Check out the repository for installation and usage instructions.
Bootstrap and web applications
Bootstrap is one of the best frameworks for building web apps. Since you may use the same layout pattern across the web app, with premade classes and themes provided by the framework, you can speed up your development while maintaining the coherence of the elements used.
After the framework's release, Twitter adopted it like many other web apps as well. The following screenshot shows a great example of a fluid web app that uses Bootstrap with a fluid container:
Browser compatibility
The Bootstrap framework supports the most recent versions of the most used browsers. However, depending on the browser, the elements' rendering might look a little different from others, such as in the Chrome and Firefox Linux versions.
Internet Explorer's (IE) old versions do not have some properties from CSS3 and HTML5 that are used in the framework, so be aware of this when supporting these browsers. The following table presents the official browser compatibility.
Also, with the new version 4 of the framework, some compatibilities have been dropped. They decided to drop the support that existed for IE8, since it was dragging down the addition of new features, and now Bootstrap is able to take advantage of the use of some new CSS features.
With regard to this, version 4 moved from pixels to rems and ems measures to make responsive and resizing easier, and with that, they dropped support for iOS 6 as well:
Chrome
Firefox
Internet Explorer
Opera
Safari
Android
Yes
Yes
N/A
No
N/A
iOS
Yes
N/A
N/A
No
Yes (iOS 7 + for v4)
OS X
Yes
Yes
N/A
Yes
Yes
Windows
Yes
Yes
Yes (IE9 + for v4)
Yes
No
Tip
The meaning of em and rem
The units em and rem have moved from trending to reality! They are enforced as present in our context and have now gained the support of Bootstrap. The main difference between em and rem is that they are relative unit metrics, while pixels are not. em is a unit relative to the parent font size and rem is a unit relative to the root element, perfectly fitting this responsivity development context.
Summary
In this chapter, you learned some basic concepts about using the Bootstrap framework. These are the key points for creating web sites with high quality. Knowing them in depth gives you a huge advantage and helps with the handling of future problems.
The chapter's goal was to show the recommended setup for the Bootstrap framework, presenting the placement of the tags, libraries import, and creating a very simple web page. Remember that consistency across the website is the main thing about Bootstrap, saving your precious time.
Also keep in mind that when starting a new web page, you have to guarantee a good placement of the main tags and components no matter how you created it (manually, boilerplate, or in other ways). Many problems stem from inadequate groundwork.
We also presented some resources from which you can acquire further knowledge or any kind of help. You now belong to a big "open arms" community that you can always count on.
Now that we have this background, let's attack some real-world problems! In the next chapter, we will start developing a very common real-life example, which is a landing page, while presenting some Bootstrap components, HTML elements, and grid systems.
Chapter 2. Creating a Solid Scaffolding
In this chapter, you will start learning some new Bootstrap elements and components. By doing this, you will first understand the concepts of the Bootstrap grid system and move on to some basic components. Now, we are going to start the development of a responsive sample landing page. First, we will use the base theme of the framework, and in future, we will apply our own style.
The main structure of this chapter is as follows:
Understanding the grid system
The basis of the Bootstrap framework relies in its grid system. Bootstrap offers components that allow us to structure a website in a responsive grid layout.
To exemplify this, imagine an electronic square sheet table that can be divided into many rows and columns, as shown in the following screenshot. In the table, you can create as many lines as you want while merging cells. But what would happen if you wanted to change the layout of a single row? That could be painful.
The Bootstrap grid system works in a different way. By letting you define a set of rows, each one having a set of independent columns, it allows you to build a solid grid system for your web page. Also, each column can have different sizes to perfectly fit your template.
This not being enough, the Bootstrap grid system adapts for every viewport and resolution, which we call responsiveness.
To start learning about the grid system, we will introduce it using the example of a landing page. As you will see, Bootstrap will allow us to create a complete scaffolding that will automatically adjust the content for any viewport.
Building our scaffolding
For our landing page, we will use the grid presented in the following image. As you can see, it is represented by seven rows, each containing a different number of columns. In this first example, we will use a nonmobile viewport, which we will discuss in the next chapter.
Setting things up
To start that, let's use our default layout presented in Chapter 1, Getting Started. Add inside the div.container tag another div with the .row class:
The hierarchy for the grid system always follows the sequence of a container that wraps rows and multiple columns. Keep in mind to always use this sequence to get a proper output.
Now that we have our .container with the first .row, let's create our first column. Every row is subdivided into 12 parts, so you can have up to 12 columns in a single row.
To identify a column, we must follow the template of .col-*-*. The first asterisk means the viewport for the column, and the other one means the size of the column. We will explain more about that, but to create our first column, we create a column identified by .col-md-12 inside our row:
In this column, the md in.col-md-12 means that for the viewport medium (which means the md identifier), the column must have a 12-column width. In other words, the column fills the entire width of this row. This column will fill the complete width because it is our header, and as we can see in the previous image, this row is composed of just a single row.
So, to create a column in the Bootstrap grid system, you must follow the recipe of .col-*-* for every column. While you can set an integer from 1 to 12 for the width, for the viewport, you must set the correct class prefix. In this table, you can see the breakdown of class prefix usage and on which resolution it can be used:
Extra small devices (phones < 544 px / 34 em)
Small devices (tablets ≥ 544 px / 34 em and < 768 px / 48 em)
Medium devices (desktops ≥ 768 px /48 em and < 900 px / 62 em)
Large devices (desktops ≥ 900 px / 62 em and < 1,200 px 75 em)
Extra large devices (desktops ≥ 1,200 px / 75 em)
Grid behavior
Horizontal lines at all times
Collapse at start and fit the column grid
Container's fixed width
Auto
544 px or 34 rem
750 px or 45 rem
970 px or 60 rem
1170 px or 72.25 rem
Class prefix
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
.col-xl-*
Number of columns
12
Column fixed width
Auto
~ 44 px or 2.75 rem
~ 62 px or 3.86 rem
~ 81 px or 5.06 rem
~ 97 px or 6.06 rem
Tip
What will happen if I create a row with more than 12 columns?
Try adding a number of columns with a number higher than 12, for instance, five columns with the .col-md-3 class. Knowing that every row is treated as a unit of 12 columns, the next ones will wrap in a new line.
Offset columns
Our second row is divided into three equal-sized columns, and the first one is an offset column, or in other words, an empty column that will be filled by a left margin. Therefore, the second row will be like this:
As you can see, by adding the .col-md-offset-4 class, we create a margin to the left four, sized in just this .row. By having each row independent of the others, we can properly customize the layout to appear just as it is supposed to be.
Tip
What happens if I add more than two offsets in a single column?
If you do that, you will find yourself in a funny situation. As a tip, only one offset is applied for an element, but which one? The answer is, the smallest offset!
Completing the grid rows
Now we will advance to the third row in our scaffolding. If you've got the spirit, you should have no problems with this row. For training, try doing it by yourself and check the solution in the book afterwards! I am sure you can handle it.
So, this row is composed of two columns. The first column must fill 4 out of the 12 parts of the row and the other column will fill the rest. The row in the HTML should look like this:
About the fourth row—it is composed of a quarter divisor, followed by a half divisor, followed by a last quarter divisor. Using this in base 12, we will have the following grid in the row:
Nesting rows
In the fifth and sixth rows, we will show how you can create a row using two options. In the fifth row, we will create just as we are doing in the other rows, while in the sixth row, we will use the concept of nesting rows.
So, in the fifth row, create it just as you were doing before; create a row with four equally sized rows, which means that each column will have the .col-md-3 class:
For the sixth row, we will use nesting rows. So, let's create the first .row, having three columns:
As you can see, the first and the last column use the same class of columns in row five—the .col-md-3 class—while the middle column is double the size, with the .col-md-6 class.
Let's nest another .row inside the middle column. When you create a new nested row, the columns inside of it are refreshed and you have another set of 12-sized columns to put inside it. So, inside this new row, create two columns with the .col-md-6 class to generate two columns representing a fourth of the row:
The concept of nesting rows is pretty complex, since you can infinitely subdivide a row, although it is great to create small grid components inside your page that can be used in other locations.
Finishing the grid
To create the last row, we need to create the .col-md-2 column, followed by .col-md-7 and .col-md-3. So, just create a row using the <footer> tag with those columns. The complete scaffolding will be this:
Fluid container
You can easily switch the actual example grid with a fluid full-width layout. To do so, replace the farthest .container with .container-fluid:
We need some style!
Now, we will start using some of the CSS provided for Bootstrap to make our components responsive and more elegant. Our main goal is to make our grid page like what is shown in this screenshot:
Let's break down each row and learn about typography and some other components. We will do this without using a single custom line of CSS!
Getting started with the first row, you may see that this row has a gray background, which is not present in the rest of the layout. To create this, we must make a change in our grid by creating a new .container for this row. So, create another .container and place it inside the first row:
Now, to make the gray area, we will use a class in Bootstrap called .jumbotron. The jumbotron is a flexible Bootstrap component that can extend to the entire viewport to showcase some content, in this case the header. So, wrap the container inside a div.jumbotron:
Inside the header, as we can see in the layout, we must create a title, a subtitle, and a button. For the title, let's use the <h1> and <h2> heading elements. For the button, let's create a link with the .btn, .btn-default, and .btn-lg classes. We will mention more about these components in the next subsections:
There are headings everywhere
Bootstrap provides styled headings from h1 to h6. You should always use them in order of importance, from <h1> to <h6> (the least important).
Tip
Do you know why headings are important?
Heading are very important for Search Engine Optimization (SEO). They suggest for search engines what is important in your page context. You must keep the hierarchy for page coherence, and do not skip any tag (that is, jump from heading 3 to heading 5). Otherwise, the structure will be broken and not relevant for SEO.
The heading has classes for identifying its style. So, if your most important phrase is not the biggest one at times, you can swap the sizes by adding heading classes, just as in the following example:
Playing with buttons
The other element of the first row is a button! We can apply button classes for hyperlinks, button elements, and inputs. To make one of these elements a button, just add the .btn class followed by the kind of button, in this case the kind .btn-default, which is a blue button. The next table shows every possibility of color classes for a button:
Button class
Output
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
We have also added the .btn-lg class in the first row button. This class will increase the size of the button. Bootstrap also provides some other button size classes, such as .btn-sm for small buttons and .btn-xs for even smaller ones.
You can also make a button span the full width of the parent element with the .btn-block class, changing the display of the button to block.
More typography and code tags
With regards to the second row, we have a row that contains a heading and complementary small text after that.
To add lighter and secondary text to the heading, we can add a <small> tag or any other tag with the .small class inside the heading. The HTML for the first column in the second row should be like the following:
Note that inside the small tag, we have added a <kbd> tag, which is an HTML element that creates a user-like input keyboard. Refresh the web browser and you will see this row as shown here:
For the third row, we have a code snippet and an image. To create a code snippet, use the <pre> tag for multiple lines of code. The <pre> tag is present in HTML for creating preformatted text, such as a code snippet. You have the option of adding the .pre-scrollable class, which will add a scrollbar if the code snippet reaches the maximum height of 350 px (or 21.8 em).
For this row, in the right column, we have an image. For that, just create an <img> tag and add the .img-responsive class, which will make the images automatically responsive-friendly to the viewport. The HTML for the third row is as follows:
Refresh your browser and you will see the result of this row as shown in the following screenshot:
In the fourth row, we have images in both the left and right columns and a testimonial in the middle. Bootstrap provides a typographic theme for doing block quotes, so just create a <blockquote> tag. Inside it, create a <footer> tag to identify the source, and wrap the name in a <cite> tag, like this:
Moving on, we must advance to the fifth row. This row is here just to show the different ways in which we can apply typography and coding elements tags using Bootstrap. Let's go through each one to describe its usage.
In the first column, we have a piece of inline code. To do that, wrap the snippet in a <code> tag. From the first to the fourth column of this row, we are presenting the alignment classes. Using these, you can easily realign text content in a paragraph tag. The code for the row is as follows:
Just use the right classes for a proper alignment. The result in the browser should look like this:
The sixth row is composed of four equally divided columns, but in this case, we are using the nesting rows option. On the first three columns, we added Bootstrap text transformation classes to make the text lowercase, uppercase, and capitalized, respectively. The code for this row should be like the following:
Pay attention to the last column, where we are using the <strong> tags to make the text bold and the
