Bootstrap
Bootstrap
Learning Objectives
This lesson provides an overview of Bootstrap and the Bootstrap syntax. By the end of this lesson, learners will be able to:
Describe the pros and cons of using Bootstrap.
Use Bootstrap via local installation or content-delivery network.
Apply the following Bootstrap components and styling options to HTML pages:
Grid Layout
Tables
Page Header
Carousels
Cards
Dropdown Menus
Input Groups
Navigation Bars
Pagination
Progress Bars
Table of Contents
Bootstrap Overview.
Core Features of Bootstrap.
Pros and Cons of Bootstrap.
How to Use Bootstrap.
Local Installation of Bootstrap.
CDN-Based Installation of Bootstrap.
Bootstrap Syntax.
Bootstrap Layout: Grid.
Bootstrap Content: Tables and Table Styling.
Bootstrap Components:
Page Header.
Carousels.
Cards.
Dropdown Menus.
Navigation Bar.
Pagination.
Progress Bars.
Bootstrap Forms: Input Group.
Bootstrap Overview
Bootstrap is a popular and powerful front-end framework for building responsive websites. It uses HTML, CSS, and JavaScript; therefore, it is important to have a strong understanding of HTML/CSS before learning Bootstrap.
Bootstrap contains many useful, built-in features and components to create websites, such as responsive forms, tables, and carousels. It is very easy to customize, and proper use of the framework can help you create a website quickly.
The Bootstrap official site is an open-source website that includes documentation needed to learn more about Bootstrap, and provides web-based customization information.
Core Features of Bootstrap
Customization - Bootstrap allows you the freedom of making websites look very different in a way that other options, such as WordPress, cannot.
Responsiveness - Bootstrap has a 12-layer grid system and syntax, which allows you to create websites that look pleasant on both browsers and mobile devices.
Consistency - With Bootstrap, it is easy to pick up from where someone else left off, using unified object syntax and patterns, which remove the need for a deep understanding of someone else's code.
Support - Bootstrap, as a popular framework, has a large community of people who can assist in the creation and maintenance of Bootstrap websites.
Development Speed - It is easy to develop websites quickly using the Bootstrap framework.
Cross Browser Support - Bootstrap has cross-browser support, and works well in IE 9.0+, iOS $7.0+$ and all of the latest browsers.
Pros and Cons of Bootstrap
Pros:
Well adopted by all browsers.
Vast community to help you.
Various online templates.
Works well with JavaScript frameworks.
Compatible with all modern browsers.
Cons:
Very "clumpy" and glued-together code.
Hurts performance.
Difficult to manipulate.
Responsive design requires knowledge of JavaScript.
How to Use Bootstrap
There are two ways to use Bootstrap:
Local Installation - You can download the Bootstrap library to your local machine and include it in your HTML code for the website as either a source file or a compressed file.
CDN-Based Version - You can include the Bootstrap library into your HTML code directly from a Content Delivery Network (CDN).
Local Installation of Bootstrap
Go to http://getbootstrap.com/ to download Bootstrap.
Download $\rightarrow$ Compiled CSS and JS. Extract to computer.
Make an index.html file, and include the following code in the element.
Adjust the file paths to match your local installation.
CDN-Based Installation of Bootstrap
You can include the Bootstrap library into your HTML code directly from the Content Delivery Network (CDN), found on http://getbootstrap.com. Scroll down to the following section, and copy the provided and elements into your HTML.
Bootstrap Syntax
Bootstrap consists of many useful components and other objects. To use Bootstrap to create components or apply style, we create an element and assign it a Bootstrap class, such as:
The following slides will cover the details of:
Bootstrap components.
Syntax to create the components.
How the components look in action.
It is recommended to put the syntax for each Bootstrap component into your IDE so that you can interact with it and get a feel for the framework. The Bootstrap website also has good resources for each component.
Bootstrap Layout: Grid
In Bootstrap, you can create grid layouts.
In a Bootstrap grid, there are twelve columns to align content with (adding a 13th puts it below the 1st). Content can take up as many or as few columns as needed.
The Grid System is responsive, which means it rearranges based on screen size.
As an example, the following is the syntax to create three columns, each taking up four of the available twelve grid units:
Bootstrap Layout: Grid (continued)
Here is a handy reference chart for examples of a grid layout from getbootstrap.com.
EXAMPLE
Bootstrap Content: Tables
The Bootstrap table styling is used to display information in a convenient format and can be created with the following syntax:
| Firstname | Lastname |
|---|---|
Mary | Moe |
John | Doe |
Bootstrap Content: Table Styling
There are several ways to style a table with Bootstrap. For example, instead of <table class="table"», you could use the following options:
〈table class="table table-striped"〉
| Firstname | Lastname |
|---|---|
Mary | Moe |
John | Doe |
〈table class="table table-bordered"〉
| Firstname | Lastname | |
|---|---|---|
Mary | Moe | |
John | Doe |
Bootstrap Content: Table Styling (continued)
Other options for table styling include:
〈table class="table table-hover"〉
| Firstname | Lastname |
|---|---|
Mary | Moe |
John | Doe |
〈table class="table table-condensed"〉
| Firstname | Lastname |
|---|---|
Mary | Moe |
John | Doe |
Click here to download the complete code for these examples.
Bootstrap Components: Page Header
The Bootstrap page header component is self-explanatory and similar to a jumbotron. It can be created with the following syntax:
Here is how it looks in action:
Example Page Header
Bootstrap Components: Carousels
The Bootstrap carousel component is used to flip between different content, left-to-right. The following slide will go over the carousel in more detail, with an interactive example.
Here is an example of how it looks in action:
Bootstrap Components: Carousels (continued)
Carousel Example:
In this example, you have to use three different images. You can use any three images you like.
Save your images as:
Put the code to the right into the 〈body> element of your HTML page, and view the page.
Click here to download a completed example.
Bootstrap Components: Cards
The Bootstrap card component is a container used to display text, buttons, and other elements. A card can be created with the following syntax:
Click here to download the source code for this example.
Bootstrap Components: Dropdown Menus
The Bootstrap dropdown menu component is used to display several options to choose from. A dropdown menu can be created with the following syntax:
Click here to download the source code for this example.
Dropdown Example $~$
Vanilla
Chocolate
Butter Pecan
Bootstrap Components: Navigation Bar
A Bootstrap navbar is used to let users traverse a website more easily. A navigation bar is a navigation header that is placed at the top of the page. With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created in Bootstrap with
.
Bootstrap Components: Pagination
The Bootstrap pagination component is used to create elements that enable the user to traverse from page to page.
A pagination component can be created with the following syntax:
Click here to download the source code for this example.
Bootstrap Components: Progress Bars
The Bootstrap progress component is used to show the user how far along they are in a process. A progress component can be created with the following syntax:
Bootstrap Forms: Input Group
The Bootstrap . input-group class creates a container to enhance an HTML form by adding an icon, text, or a button on either side of the input field as a "help text."
Use .input-group-prepend to add the help text in front of the input, and .input-group-append to add it behind the input.
Add the .input-group-text class to style the specified help text.
Click here to download the source code for this example.
Practice Assignment: Create your Website Using Bootstrap
Please follow the link below to the practice assignments for creating a website wireframe and creating a website using Bootstrap.
PA 307.6.1 - Creating a Wireframe for Admin and User pages
PA 307.6.2 - Create your Website using Bootstrap
If you have technical questions while performing the activity, ask your instructors for assistance.
Knowledge Check
What are some of the pros of using Bootstrap?
What are some of the cons of using Bootstrap?
What are the two installation methods for including Bootstrap in your website?
What is the Bootstrap grid layout?
How do you style a striped table in Bootstrap?
What is a Bootstrap Carousel, and how is it implemented?
What is one class needed to create a Bootstrap card component?
What are two classes are needed to create a Bootstrap drop-down menu?
What are the benefits of using a Bootstrap navbar?
Summary
In this lesson, we explored Bootstrap and the Bootstrap syntax. Bootstrap is a powerful front-end framework for building responsive websites using HTML, CSS, and JavaScript. Bootstrap also has many useful built-in features and building blocks for creating a wide variety of content.
Proper use of the framework can allow you to create and scale websites quickly. and the Bootstrap grid layout provides an easy way to format responsive content using a twelve-unit system that can adapt to different screen sizes.
Bootstrap components such as carousels, cards, dropdown menus, and navigation bars can be used to organize content efficiently, and the Bootstrap official documentation provides a useful, up-to-date resource on all things Bootstrap.
Questions?
Last updated
