+
Bootstrap & Responsive Design
What is Responsive Web Design?
n Responsive web design is about creating web sites which
automatically adjust themselves to look good on all devices, from
small phones to large desktops.
n Bootstrap is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first web sites.
n Bootstrap is completely free to download and use!
What is Bootstrap?
n Bootstrap is a free front-end framework for faster and easier web
development
n Bootstrap includes HTML and CSS based design templates for
typography, forms, buttons, tables, navigation, modals, image
carousels and many other, as well as optional JavaScript plugins
n Bootstrap also gives you the ability to easily create responsive
designs
Bootstrap History
n Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter,
and released as an open source product in August 2011 on GitHub.
n Advantages of Bootstrap:
n Easy to use: Anybody with just basic knowledge of HTML and CSS can start
using Bootstrap
n Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets,
and desktops
n Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the
core framework
n Browser compatibility: Bootstrap is compatible with all modern browsers
(Chrome, Firefox, Internet Explorer, Safari, and Opera)
Where to Get Bootstrap?
n There are two ways to start using Bootstrap on your own web site.
n Download Bootstrap from getbootstrap.com
n If you want to download and host Bootstrap yourself, go
to getbootstrap.com, and follow the instructions there.
n Include Bootstrap from a CDN
n If you don't want to download and host Bootstrap yourself, you can
include it from a CDN (Content Delivery Network).
n MaxCDN provides CDN support for Bootstrap's CSS and JavaScript.
You must also include jQuery.
Bootstrap CDN
n You must include the following Bootstrap’s CSS, JavaScript, and jQuery from MaxCDN into your web page.
n <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
n Advantage of using the Bootstrap CDN:
n Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it
will be loaded from cache when they visit your site, which leads to faster loading time. Also, most
CDN's will make sure that once a user requests a file from it, it will be served from the server closest to
them, which also leads to faster loading time.
Create Web Page with Bootstrap (1)
n Add the HTML5 doctype
n Bootstrap uses HTML elements and CSS properties that require the
HTML5 doctype.
n Always include the HTML5 doctype at the beginning of the page, along
with the lang attribute and the correct character set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
Create Web Page with Bootstrap (2)
n Bootstrap is mobile-first
n Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first
styles are part of the core framework.
n To ensure proper rendering and touch zooming, add the
following <meta> tag inside the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
n The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
n The initial-scale=1 part sets the initial zoom level when the page is first
loaded by the browser.
Create Web Page with Bootstrap (3)
n Containers
n Bootstrap also requires a containing element to wrap site contents.
n There are two container classes to choose from:
n The .container class provides a responsive fixed width container.
n The .container-fluid class provides a full width container, spanning
the entire width of the viewport.
n Note: Containers are not nestable (you cannot put a container
inside another container).
Bootstrap Grids
n Bootstrap’s grid system allows up to 12 columns across the page.
n If you do not want to use all 12 columns individually, you can group
the columns together to create wider columns:
<div class="col-md-12">Span 12 columns</div>
<div class="col-md-6">Span 6</div><div class="col-md-6">Span 6</div>
<div class="col-md-4">Span 4</div><div class="col-md-8">Span 8</div>
<div class="col-md-4">Span 4</div><div class="col-md-4">Span 4</div> <div
class="col-md-4">Span 4</div>
n Bootstrap's grid system is responsive, and the columns will re-
arrange automatically depending on the screen size.
Grid Classes
n The Bootstrap grid system has four classes:
n xs (for phones)
n sm (for tablets)
n md (for desktops)
n lg (for larger desktops)
n The classes above can be combined to create more dynamic and
flexible layouts.
Basic Structure of a Bootstrap Grid
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
n First; create a row (<div class="row">). Then, add the desired
number of columns (tags with appropriate .col-*-*classes). Note
that numbers in .col-*-* should always add up to 12 for each row.
Bootstrap Tables
n A basic Bootstrap table has a light padding and only horizontal dividers.
n The .table class adds basic styling to a table:
n Striped Rows
n The .table-striped class adds zebra-stripes to a table:
n Bordered Table
n The .table-bordered class adds borders on all sides of the table and cells:
n Hover Rows
n The .table-hover class enables a hover state on table rows:
n Responsive Tables
n The .table-responsive class creates a responsive table. The table will then scroll
horizontally on small devices (under 768px). When viewing on anything larger than
768px wide, there is no difference:
Bootstrap Images
n Rounded Corners
n The .img-rounded class adds rounded corners to an image (IE8 does not support rounded
corners):
n Circle
n The .img-circle class shapes the image to a circle (IE8 does not support rounded corners):
n Thumbnail
n The .img-thumbnail class shapes the image to a thumbnail:
n Responsive Images
n Images comes in all sizes. So do screens. Responsive images automatically adjust to fit the
size of the screen.
n Create responsive images by adding an .img-responsive class to the <img> tag. The image
will then scale nicely to the parent element.
n The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to
the image:
Bootstrap Buttons
n Button Styles
n Bootstrap provides seven styles of buttons with the following classes:
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
Bootstrap Button Elements
n The button classes can be used on the following elements:
n <a>
n <button>
n <input>
Button Sizes
n Bootstrap provides four button sizes with the following classes:
.btn-lg
.btn-md
.btn-sm
.btn-xs
Block Level Buttons
n A block level button spans the entire width of the parent element.
n Add class .btn-block to create a block level button:
Active/Disabled Buttons
n A button can be set to an active (appear pressed) or a disabled
(unclickable) state:
n The class .active makes a button appear pressed, and the class
.disabled makes a button unclickable:
+
Bootstrap & Responsive Design
