Scribd
Upload
67 views

Chapter 4 Bootstrap

A CSS framework is a package of standardized code like HTML, CSS and JS files that can be used as a basis for building websites. Popular frameworks include Bootstrap, Tailwind CSS and Bulma. Bootstrap is the most popular framework and uses a mobile-first approach and responsive design. It contains components, grids and plugins for buttons, navigation, images and more. Developers can download Bootstrap or include it from a CDN to build responsive websites faster.

Uploaded by

Ali A Daraghmeh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

Chapter 4 Bootstrap

A CSS framework is a package of standardized code like HTML, CSS and JS files that can be used as a basis for building websites. Popular frameworks include Bootstrap, Tailwind CSS and Bulma. Bootstrap is the most popular framework and uses a mobile-first approach and responsive design. It contains components, grids and plugins for buttons, navigation, images and more. Developers can download Bootstrap or include it from a CDN to build responsive websites faster.

Uploaded by

Ali A Daraghmeh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

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!

You might also like