Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web.
How to use bootstrap, a framework for web design
1. By Yaowaluck Promdee, Dr.Sumonta Kasemvilas
Bootstrap is the most popular HTML, CSS and JS framework for
developing responsive, mobile first projects on the web.
Web Design Technology 1
3. What is Bootstrap?
• Scaffolding – grid system
• Base CSS – typography, tables, forms, images
• Components – navigation, breadcrumbs, pagination
• JavaScript – jQuery plugins
Web Design Technology 3
4. Why use Bootstrap?
• Easy to use
• Responsive features
• Mobile-first approach
• Browser compatibility
Web Design Technology 4
5. Get Started Bootstrap
• Download Bootstrap from
getbootstrap.com
• Include Bootstrap from a CDN
Web Design Technology 5
6. Bootstrap CDN
• Download form a CND (Content Delivery Network)
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></scri
pt> Web Design Technology 6
7. Web Design Technology 7
Download Bootstrap
Bootstrap
Compiled and minified
CSS, JavaScript, and
fonts. No docs or
original source files are
included.
Source code
Source Less, JavaScript,
and font files, along with
our docs. Requires a
Less compiler and
some setup.
Sass
Bootstrap ported from
Less to Sass for easy
inclusion in Rails,
Compass, or Sass-
only projects.
8. Create Webpage with Bootstrap
1. Add the HTML5 doctype
2. Bootstrap 3 is mobile-first
<meta name="viewport" content="width=device-width, initial-scale=1">
The part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
The part sets the initial zoom level when the page is first
loaded by the browser.
Web Design Technology 8
9. Create Webpage with Bootstrap
3. Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
The .container class provides a responsive fixed width container
The .container-fluid class provides a full width container, spanning the entire
width of the viewport
Web Design Technology 9
10. Grid system
Extra small devices
Phones (<768px)
Small devices
tablet (>=768px)
Medium devices
Desktops
(>=992px)
Large devices
Desktop
(>=1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoint
Max container
width
None(auto) 750pz 970pz 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Gutter width 30px (15px on each side of column)
Max column width Auto 60px 78px 95px
Offsets/Column
ordering
N/A Yes
Web Design Technology 10
12. Grid system
For Mobile and Desktop
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Web Design Technology 12
15. Bootstrap Pager
Pager is also a form of pagination (as described in the previous chapter).
Pager provides previous and next buttons (links).
To create previous/next buttons, add the .pager class to an <ul> element:
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
Align Buttons
Use the .previous and .next classes to align each button to the sides of the
page
Web Design Technology 15
16. Navigation Bars
Bootstrap Navigation bar
A standard navigation bar is created with <nav class=“navbar-default”>
Just change the .navbar-default class into .navbar-inverse
The .navbar-fixed-top class makes the navigation bar fixed at the top
Web Design Technology 16
17. Bootstrap Forms
Standard rules for all three form
layouts:
• Always use <form role="form">
(helps improve accessibility for
people using screen readers)
• Wrap labels and form controls in
<div class="form-group"> (needed
for optimum spacing)
• Add class .form-control to all
textual <input>, <textarea>, and
<select> elements
Web Design Technology 17
19. Breadcrumbs
Indicate the current page's location within a navigational hierarchy
Separators are automatically added in CSS through :before and content.
class breadcrumb
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Web Design Technology 19
21. Using the framework
Web Design Technology 21
Starter template
Nothing but the basics:
compiled CSS and
JavaScript along with a
container.
Bootstrap theme
Load the optional Bootstrap
theme for a visually
enhanced experience.
Grids
Multiple examples of grid
layouts with all four tiers,
nesting, and more.
22. Using the framework
Web Design Technology 22
Jumbotron
Build around the jumbotron
with a navbar and some basic
grid columns.
Narrow jumbotron
Build a more custom page by
narrowing the default container
and jumbotron..
24. Assignment
Create a web page to present
“Principles of Web Design”
from information provided using Bootstrap
In hours time
Web Design Technology 24
Editor's Notes
Bootstrap is a free front-end framework for faster and easier web development
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
Bootstrap also gives you the ability to easily create responsive designs
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).
MaxCDN provide CDN support for Bootstrap's CSS and JavaScript. Also include jQuery:
Bootstrap (currently v3.3.5) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set:
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.
To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:
Note: Containers are not nestable (you cannot put a container inside another container).
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
Look to the examples for applying these principles to your code.
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
A basic Bootstrap table has a light padding and only horizontal dividers. The .table class adds basic styling to a table
What is Pager?
Pager is also a form of pagination (as described in the previous chapter).
Pager provides previous and next buttons (links).
To create previous/next buttons, add the .pager class to an <ul> element:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-3">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="col-md-3">
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>