CSS: Layout with Bootstrap
By the end of this, developers should be able to:
- Create mobile-first, responsive site layouts using bootstrap.
- Reference bootstrap documentation.
- Add a modal to a front end project.
- Fork and clone this repository.
- Install dependencies with
grunt serveto start the application.
Bootstrap is the "world’s most popular front-end component library" for developing responsive, mobile first projects on the web. It's the second most-starred project on GitHub according to the Bootstrap wiki.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. It allows you to quickly prototype your ideas or build an entire app using Sass variables and mixins; a responsive grid system; and, an extensive collection of prebuilt components and powerful plugins built on jQuery.
Checkout some of the award-winning sites built on Bootstrap.
Boostrap's Grid System
Bootstrap is built on a grid that consists of rows and columns, much like a table. Bootstrap utilizes a 12-column grid system that allows us to combine different size columns to make custom responsive layouts.
Lab: Review Example Pages Made With Bootstrap
In teams, closely inspect each of the following pages. Keeping these questions in mind, write down your thoughts and we will discuss them together.
How is the HTML similar among the pages?
As you interact with the site how does the DOM change (if at all)?
How are elements on the pages horizontally arranged?
Notice any similarities among bootstrap pages in general?
Choose one site and draw three wireframes showing the transition of the page from mobile to tablet to desktop size.
For components and jQuery plugins always reference the Bootstrap documentation. Let's take a look at some of the areas within the documentation that will be helpful for us:
- Describes how to use the Bootstrap grid.
- Provides an overview of typography, images and tables.
- Explains how to use each of the Bootstrap components, such as buttons, forms, modals, navbars, alerts and much more.
- Demonstrates how to use Bootstrap's many utility classes.
Working with the Boostrap Grid
Containers are the foundational layout element in Bootstrap and are required when using the default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
While containers can be nested, most layouts do not require a nested container.
.container for a responsive fixed width container.
<div class="container"> ... </div>
.container-fluid for a full width container, spanning the entire width of
<div class="container-fluid"> ... </div>
Rows are wrappers for Bootstrap columns. Each container should have
at least one child element with the
row class, and all columns should
be child elements of a row.
Rows counteract the horizontal padding added to columns with negative margins. This way, all the content in your columns is visually aligned.
Bootstrap's 12-column grid system is based on elements with different
classes. These classes specify the width of the column (
a specific breakpoint (blank,
Breakpoints are set pixel boundaries within the media queries for our page or
site. Bootstrap has 5 built-in breakpoints.
Here is a breakdown of the available classes and when we should use them:
Demo: Mobile-first Layout
Let's get some firsthand experience with Bootstrap. In the
located in this repo, there is a simple grid that's been created with the
col-#, col-sm-#, col-md-#, and col-lg-# classes. Before we look at the
demo in the browser, let's open up the file in Atom and examine the HTML
and CSS classes that have been added to it.
Lab: Mobile-first Layout
Now try it on your own, keeping in mind mobile-first practices.
- Make an evenly spaced 3x3 grid on mobile (small) screens or smaller
- Once this works, have your grid stay 3x3 on medium screens
- Finally, have your columns be 4x1, followed by 2x2, followed by one full-width column on large sized screens or larger
Don't forget to:
- Place your columns within a row.
- Place your row within a container.
Code-along: Modals and More
described in the documentation. For example, using jQuery's
will not work the way you expect it to with a modal. Instead, use the
.modal('hide'). Check out
the Bootstrap docs
for further explanation.
Follow along as I add a bootstrap modal to our current sandbox page.
Lab: Modals and More
On your own:
- Referencing the Bootstrap documentation add a form to your modal.
- Using your knowledge of get-form-fields write a function so that when "save changes" is clicked the input in the input field is logged to the browser's console.
- Referencing the Bootstrap documentation add a navbar to your page which
bg-primarycolor scheme classes and fix it to the top of the screen with the
- Move the button that opens up the modal to the navbar and change the
button color by swapping the
Bootstrap's Color System
Bootstrap uses a color system that is used consisently throughout all of the components and utilities. This makes it easy for us to theme our sites and applications using these built in classes and the underlying Sass variables.
For example, to update all of the components which have Bootstrap's primary color applied, we can simply change one variable:
/* Add BEFORE Bootstrap is imported */ $primary: #ff1493;
- Sitepoint Sass Mixins
- Bootstrap Grid Tricks
- Hongkait Grid Tricks
- Bootstrap Documentation
- Semantic HTML
- Improve Your Markup by Extending Classes
- Bootstrap Overview Container
- All content is licensed under a CCBYNCSA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact firstname.lastname@example.org.