Bootstrap 4 Quick Guide

User Manual:

Open the PDF directly: View PDF .
Page Count: 24

Download
Open PDF In Browser	View PDF



Bootstrap 4 - Quick Guide
Advertisements

 Previous Page

Next Page 

Bootstrap 4 - Overview
What is Bootstrap 4?
Bootstrap 4 is a powerful and popular mobile first front-end framework for building
responsive mobile first sites on the web. It is a latest version of Bootstrap

, which uses

HTML, CSS and JavaScript.

History
The last stable release of Bootstrap v3.3.7 was in July 2016 and in August 2017, Bootstrap
4.0.0 beta version released.

Why to use Bootstrap?
It contains mobile first styles throughout the entire library, instead of using them in
the separate files.
With just the knowledge of HTML and CSS anyone can get started with Bootstrap.
Also the Bootstrap official site has a good documentation.
It is supported by all popular browsers and its responsive CSS adjusts to Desktops,
Tablets and Mobiles.
Provides a clean and uniform solution for building an interface for developers.
It contains beautiful and functional built-in components which are easy to
customize.
It is an open source and provides web based customization.

Bootstrap 3 v/s Bootstrap 4
Bootstrap 4 is a latest version of Bootstrap 3, who's source CSS files are converted into
SCSS. It uses the flex modal for grid system and supports all the latest browsers.
However, it supports Internet Explorer 9+ and iOS 7+ and dropped support for IE 8 and
lesser versions, iOS 6 and lesser versions. For more information on difference between
Bootstrap 3 and Bootstrap 4, checkout this chapter

.

Bootstrap 4 - Environment Setup
You can start using Bootstrap 4 in your website by including it from CDN(Content Delivery
Network) or downloading from getbootstrap.com.

Using CDN
The Bootstrap 4 can be used in the website by including it from Content Delivery
Network

.

Use the below compiled Bootstrap's CDN of CSS and JS in your project.









Include the CDN versions of jQuery and Popper.js (Bootstrap 4 uses jQuery and Popper.js
to make use of JavaScript components such as modals, tooltips, popovers etc) before the
minified Bootstrap JavaScript, if you are using the compiled version of JavaScript.
Following are some components, which require jQuery −
Used for closable alerts

Toggle the states by using buttons and checkboxes/radio buttons and collapse for
toggling content
Carousel for slides, controls, and indicators
Dropdowns (uses the Popper.js for perfect positioning)
Open and close the Modals
For collapsing the Navbar
Tooltips and popovers (uses the Popper.js for perfect positioning)

Downloading Bootstrap 4
You can download the Bootstrap 4 from https://getbootstrap.com/docs/4.1/gettingstarted/download/

. When you click on this link, you will get to see a screen as shown

below −

Here you can see two buttons −
Download − Clicking this, you can download the precompiled and minified
versions of Bootstrap's CSS and JavaScript. No documentation or original source

code files are included.
Download Source − Clicking this, you can get the latest Bootstrap SCSS,
JavaScript source code and documentation files.
For better understanding and ease of use, we shall use precompiled version of Bootstrap
throughout the tutorial. As the files are complied and minified, you don't have to bother
every time including separate files for individual functionality.

File Structure
Precompiled Bootstrap 4
Once the compiled version Bootstrap 4 is downloaded, extract the ZIP file, and you will see
the following file/directory structure −

As you can see, there are compiled CSS and JS (bootstrap.*), as well as compiled and
minified CSS and JS (bootstrap.min.*).

Bootstrap 4 Source Code

If you have downloaded the Bootstrap 4 source code, then the file structure would be as
follows −

The files under js/ and scss/ are the source code for Bootstrap CSS and JavaScript.
The dist/ folder include everything listed in the precompiled download section
above.
The docs/examples/, includes source code for Bootstrap documentation and
examples of Bootstrap usage.

Creating First Web Page with Bootstrap 4
The below example specifies simple web page of Bootstrap 4 −

Example
 Live Demo








Hello, world!!! Welcome to Tutorialspoint...







It will produce the following result −

Output

Hello, world!!! Welcome to Tutorialspoint...
Bootstrap 4 - Layout
Bootstrap 4 uses container classes to wrap the page's contents. It contains two container
classes −
.container − It represents a fixed width container.
.container-fluid − It represents a full width container.

Container
The .container class is used to wrap the page content with fixed width and content can be
placed in the center easily by using the .container class as shown below.

...


Example
The below example specifies a simple web page with fixed width container −
 Live Demo










Fixed Width Container
This is a simple web page with fixed width container by using
.container class.








It will produce the following result −

Output

Fixed Width Container
This is a simple web page with fixed width container by using .conta

Fluid Container
You can create a full width container by using the .container-fluid class as shown below.

...


The below example specifies a simple web page with full width container −

Example
 Live Demo










Full Width Container
This is a simple web page with full width container by using

.container-fluid class.








It will produce the following result −

Output

Full Width Container
This is a simple web page with full width container by using .containe

Bootstrap 4 - Grid System
Description
Bootstrap 4 grid system built with flexbox

which is fully responsive and scales up to 12

columns (according to the size of device) by creating layout with rows and columns across
the page. It provides responsive, mobile first fluid grid system which scales the columns as
the device or viewport size increases.

Working of Grid System
Rows must be placed within a .container class for proper alignment and padding.
For responsive width use .container class and for fixed width across all viewport,
use the .container-fluid class.
Use rows to create horizontal groups of columns.
Content should be placed within the columns, and only columns may be the
immediate children of rows.
Columns contain padding for controlling the space between them.
If you place more than 12 columns in a row, then the columns will be placed in a
new line.
Columns create gaps between column content via padding. Therefore, you can
remove the margin from rows and padding from columns with .no-gutters class on
the row.
You can make grid system responsive by using five grid breakpoints such as extra
small, small, medium, large, and extra large.
Predefined grid classes like .col-4 are available for quickly making grid layouts.
LESS mixins can also be used for more semantic layouts.

Grid Options
The following table summarizes aspects of how Bootstrap 4 grid system works across
multiple devices −
Extra
small
devices
(<576px)

Small devices
(≥576px)

Medium
devices
(≥768px)

Large devices
(≥992px)

Extra Large
devices
(≥1200px)

Grid
behavior

Horizontal
at all times

Collapsed to
start,
horizontal
above
breakpoints

Collapsed to
start,
horizontal
above
breakpoints

Collapsed to
start,
horizontal
above
breakpoints

Collapsed to
start, horizontal
above
breakpoints

Max
container
width

None
(auto)

540px

720px

960px

1140px

Class
classes

.col-

.col-sm-

.col-md-

.col-lg-

.col-xl-

# of
columns

12

12

12

12

12

Gutter
width

30px

30px

30px

30px

30px

(15px on

(15px

each side

each side of a

each side of a

each side of a

each side of a

of

column)

column)

column)

column)

a

on

(15px

on

(15px

on

(15px

on

column)
Nestable

Yes

Yes

Yes

Yes

Yes

Column
ordering

Yes

Yes

Yes

Yes

Yes

Basic Grid Structure
Following is basic structure of Bootstrap 4 grid −










...


Example of Grid System
Following is an example of Bootstrap 4 grid system −

Example
 Live Demo








.grid_system div[class^="col"] {
border: 1px solid white;
background: #e4dcdc;
text-align: center;
padding-top: 5px;
padding-bottom: 5px
}





.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1


.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3


.col-sm-4
.col-sm-4
.col-sm-4


.col-sm-3
.col-sm-3
.col-sm-6


.col-sm-5
.col-sm-7


.col-sm-6
.col-sm-6


.col-sm-12










It will produce the following result −

Output
.colsm-1

.colsm-1

.colsm-1

.colsm-1

.col-sm-3

.colsm-1

.colsm-1

.colsm-1

.col-sm-3

.col-sm-4

.colsm-1

.
s

.col-sm-3
.col-sm-4

.col-sm-3

.col-sm-3
.col-sm-5

.co

.col-sm-6
.col-sm-12

Creating Two Column Layouts
The following example describes creating two column layouts for small, medium and large
devices. On small devices such as mobile phones, columns will automatically become
horizontal as default.

Example
 Live Demo










.col-sm-6
.col-sm-6


.col-sm-7
.col-sm-5




.col-sm-4
.col-sm-8


.col-sm-9
.col-sm-3









It will produce the following result −

Output
.col-sm-6
.col-sm-7
.col-sm-4

.col-sm-8
.col-sm-9

Creating Three Column Layouts

The following example describes creating three column layouts for medium and large
devices. If the screen resolution is more than or equal to 992 pixels, then it will display in
landscape mode in tablets and as usual, it will display in portrait mode.

Example
 Live Demo










.col-sm-4
.col-sm-4
.col-sm-4


.col-sm-3
.col-sm-4
.col-sm-5


.col-sm-2
.col-sm-8
.col-sm-2


.col-sm-2
.col-sm-3
.col-sm-7









It will produce the following result −

Output
.col-sm-4

.col-sm-4

.col-sm-3

.col-sm-4

.col-sm-2
.col-sm-2

.col-sm-8
.col-sm-3

.co

Bootstrap 4 - Content
Description
Bootstrap 4 uses collection of content methods for displaying the text, blocks of code,
responsive images, data in a tabular format etc on the web page.
The following table lists down the content methods which you can use to manipulate the
Bootstrap 4 −
S.No.
1

Methods & Description

Typography
The typography feature creates headings, paragraphs, lists and other inline
elements.

Code
2

It is used to display inline and multiline blocks of code in the document.
Images

3

Bootstrap 4 provides support for images by using  tag.
Tables

4

Tables are used for displaying the data in a tabular format.
Figures

5

The figure element specifies the content along with related images with an
optional caption.

Bootstrap 4 - Components
Description
Bootstrap 4 uses collection of content methods for displaying the text, blocks of code,
responsive images, data in a tabular format etc on the web page.
The following table lists down the content methods which you can use to manipulate the
Bootstrap 4 −
S.No.

Methods & Description

Alerts
1

The alert component specifies the predefined message for user actions.
Badges

2

Badges are used to highlight the additional information to the content.
Breadcrumb

3

It is used to show hierarchy-based information for a site.
Buttons

4

Bootstrap provides clickable button to put content such as text and images.

5

Button group
Button groups allow multiple buttons to be stacked together on a single line.
Cards

6

Card is a content container which displays a bordered box with some padding
around it.
Carousel

7

Carousel is a flexible, responsive way to add a slider to your site.
Collapse

8

It is used to show or hide the content.
Dropdowns

9

Dropdown menus can be used for displaying links in a list format.
Forms

10

The form element is used to collect input from user.
Input group

11

Using input groups you can easily prepend and append text or buttons to the
text-based inputs.
Jumbotron

12

It increases the size of headings and adds a lot of margin for landing page
content.
Modal

13

Modal is a child window that is layered over its parent window.
Navs

14

Bootstrap provides navigation items for your site in a horizontal menu.
Navbar

15

Navbar provides navigation headers for your application or site.

16

Pagination
Pagination is used to divide the related content across multiple pages.
Popovers

17

Popover is similar to tooltip, offering an extended view complete with a heading.
Progress

18

Progress bar shows progress of a process with stacked bars, animated
backgrounds, and text labels.
Scrollspy

19

Scrollspy is used to indicate currently active link in the menu based on scroll
position.
Tooltips

20

Tooltips are useful when you need to describe a link.

Bootstrap 4 - Utilities
Description
Bootstrap 4 uses collection of utilities for displaying borders, text color, embeding video etc
on the web page.
The following table lists down the utilities types which you can use to manipulate the
Bootstrap 4 −
S.No.

Methods & Description

Borders
1

Border utility provides style, color and radius of an element's border.
Clearfix and Close Icon

2

Clearfix is used to clear the floated content and close icon for dismissing the
content.

3

Colors

Use the contextual classes to change the color of text, link and background color
of an element.
Embed
4

It is used to embed the video in a page by using