Chapter 4 Bootstrap

Bootstrap
TBS/2019-2020
CSS Frameworks
2
 A CSS framework
 is defined as a package made up of a structure of files

and folders of standardized code (HTML, CSS, JS
documents etc.)
 can be used to support the development of websites, as a basis
to start building a site.
 Instead of writing long CSS style files, developers can reuse

the code provided in these frameworks and don’t have to redo it
from scratch.
CSS Frameworks
3
 Twitter bootstrap
 Tailwind CSS
 Bulma
 Materialize
 Semantic UI
 Foundation
 Skeleton
 Kube
 And many many others…
Twitter Bootstrap
4
 Twitter Bootstrap is
 the most popular framework for quickly styling your

website.
 a sleek, intuitive, and powerful mobile first front-end

framework for faster and easier web development. It uses
HTML, CSS and Javascript.
What is Bootstrap?
5
 An important term in Bootstrap is the term “Responsive”.

So what do we mean by Responsive Web Design?
 Responsive web design is about creating web sites which

automatically adjust themselves to look good on all devices, from
small phones to large desktops.
What is Bootstrap?
6
 Bootstrap is a free, open source and is the most popular HTML,

CSS, and Javascript framework developed by twitter for
creating responsive web applications.
 It can be used to create a web application built with any server

side technologies like ASP.NET, JAVA, PHP etc.
History
7
 Bootstrap was developed by Mark Otto and Jacob Thornton at

Twitter (Twitter Blueprint). It was released as an open
source product in August 2011 on GitHub.
 Version 2.0 supports Responsive web design.
 Version 3.0 adopted a mobile- first design.
 Version 4.0 alpha added Sass and Flexbox support.

Why use Bootstrap?
8
 Characteristics
 Mobile first approach:
 Since Bootstrap 3, the framework consists of Mobile first styles
throughout the entire library instead of in separate files.
 Responsive design:
 Bootstrap's responsive CSS adjusts to Desktops, Tablets and
Mobiles.
 Easy to get started:
 With just the knowledge of HTML and CSS anyone can get started
with Bootstrap.
 The Bootstrap official site has a good documentation.
 Browser Support:
 It is supported by all popular browsers.
What Bootstrap includes?
9
 Scaffolding  Components
 Bootstrap provides a basic  Bootstrap contains over a dozen
structure with Grid System, reusable components built to
link styles, background... provide iconography,
dropdowns, navigation, alerts,
 CSS
popovers, and much more. ...
 Bootstrap comes with feature
of global CSS settings,
 Customize
fundamental HML elements
and enhanced with extensible  We can customize Bootstrap
classes, and an advanced grid components and jQuery
system. plugins to get your very own
version.
 Javascript
 Bootstrap contains a variety
of customized jQuery plugins.
We can easily include them all,
or one by one.
Where to get bootstrap?
10
 There are two ways to start using Bootstrap on your own

web site.
 You can:
 Download Bootstrap from getbootstrap.com

 Include Bootstrap from a CDN.
Downloading Bootstrap
11
 If you want to download and host Bootstrap yourself, go

to getbootstrap.com, and follow the instructions there.
 The downloaded package contains a lot of files including 3 main

source files:
 Jquery.js
 Bootstrap.min.css
 Bootstrap.js
 Example:
If you want to use the predefined style provided in the file
Bootstrap.min.css, You have to call this file in the <head>:
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.
min.css">
Bootstrap CDN
12
 If you don't want to download and host Bootstrap yourself,

you can include it from a CDN (Content Delivery Network).
 CSS
 Place the stylesheet <link> into your <head> before all other
stylesheets to load Bootstrap CSS.
 JS
 Many of Bootsrap components require the use of JavaScript function.
Specifically, they require jQuery, Popper.js, and other JavaScript
plugins.
 Place the js <script> near the end of your pages, right before the
closing </body> tag, to enable them. jQuery must come first, then
Popper.js, and then our JavaScript plugins.
Starter template
13
Responsive meta tag

CSS link
JS scripts
.Container
14
 Responsively add margins, center, and wrap your content.

.Container
15
 Result (Without it)

.Container
16
 Result (with it)
Margin Margin
Grid system
17
 Bootstrap divides a page into a grid of 12 columns and

multiple rows for easier positioning of elements.
 Grid system is responsive and columns will rearrange
automatically depending on the screen size.
Grid system
18
 The Bootstrap grid system has four classes:
 xs (for phones - screens less than 768px wide)

 sm (for tablets - screens equal to or greater than 768px wide)
 md (for small laptops - screens equal to or greater than 992px
wide)
 lg (for laptops and desktops - screens equal to or greater than
1200px wide)
Grid system- basics
19
 Place columns inside <div class="row"></div> for

each row.
 Set each column width using class prefixes:
 .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*
 Example: Create a row of columns of width 3, 4, and 5.
small laptops
Grid System – Column Resets
20
 Sometimes at breakpoints, columns may be aligned

in wrong places.
Current Output Correct Output

Grid System – Column Resets
21
 Fix
 .clearfix clears float CSS attribute

 visible-xs is one of many responsive utilities
 clearfix is applied to only mobile devices (visible-xs)
Go to next line
Typography-Headings
22
 Bootstrap 4 uses a default font-size of 16px, and its line-height

is 1.5.
 The default font-family is "Helvetica Neue", Helvetica, Arial,

sans-serif.
 In addition, all <p> elements have margin-top: 0 and

margin-bottom: 1rem (16px by default).
Typography-Headings
23
 Bootstrap 4 styles HTML headings (<h1> to <h6>) with a

bolder font-weight and an increased font-size:
 Example:
Typography-alignment
24
Typography-adresses
25
 append <br> to preserve formatting

Typography-Description
26
Typography-Horizontal Description
27
Glyphicons
28
 Bootstrap comes with 200 icons to use, named

“glyphicons”
Glyphicons
29
 Syntax
 Examples
Navigation & Navigation Bars
30
 Navigation (nav)
 Navigation Bar (navbar)

Navigation (nav)
31
 Use unordered list and give .nav class attribute.

Makes navigation inline
 .nav modifiers
Navigation Bar (navbar)
32
 Creates a visible bar with navigation elements.
 .navbar modifiers
and others ...

Buttons
33
 Anything that is given a class of .btn will inherit the

default look of a gray button with rounded corners.
Buttons
34
 Examples
Images
35
 Bootstrap provides three classes that can be used to apply

some simple styles to images:
 .img-rounded: adds border-radius:6px to give the image rounded corners.

 .img-circle: makes the entire image round by adding border-radius:500px.
 .img-thumbnail: adds a bit of padding and a gray border:
Responsive images
36
 Bootstrap allows to make the images responsive by adding a class .img-

responsive to the <img>tag. This class applies max-width: 100%; and height:
auto; to the image so that it scales nicely to the parent element.
<img src="..." class="img-fluid" alt="Responsive image">

What next?
37
 Much more to learn!!

 Go to https://getbootstrap.com/
 Read the documentation to figure out how to add/modify any
component.
 Playground for bootstrap http://www.bootply.com/
It’s highly recommended to

use bootstrap in your
project!

Chapter 4 Bootstrap

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 4 Bootstrap

Uploaded by

Copyright:

Available Formats

Bootstrap

 is defined as a package made up of a structure of files

 Instead of writing long CSS style files, developers can reuse

 the most popular framework for quickly styling your

 a sleek, intuitive, and powerful mobile first front-end

 An important term in Bootstrap is the term “Responsive”.

 Responsive web design is about creating web sites which

 Bootstrap is a free, open source and is the most popular HTML,

 It can be used to create a web application built with any server

 Bootstrap was developed by Mark Otto and Jacob Thornton at

 Version 2.0 supports Responsive web design.

 Version 3.0 adopted a mobile- first design.

 Version 4.0 alpha added Sass and Flexbox support.

 There are two ways to start using Bootstrap on your own

 Download Bootstrap from getbootstrap.com

 If you want to download and host Bootstrap yourself, go

 The downloaded package contains a lot of files including 3 main

 If you don't want to download and host Bootstrap yourself,

Responsive meta tag

 Responsively add margins, center, and wrap your content.

 Result (Without it)

 Result (with it)

 Bootstrap divides a page into a grid of 12 columns and

 The Bootstrap grid system has four classes:

 xs (for phones - screens less than 768px wide)

 Place columns inside <div class="row"></div> for

 Sometimes at breakpoints, columns may be aligned

Current Output Correct Output

 .clearfix clears float CSS attribute

 Bootstrap 4 uses a default font-size of 16px, and its line-height

 The default font-family is "Helvetica Neue", Helvetica, Arial,

 In addition, all <p> elements have margin-top: 0 and

 Bootstrap 4 styles HTML headings (<h1> to <h6>) with a

 append <br> to preserve formatting

 Bootstrap comes with 200 icons to use, named

 Navigation Bar (navbar)

 Use unordered list and give .nav class attribute.

 Creates a visible bar with navigation elements.

and others ...

 Anything that is given a class of .btn will inherit the

 Bootstrap provides three classes that can be used to apply

 .img-rounded: adds border-radius:6px to give the image rounded corners.

 Bootstrap allows to make the images responsive by adding a class .img-

<img src="..." class="img-fluid" alt="Responsive image">

 Much more to learn!!

It’s highly recommended to

You might also like