03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf

ФАКУЛТЕТ ЗА ИНФОРМАТИЧКИ НАУКИ И КОМПЈУТЕРСКО ИНЖЕНЕРСТВО
НАПРЕДЕН ВЕБ ДИЗАЈН
Twitter Bootstrap

ФАКУЛТЕТ ЗА ИНФОРМАТИЧКИ НАУКИ
И КОМПЈУТЕРСКО ИНЖЕНЕРСТВО
Напреден веб дизајн
What is Bootstrap ?
◼ Bootstrap is a free collection of tools for creating websites and web
applications
◼ Bootstrap contains HTML and CSS-based design templates for text,
forms, buttons, navigation and other components
◼ Bootstrap also contains optional JavaScript extensions
◼ Bootstrap is open source and available on GitHub
2

Bootstrap History
◼ Bootstrap was developed by Mark Otto and Jacob Thornton at
Twitter as a framework to encourage consistency across internal
tools. Before Bootstrap, various libraries were used for interface
development, which led to inconsistencies and a high maintenance
burden.
◼ Bootstrap was released as an open source product in August 2011
on GitHub.
◼ In June 2014 Bootstrap was the No.1 project on GitHub!
3

Bootstrap 4
◼ Bootstrap 4 is almost a complete rewrite from
Bootstrap 3. Changes include:
 Switched from Less to Sass.
 Dropped IE8, IE9, and iOS 6 support.
 Added flexbox support and then dropped non-
flexbox support.
 Switched from pixels to root ems.
 Increased global font-size from 14px to 16px.
 Dropped the panel, thumbnail, and well components in
favor of cards.
 Dropped the Glyphicons icon font.
 Dropped the pager component.
 Rewrote almost all components, jQuery plugins. 4

Bootstrap 5
◼ Bootstrap 5 focuses on improving bootstrap 4 with as
few major changes as possible:
 Dropped jQuery for regular JavaScript
 Upgraded from Popper v1.x to Popper v2.x
 Dropped Internet Explorer 10 and 11
 Dropped support for older versions of modern browsers
 RTL support
 Overhauled utilities and new utilities API
 Improved customizing
 New and updated forms
◼ More information can be found on the Bootstrap blog
5

Why Use Bootstrap?
◼ Mobile-first approach: Since Bootstrap 3, the framework consists
of mobile-first styles throughout the entire library
◼ Browser support: Bootstrap is supported by all popular browsers
◼ Responsive web design: Bootstrap's responsive CSS adjusts to
Desktops, Tablets, and Mobile phones
◼ Easy to get started: With just the knowledge of HTML and CSS
anyone can get started with Bootstrap
6

What Does Bootstrap include?
◼ Scaffolding: Contains layout, grid system, fluid grid system, and
responsive design
◼ Base CSS: Contains classes for typography, tables, forms, buttons,
images, and more
◼ Components: Contains reusable components: icons, dropdowns,
navbars, breadcrumbs, alerts, and more
◼ JavaScript Plugins: Contains over a dozen custom plugins. You
can include them all, or one by one
◼ Customizable Components : Customize Bootstrap's components,
LESS variables, and plugins to create your own version
7

The HTML File
◼ Since Bootstrap uses HTML elements and CSS properties that
require the use of the HTML5 doctype, include the HTML5 doctype
at the beginning of the page, along with the correct character set:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
◼ Keep in mind that Bootstrap is mobile-first. Mobile-first styles are
found throughout the entire Bootstrap library instead of in separate
files.
8

◼ To ensure proper rendering and touch zooming, also add the
viewport meta tag inside the <head> element:
<meta name="viewport" content="width=device-width,
initial-scale=1">
◼ The width=device-width sets the width of the page to follow the
screen-width of the device (which will vary depending on the
device).
◼ The initial-scale=1 sets the initial zoom level when the page is first
loaded by the browser.
9

Adding Bootstrap to Your
Web Pages
◼ There are two ways of starting to use Bootstrap on your own web
site. You can:
1. Download Bootstrap from getbootstrap.com
2. Include Bootstrap from a CDN, like jsDelivr
◼ If you want to download Bootstrap, go to getbootstrap.com, and
follow the instructions there.
◼ If you don't want to download and host Bootstrap yourself, you can
include it from a CDN (Content Delivery Network).
10

Bootstrap CDN
◼ jsDelivr:

<link rel="stylesheet" crossorigin="anonymous"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/d
ist/css/bootstrap.min.css" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBo
qyl2QvZ6jIW3">

<script crossorigin="anonymous"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/di
st/js/bootstrap.bundle.min.js" integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5
q+8nbTov4+1p"></script>
11

Bootstrap Browser/Device
Support
◼ Bootstrap works best in the latest desktop and mobile browsers.
◼ Older browsers might display different renderings (though fully
functional) of certain elements/components.
◼ Bootstrap supports the latest versions of the following browsers and
platforms:
12
Chrome Firefox IE Opera Safari
Android YES YES
Not
available
NO
Not
available
iOS YES
Not
available
Not
available
NO YES
Mac OS X YES YES
Not
available
YES YES
Windows YES YES YES YES NO

Text/Typography
Bootstrap 's Default Settings
By default, the Bootstrap style sheet has some default settings.
These are:
◼ The <body> element have a font-size of 14px, and a line-height of
1.428.
◼ In addition, all <p> elements have a bottom margin that equals half
their computed line-height (10px by default).
Bootstrap vs. Browser Defaults
◼ In this chapter, we will look at some HTML elements that will be
styled a little bit differently by Bootstrap than browser defaults.
13

<h1> - <h6>
By default, Bootstrap will style the HTML headings in the following
way:
Example
14

<small>
In Bootstrap the <small> element will create a lighter, secondary
text in any heading:
Example
15

<mark>
By default, Bootstrap will style the HTML <mark> element in the
following way:
Example
<abbr>
By default, Bootstrap will style the HTML <abbr> element in the
following way (with a dotted bottom border and a help cursor on hover):
Example
16

<blockquote>
By default, Bootstrap will style the HTML <blockquote> element in
the following way:
Example
17

<dl>
By default, Bootstrap will style the HTML <dl> element in the
following way:
Example
<code>
By default, Bootstrap will style the HTML <code> element in the
following way:
Example
18

<kbd>
By default, Bootstrap will style the HTML <kbd> element in the
following way:
Example
<pre>
By default, Bootstrap will style the HTML <pre> element in the
following way:
Example
19

More Typography Classes
◼ The Bootstrap classes below can be added to style HTML elements
further:
20
Bootstrap 3
Class Description
.lead Makes a paragraph stand out
.small
Indicates smaller text (set to 85% of the size
of the parent)
.text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text (deprecated)
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text

21
Class Description
.text-capitalize Indicates capitalized text
.initialism
Displays the text inside the <abbr> element
in a slightly smaller font size
.blockquote-reverse
Indicates a blockquote with right-aligned
content
.list-unstyled
Removes the default list-style and left
margin on list items (works on both <ul>
and <ol>). This class only applies to
immediate children list items (to remove the
default list-style from any nested lists, apply
this class to any nested lists as well)
.list-inline Places all list items on a single line
.dl-horizontal
Lines up the terms and descriptions in the
<dl> element side-by-side. Starts off like
default <dl>s, but when the browser window
expands, it will line up side-by-side
.pre-scrollable Makes a <pre> element scrollable

Put Your HTML Elements
Inside Containers
◼ Bootstrap also requires a containing element to wrap site contents.
◼ There are two containers to choose from:
1. Use the .container class for a responsive fixed width container:
Example
<div class="container">
...
</div>
2. Use the .container-fluid class for a full width container, spanning
the entire width of the viewport:
Example
<div class="container-fluid">
...
</div> 22

Grid System
What is a Grid?
◼ In graphic design, a grid is a structure made up of a series of vertical
and horizontal lines used to structure content.
◼ A grid is widely used to design layout and content structure in print
design.
◼ In web design, a grid is a very effective method to create a
consistent layout rapidly and effectively using HTML and CSS.
23

Bootstrap Grid System
◼ Bootstrap provides a responsive, mobile-first fluid 12-column grid
system.
◼ The responsive grid system appropriately scales up to 12 columns
as the device or viewport size increases.
24
1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12

Mobile-First Strategy
◼ Determine what is most important content
◼ Design to smaller widths first
◼ The CSS address mobile device first; then have media queries for
tablets, desktops
◼ Add elements as screen size increases
25

Grid System Rules
Some Bootstrap grid system rules:
◼ 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 classes like .row and .col-sm-4 are available for quickly
making grid 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
◼ Grid columns are created by specifying the number of 12 available
columns you wish to span. For example, three equal columns would
use three .col-sm-4
26

Basic Structure of a
Bootstrap Grid
◼ The following is a basic structure of a Bootstrap grid:
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
</div>
27

Grid Options
◼ The following table summarizes how the Bootstrap grid system
works across multiple devices:
28
Extra small
devices
Phones
(<576px)
Small devices
Tablets
(>=576px)
Medium
devices
Desktops
(>=768px)
Large devices
Desktops
(>=992px)
Grid behavior
Horizontal at
all times
(deprecated)
Collapsed to
start,
horizontal
above
breakpoints
Collapsed to
start,
horizontal
above
breakpoints
Collapsed to
start,
horizontal
above
breakpoints
Container
max-width
None (auto) 540px 720px 960px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Number of
columns
12 12 12 12

Grid Options
Extra small
devices
Phones
(<576px)
Small devices
Tablets
(>=576px)
Medium
devices
Desktops
(>=768px)
Large devices
Desktops
(>=992px)
Column width Auto ~62px ~81px ~97px
Gutter width
30px (15px on
each side of a
column)
30px (15px on
each side of a
column)
30px (15px on
each side of a
column)
30px (15px on
each side of a
column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column
ordering
Yes Yes Yes Yes
29

Stacked-to-horizontal
Bootstrap Grid Example: Stacked-to-horizontal
◼ We will use the .col-*-* grid classes to create a basic grid system
that starts out stacked on mobiles and tablets (small devices),
before becoming horizontal on desktop (medium and large) devices.
◼ The following example shows a simple "stacked-to-horizontal" two-
column layout:
30

Example: Stacked-to-horizontal
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>
</div>
<div class="col-sm-6" style="background-color:orange;">
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
31

◼ Tip: Turn any fixed-width grid layout into a full-width layout by
changing the .container class to .container-fluid:
◼ Example: Fluid container
<div class="row">
</div>
</div>
</div>
</div>
32

Stacked-to-horizontal
Fluid container
33
Mobile portrait view

Small Devices
Bootstrap Grid Example: Small Devices
◼ Assume we have a simple layout with two columns. We want the
columns to be split 25%/75% for small devices.
◼ Tip: Small devices are defined as having a screen width from 576
pixels to 768 pixels.
◼ For small devices we will use the .col-sm-* classes.
◼ We will add the following classes to our two columns:
<div class="col-sm-3">....</div>
34

◼ Now Bootstrap is going to say "at the small size, look for classes with -sm-
in them and use those".
◼ The following example will result in a 25%/75% split on small devices:
Example
<div class="row">
</div>
</div>
</div>
</div>
35

Small Devices
36

Medium Devices
Bootstrap Grid Example: Medium Devices
◼ In the previous chapter, we presented a grid example with classes for small
devices. We used two divs (columns) and we gave them a 25%/75% split:
But on medium devices the design may be better as a 50%/50% split.
◼ Tip: Medium devices are defined as having a screen width from 768 pixels
to 992 pixels.
◼ For medium devices we will use the .col-md-* classes.
◼ Now we will add the column widths for medium devices:
<div class="col-sm-3 col-md-6">....</div>
37

◼ Example
<div class="row">
<div class="col-sm-3 col-md-6" style="background-color:yellow;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:orange;">
aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
38

Напреден веб дизајн 39
Medium Devices

Large Devices
Bootstrap Grid Example: Large Devices
In the previous chapter, we presented a grid example with classes for
small and medium devices. We used two divs (columns) and we gave
them a 25%/75% split on small devices, and a 50%/50% split on
medium devices:
◼ But on large devices the design may be better as a 33%/66% split.
◼ Tip: Large devices are defined as having a screen width from 992
pixels and above.
◼ For large devices we will use the .col-lg-* classes.
40

◼ So now we will add the column widths for large devices:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
◼ Now Bootstrap is going to say "at the small size, look at classes
with -sm- in them and use those. At the medium size, look at classes
with -md- in them and use those. At the large size, look at classes
with the word -lg- in them and use those".
◼ The following example will result in a 25%/75% split on small
devices, a 50%/50% split on medium devices, and a 33%/66% split
on large devices:
41

◼ Example
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4"
style="background-color: yellow;">
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8"
style="background-color: orange;">
aperiam, eaque ipsa quae ab illo inventore Veritatis et
</div>
</div>
</div>
42

Large Devices
43

Grid Examples
◼ Three Equal Columns
The following example shows how to get a three equal-width columns
starting at tablets and scaling to large desktops. On mobile phones, the
columns will automatically stack:
Example
◼ <div class="row">
<div class="col-sm-4">.col-sm-4</div>
</div>
44

◼ Three Unequal Columns
The following example shows how to get a three various-width columns
starting at tablets and scaling to large desktops:
Example
</div>
◼ Two Unequal Columns
The following example shows how to get two various-width columns
starting at tablets and scaling to large desktops:
Example
</div>
45

◼ Two Columns With Two Nested Columns
The following example shows how to get two columns starting at tablets
and scaling to large desktops, with another two columns (equal widths)
within the larger column (at mobile phones, these columns and their
nested columns will stack):
Example
<div class="col-sm-8">
.col-sm-8
<div class="row">
</div>
</div>
</div>
46

◼ Mixed: Mobile And Desktop
The Bootstrap grid system has four classes: xs (phones), sm (tablets),
md (desktops), and lg (larger desktops). These classes can be
combinated to create more dynamic and flexible layouts.
◼ Tip: Each class scales up, so if you wish to set the same widths for
xs and sm, you only need to specify xs.
Example
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
47

◼ Mixed: Mobile, Tablet And Desktop
Example
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-
7 .col-sm-6 .col-lg-8</div>
5 col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-
xs-6 col-sm-8 .col-lg-10</div>
6 .col-sm-4 col-lg-2</div>
</div>
48

◼ Clear Floats (deprecated)
Clear floats (with the .clearfix class) at specific breakpoints to prevent
strange wrapping with uneven content:
Example
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>

<div class="clearfix visible-xs"></div>
</div>
49

◼ Offsetting Columns (changed in v5)
Move columns to the right using .col-md-offset-* classes. These
classes increase the left margin of a column by * columns. For
example, .col-md-offset-2 moves .col-md-2 over two columns:
Example
<div class="col-sm-5 col-md-6">.col-sm-5 .col-
md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6
col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-
offset-0</div>
</div>
50

◼ Offsetting Columns in Bootstrap 5
Example
<div class="col-sm-5 col-md-6">.col-sm-5 .col-
md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6
offset-md-0">
.col-sm-5 .offset-sm-2 .col-md-6 .Offset-md-
0</div>
</div>
51

Clear Floats
Offsetting Columns
52

Forms
Standard rules for all the three types of form layout (deprecated):
▪ Add role="form" to the <form> element
▪ Wrap labels and form controls in a <div> element with class="form-
group" (needed for optimum spacing)
▪ Add class="form-control" to all textual <input>, <textarea>, and
<select> elements
53

Forms
Bootstrap Form Layouts
Bootstrap provides three types of form layouts:
▪ Vertical form (this is default)
▪ Horizontal form
▪ Inline form
54
Note: All textual form controls, such as <input> and <textarea> requires the class
.form-control, while <select> requires the class .form-select for general styling. These classes also makes the forms
controls 100% wide. To change their width or use them inline, you can utilize the Bootstrap's predefined grid classes.
Tip: It is recommend to use margin-bottom utility classes (e.g., mb-2, mb-3, etc.) to add vertical spacing
between the form groups. As, using single direction margin throughout in the form prevent margin
collapsing and create more consist form.

◼ Bootstrap Vertical Form (deprecated)
The following example creates a vertical form with two input fields, one
checkbox, and a submit button:
Example
◼ <form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control"
id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-
default">Submit</button>
</form>
55

◼ Bootstrap Vertical Form in Bootstrap 5
Example
56

Bootstrap Vertical Form
57

◼ Bootstrap Inline Form (deprecated)
In an inline form, all of the elements are inline, left-aligned, and the
labels are alongside.
◼ Note: This only applies to forms within viewports that are at
least 768px wide!
Additional rule for creating an inline form:
◼ Add class="form-inline" to the <form> element
◼ The following example creates an inline form with two input fields,
one checkbox, and a submit button:
58

Example
◼ <form class="form-inline" role="form">
<label for="email">Email address:</label>
<input type="email" class="form-control"
id="email">
</div>
<label for="pwd">Password:</label>
id="pwd">
</div>
<label><input type="checkbox"> Remember
me</label>
</div>
</form>
59

◼ Tip: If you don't include a label for every input, screen readers will
have trouble with your forms. You can hide the labels for all devices,
except screen readers, by using the .sr-only class:
Example
<label class="sr-only" for="email">Email
address:</label>
<input type="email" class="form-control" id="email">
</div>
<label class="sr-only" for="pwd">Password:</label>
id="pwd">
</div>
</div>
</form>
Bootstrap 3
60

◼ Bootstrap Inline Form in Bootstrap 5
61
Tip: It is recommended to include a label for every form inputs otherwise screen readers will
have trouble with your forms. However, in case of inline form layouts you can hide the labels
using the .visually-hidden class, so that only screen readers can read it.

Bootstrap Inline Form
62

◼ Bootstrap Horizontal Form
◼ You can also create horizontal form layouts where labels and form
controls are aligned side-by-side using the Bootstrap grid classes.
To create a horizontal form layout add the class .row on form
groups and use the .col-*-* grid classes to specify the width of your
labels and controls.
◼ Also, be sure to apply the class .col-form-label on the <label>
elements, so that they're vertically centered with their associated
form controls.
◼ The following example creates a horizontal form with two input
fields, one checkbox, and a submit button:
Deprecated rules for creating a horizontal form:
◼ Add class="form-horizontal" to the <form> element
◼ Add class="control-label" to all the labels
63

Example (deprecated)
<form class="form-horizontal" role="form">
<label class="control-label col-sm-2" for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter
password">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
64

Example in Bootstrap 5
65

Bootstrap Horizontal Form
66

Bootstrap Form Inputs
Supported Form Controls
Bootstrap supports the following form controls:
◼ input
◼ textarea
◼ checkbox
◼ radio
◼ select
67

◼ Bootstrap Input
Bootstrap supports all the HTML5 input types: text, password,
datetime, datetime-local, date, month, time, week, number, email, url,
search, tel, and color.
◼ Note: Inputs will NOT be fully styled if their type is not properly
declared!
The following example contains two input elements; one of type text
and one of type password:
Example
<div class="mb-3">
<label for="example1" class="form-label">Email address</label>
<input type="email" class="form-control" id="example1"
placeholder="name@example.com"/>
</div>
<div class="mb-3">
<label for=“example2" class="form-label">Password</label>
<input type="password" class="form-control" id="example2"
placeholder="Password">
</div>
68

Bootstrap Input
69

◼ Bootstrap Textarea
The following example contains a textarea:
Example
◼ <div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5"
id="comment"></textarea>
</div>
70

◼ Bootstrap Checkboxes (deprecated)
Checkboxes are used if you want the user to select any number of
options from a list of preset options.
◼ The following example contains three checkboxes. The last option is
disabled:
Example
◼ <div class="checkbox">
<label><input type="checkbox" value="">Option
1</label>
</div>
<label><input type="checkbox" value="">Option
2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value=""
disabled>Option 3</label>
</div>
71

◼ Use the .checkbox-inline class if you want the checkboxes to appear
on the same line:
Example
<label class="checkbox-inline"><input
type="checkbox" value="">Option 1</label>
72

◼ Bootstrap Checkboxes in Bootstrap 5
Example
<div class="form-check">
<input class="form-check-input" type="checkbox" id=”c1">
<label class="form-check-label" for=”c1">Radio 1</label>
</div>
<input class="form-check-input" type="checkbox" id=”c2” checked>
</div>
<input class="form-check-input" type="checkbox" id=”c3” disabled>
</div>
73

◼ Use the .form-check-inline class if you want the checkboxes to appear
on the same line:
Example
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id=”c1">
</div>
<input class="form-check-input" type="checkbox" id=”c2” checked>
</div>
<input class="form-check-input" type="checkbox" id=”c3” disabled>
</div>
74

Bootstrap Checkboxes
Bootstrap Checkboxes-inline
75

◼ Bootstrap Radio Buttons (deprecated)
Radio buttons are used if you want to limit the user to just one selection
from a list of preset options.
The following example contains three radio buttons. The last option is
disabled:
Example
◼ <div class="radio">
<label><input type="radio"
name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio"
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio"
disabled>Option 3</label>
</div> 76

◼ Use the .radio-inline class if you want the radio buttons to appear on
the same line:
Example
◼ <label class="radio-inline"><input type="radio"
<label class="radio-inline"><input type="radio"
<label class="radio-inline"><input type="radio"
77

◼ Bootstrap Radio Buttons in Bootstrap 5
Example
<input class="form-check-input" type=”radio" id=”c1” name=”r1">
</div>
<input class="form-check-input" type=”radio"
id=”c2” name=”r1" checked>
</div>
id=”c3” name=”r1" disabled>
</div>
78

◼ Use the .form-check-inline class if you want the radio buttons to
appear on the same line:
Example
<input class="form-check-input" type=”radio" id=”c1” name=”r1">
</div>
id=”c2” name=”r1" checked>
</div>
id=”c3” name=”r1" disabled>
</div>
79

Bootstrap Radio Buttons
Bootstrap Radio Buttons-inline
80

◼ Bootstrap Select List
Select lists are used if you want to allow the user to pick from multiple
options.
◼ The following example contains a dropdown list (select list):
Example
◼ <div class="form-control">
<label for="sel1">Select list:</label>
<select class="form-select" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
81

Bootstrap Select List
82

Bootstrap Form Control States
◼ INPUT FOCUS: When an input receives focus, the outline of the
input is removed and a box-shadow is applied
◼ DISABLED INPUTS: If you need to disable an input, add the
disabled attribute
◼ DISABLED FIELDSETS: Add the disabled attribute to a <fieldset> to
disable all the controls within
◼ READONLY INPUTS: Add the readonly attribute to an input to
prevent user input
◼ VALIDATION STATES: Bootstrap includes validation styles for
error, warning, and success messages. To use, add .has-warning,
.has-error, or .has-success to the parent element
◼ ICONS: You can add feedback icons with the .has-feedback class
and the right icon
◼ HIDDEN LABELS: Add the .sr-only class on the label for form
controls with no visible label
83

Bootstrap Input Sizing
◼ Input Sizing in Forms
Set the heights of input elements using classes like .input-group-lg and
.input-group-sm.
Set the widths of elements using grid column classes like .col-lg-*, .col-
sm-*, and .col-*.
84

◼ Height Sizing (deprecated)
The following examples shows input elements with different heights:
Example
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault"
type="text">
</div>
<label for="inputlg">input-lg</label>
<input class="form-control input-lg" id="inputlg"
type="text">
</div>
<label for="inputsm">input-sm</label>
<input class="form-control input-sm" id="inputsm"
type="text">
</div>
</form> 85

◼ You can quickly size labels and form controls within a Horizontal
form by adding .form-group-lg or .form-group-sm to the <div
class="form-group"> element:
Example
◼ <form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="lg">form-
group-lg</label>
<input class="form-control" type="text" id="lg">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="sm">form-
group-sm</label>
<input class="form-control" type="text" id="sm">
</div>
</div>
</form>
86

◼ Height Sizing in Bootstrap 5
Example
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Small</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Default</span>
</div>
<div class="input-group input-group-lg">
<span class="input-group-text">Large</span>
</div>
87

Bootstrap Input Sizing
Height Sizing
88

◼ Column Sizing
The following examples shows input elements with different widths
using different .col-* classes:
Example
◼ <div class="col-2">
<label for="ex1">col-2</label>
<input class="form-control" id="ex1” type="text">
</div>
<div class="col-3">
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-4">
<input class="form-control" id="ex3" type="text">
</div>
89

◼ Help Text
We can use the .form-text class to add a block level help text in forms:
Example
<form>
<label class="form-label" for="pw">Password</label>
<input type="password" id="pw" class="form-control"
placeholder="Enter password">
<div class="form-text">This is some help text...</div>
</form>
90

Column Sizing
Help Text
91

My First Bootstrap Website
◼ Build a Bootstrap Web Page From Scratch
The following pages will show how to build a Bootstrap website from
scratch.
◼ We will start with a simple HTML page, and then add more and
more components, until we have a fully functional and responsive
website.
92

◼ We will start with the following HTML page:
◼ <!DOCTYPE html>
<html>
<head>
<title>Bootstrap Case</title>
</head>
<body>
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more
components from Bootstrap ...</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
93

◼ Add Bootstrap CDN and Put Elements in
Containers
The first thing we will do is to add the Bootstrap CDN and a link to
jQuery.
Then, we will put the HTML elements into two containers:
◼ Example
◼ <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.Bootstrap
cdn.com/Bootstrap /3.2.0/css/Bootstrap .min.css">
</head>
94

<body>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/j
query.min.js"></script>
<script src="http://maxcdn.Bootstrap cdn.com/Bootstrap
/3.2.0/js/Bootstrap .min.js"></script>
</body>
</html>
95

◼ Tip: To let the page fill the whole screen, change the .container
class to .container-fluid:
◼ Example
◼ <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-
width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.Bootstrap cdn.com/Bootstrap
/3.2.0/css/Bootstrap .min.css">
</head>
96

<body>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/j
query.min.js"></script>
<script src="http://maxcdn.Bootstrap cdn.com/Bootstrap
/3.2.0/js/Bootstrap .min.js"></script>
</body>
</html>
97

Напреден веб дизајн 98

Adding a Jumbotron
◼ Jumbotron (deprecated)
A Jumbotron indicates a big box for calling extra attention to some
special content or information.
A Jumbotron is displayed as a grey box with rounded corners. It also
enlarges the font sizes of the text inside it.
99

The following example creates a Jumbotron inside the first container:
Example
◼ <div class="container">
<div class="jumbotron">
</div>
</div>
</div>
100

Adding a Jumbotron
101

Adding Button and Icon
◼ Adding a Button
To use a button, simply write class="btn btn-default".
We can use it in the <button> tag:
◼ <button type="button" class="btn btn-
default">Button Text</button>
or in a link:
◼ <a href="..." class="btn btn-default">Button
Text</a>
102

◼ Other button classes are: .btn-primary, .btn-success, .btn-info, .btn-
warning, .btn-danger, and .btn-link (which all represent different
colors for the button).
◼ Button sizes can be defined with the following classes: .btn-lg (large
button), .btn-sm (small button), and .btn-xs (extra small button).
◼ The following example puts a large and light-blue "Search" button in
the Jumbotron. To achieve this effect, we will use the .btn-lg and
.btn-info classes:
◼ Example
<a href="#" class="btn btn-info btn-
lg">Search</a>
</div>
</div>
103

Adding Button and Icon
104

◼ Adding an Icon
Bootstrap also has 200 glyphicons we can use for free.
◼ To display an icon, simply write:
<span class="glyphicon glyphicon-print"></span>
◼ The following example adds a Search icon on the "Search" button:
◼ Example
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-
search"></span> Search
</a>
</div>
</div>
105

Adding an Icon
106

Multicolumn Layout
◼ Multicolumn Layout
◼ With Bootstrap it is easy to create a multicolumn layout.
◼ Bootstrap provides a responsive, mobile-first 12-column grid system.
◼ The columns will rearrange themselves when viewed on different screen
sizes.
◼ Some grid rules:
◼ Start with a container (<div class="container">...</div>)
◼ Create a row inside it with <div class="row">...</div>
◼ Use predefined classes like .col-sm-4, .col-md-6, etc. to quickly make grid
columns
◼ Grid columns are created by specifying the number of 12 available columns
you wish to span. For example, three equal columns would use three .col-
md-4 columns
◼ The numbers in the .col-*-* classes should always add up to 12 for each row
◼ Content is placed inside the grid columns
107

The following example shows how to divide the second container into four
columns of equal size. In addition we will put some more text inside the
columns:
Example
<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>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
108

Multicolumn Layout
109

◼ Columns With Different Widths
The previous example showed how to create columns of equal widths.
◼ Now we wish to create columns of different widths.
◼ The following example creates a three-column layout where the
column in the middle is wider than the first and last column:
110

◼ Example
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
</div>
<p>Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
<p>Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium,
totam rem aperiam.</p>
</div>
<p>Eaque ipsa quae ab illo inventore veritatis et
</div>
</div>
</div>
111

Columns With Different Widths
112

Adding a Menu
◼ Menus
Most web pages have some kind of a menu.
◼ In HTML, a menu is often defined in an unordered list <ul> (and
styled afterwards), like this:
◼ <ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
</ul>
◼ Bootstrap provides two ways to display the menu above: tabs and
pills.
113

◼ Tabs
Tabs are created with <ul class="nav nav-tabs">.
◼ Tip: Also mark the current page with <li class="active">.
◼ The following example places the menu below the jumbotron, inside
a new container:
◼ Example
<p>This page will grow as we add more and more components
from Bootstrap ...</p>
<a href="#" class="btn btn-info btn-lg">Search</a>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
</ul>
</div> 114

Tabs
115

◼ Tabs With Dropdown Menu
Tabs can also hold dropdown menus.
◼ The following example adds a dropdown menu to "Menu 1":
◼ Example
<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
</ul>
</li>
</ul>
</div> 116

Tabs With Dropdown Menu
117

Pills
Pills are created with <ul class="nav nav-pills">. Also mark the current
page with the .active class:
Example
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<a class="nav-link" href="#">Menu 1</a>
</li>
</li>
<a class="nav-link disabled">Menu 3</a>
</li>
</ul>
</div>
118

Pills
119

◼ Vertical Pills (deprecated)
Pills can also be displayed vertically. Just add the .nav-stacked class.
◼ The following example places the vertical pill menu inside the last
column. So, on a large screen the menu will be displayed to the
right. But on a small screen, the content will automatically adjust
itself into a single-column layout:
◼ Example
◼ <div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
</ul>
</div>
120

Vertical Pills
121

Pills With Dropdown Menu
Pills can also hold dropdown menus.
The following example adds a dropdown menu to "Menu 1":
<ul class="nav nav-pills">
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#"
role="button" aria-expanded="false">Menu 1</a>
<li><a class="dropdown-item" href="#">Submenu 1-1</a></li>
</ul>
</li>
</li>
<a class="nav-link disabled">Menu 3</a>
</li>
</ul>
</div>
122

Pills With Dropdown Menu
123

Adding a Navigation Bar
◼ Navigation Bars
A navigation bar is a navigation header that is placed at the top of the
page.
◼ With Bootstrap a navigation bar can extend or collapse depending
on the screen size.
◼ A standard navigation bar is created with <nav class="navbar
navbar-expand{-sm|-md|-lg|-xl|-xxl}">.
◼ The following example shows how to add a navigation bar to the top
of the page:
124

◼ Example
<nav class="navbar navbar-expand-lg bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</li>
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
...
125

Adding a Navigation Bar
126

◼ Inverted Navigation Bar (deprecated)
If you don't like the style of the default navigation bar, Bootstrap
provides an alternative.
◼ Just change the .navbar-default class into .navbar-inverse:
◼ Example
◼ <nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#">Page 1</a></li>
</ul>
</div>
</div>
</nav>
Bootstrap 3
127

Inverted Navigation Bar
128
Bootstrap

◼ Color schemes
Navbar themes are easier than ever thanks to Bootstrap’s combination
of Sass and CSS variables. The default is our “light navbar” for use with
light background colors, but you can also apply .navbar-dark for dark
background colors. Then, customize with .bg-* utilities.
◼ Example
<nav class="navbar navbar-dark bg-dark">

</nav>
<nav class="navbar navbar-dark bg-primary">
</nav>
<nav class="navbar" style="background-color: #e3f2fd;">
</nav>
129

Colored Navigation Bars
130

◼ Fixed Navigation Bar
The navigation bar can also be fixed at the top or at the bottom of the
page (.fixed-top or .fixed-bottom).
◼ A fixed navigation bar stays visible in a fixed position (top or bottom)
independent of the page scroll.
◼ The following example makes the navigation bar fixed at the top:
◼ Example
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<ul class="navbar-nav me-auto mb-2 mb-md-0">
</li>
</li>
</ul>
</div>
</nav>
131

◼ The following example makes the navigation bar fixed at the bottom:
◼ Example
<nav class="navbar navbar-expand-md navbar-dark fixed-bottom bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<ul class="navbar-nav me-auto mb-2 mb-md-0">
</li>
</li>
</ul>
</div>
</nav>
132

Fixed Navigation Bar
133

◼ Navigation Bar With Dropdown
Navigation bars can also hold dropdown menus.
◼ The following example adds a dropdown menu for the "Page 1"
button:
134

◼ Example
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</li>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
135

Navigation Bar With Dropdown
136

◼ Right-Aligned Navigation Bar (deprecated)
The .navbar-right class is used to right-align navigation bar buttons.
◼ In the following example we insert a "Sign Up" button and a "Login"
button to the right in the navigation bar. We also add a glyphicon on
each of the two new buttons:
◼ Example
◼ <nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav> 137

◼ Right-Aligned Navigation Bar in Bootstrap 5
◼ Aligning items in a navigation bar to the right can be done with flex
alignment class or using space utility.
◼ In the following example we insert a “Home" button and a “Course"
button to the right in the navigation bar using flex alignment class.
Example
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container-fluid ">
<a class="navbar-brand " href="#">Navbar</a>
<div class="justify-content-end">
<ul class="navbar-nav ">
</li>
<a class="nav-link" href="#">Course</a>
</li>
</ul>
</div>
</div>
</nav>
138

Right-Aligned Navigation Bar
139

◼ Collapsing The Navigation Bar
◼ The navigation bar takes up too much space on a small screen.
◼ We should hide the navigation bar; and only show it when it is
needed.
◼ In the following example the navigation bar is replaced by a button in
the top right corner. Only when the button is clicked, the navigation
bar will be displayed:
140

◼ Example
<a class="navbar-brand" href="#">Navbar Collapse</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll"
aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto my-2 my-lg-0">
</li>
</ul>
</div>
</div>
</nav>
141

Collapsing The Navigation Bar
142

CSS Basic Text Reference
◼ Bootstrap 's Default Settings
By default, the Bootstrap style sheet has some default settings. These
are:
◼ The <body> element have a font-size of 14px, and a line-height of
1.428.
◼ In addition, all <p> elements have a bottom margin that equals half
their computed line-height (10px by default).
143

◼ Typography
◼ The elements below are HTML elements that will be styled a little bit
differently by Bootstrap than browser defaults.
◼ The classes below is used to style the elements further.
144
Element/Class Description
<h1> - <h6>
or
.h1 - .h6
h1 - h6 headings
<small>
Creates a lighter, secondary text in any
heading
Heading (lighter text)
.small
Indicates smaller text (set to 85% of the size of
the parent): Smaller text

.lead
Makes a text stand out: Stand out
text
<mark>
or
.mark
Highlights text: Highlighted text
<del> Indicates deleted text: Deleted text
<s>
Indicates no longer relevant text: No
longer relevant text
<ins> Indicates inserted text: Inserted text
<u>
Indicates underlined text: Underlined
text
<strong> Indicates bold text: Bold text
<em> Indicates italic text: Italic text
.text-start (.text-left for older versions) Indicates left-aligned text
145

.text-center Indicates center-aligned text
.text-end (.text-right in older versions) Indicates right-aligned text
.text-nowrap Indicates no wrap text
.text-lowercase
Indicates lowercased text: lowercased
text
.text-uppercase
Indicates uppercased text:
UPPERCASED TEXT
.text-capitalize
Indicates capitalized text: CapiTaliZed
Text
<abbr>
The <abbr> element indicates an
abbreviation or acronym.
Abbreviations with a title attribute have
a dotted bottom border and a help
cursor on hover, providing additional
context on hover.
146

.initialism
Displays the text inside the <abbr>
element in a slightly smaller font size
<address> Presents contact information
<blockquote>
Indicates blocks of content from
another source
.blockquote-reverse
Indicates a blockquote with right-
aligned content
<ul> Indicates an unordered list
<ol> Indicates an ordered list
.list-unstyled
Removes the default list-style and left
margin on list items (works on both
<ul> and <ol>). This class only applies
to immediate children list items (to
remove the default list-style from any
nested lists, apply this class to any
nested lists as well)
147

.list-inline Places all list items on a single line
<dl> Indicates a description list
.dl-horizontal (deprecated)
Lines up the terms and descriptions in
the <dl> element side-by-side. Starts
off like default <dl>s, but when the
browser window expands, it will line up
side-by-side
148

◼ Code
149
<code> Indicates inline snippets of code:
span, div
<pre> Indicates multiple lines of code
<samp>
Indicates sample output from a
computer program: Sample output
<var> Indicates variables: x = ab + y

CSS Buttons Reference
◼ Button Colors
◼ Button Sizes
◼ Active/Disabled Buttons
150

Button Classes
The classes below can be used to style any <a>, <button>, or <input>
element:
151
Class Description
.btn Adds basic styling to any button
.btn-primary
Provides extra visual weight and identifies the
primary action in a set of buttons
.btn-success Indicates a successful or positive action
.btn-info
Contextual button for informational alert
messages
.btn-warning
Indicates caution should be taken with this
action
.btn-danger
Indicates a dangerous or potentially negative
action

Class Description
.btn-link
Makes a button look like a link (will still
have button behavior)
.btn-lg Makes a large button
.btn-sm Makes a small button
.btn-xs (deprecated) Makes an extra small button
.btn-block (deprecated)
Makes a block-level button (spans the
full width of the parent element)
.active Makes the button appear pressed
.disabled Makes the button disabled
152

CSS Forms Reference
◼ Bootstrap 's Default Settings
Individual form controls automatically receive some global styling with
Bootstrap .
All textual <input>, <textarea>, and <select> elements with
class="form-control" are set to width: 100%; by default.
Standard rules for Bootstrap forms:
◼ Add role="form" to the <form> element (deprecated)
◼ Wrap labels and form controls in a <div> element with class="form-
group" (needed for optimum spacing) (deprecated)
◼ Add class="form-control" to all textual <input>, <textarea>, and
<select> elements
153

◼ The following example creates a simple Bootstrap form with two
input fields, one checkbox, and a submit button:
◼ Bootstrap Form Example
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<div id="emailHelp" class="form-text">We'll never share your email</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
154

Bootstrap Form Example
155

◼ Text
Add meaning through text-colors with the classes below. Links will
darken on hover:
156
Class Description
.text-muted Text styled with class "text-muted"
.text-primary Text styled with class "text-primary"
.text-success Text styled with class "text-success"
.text-info Text styled with class "text-info"
.text-warning Text styled with class "text-warning"
.text-danger Text styled with class "text-danger"

◼ Background
Add meaning through background-colors with the classes below:
157

◼ Other (deprecated)
158
Class Description
.pull-left Floats an element to the left
.pull-right Floats an element to the right
.center-block
Sets an element to display:block
and center
.clearfix Clears floats
.show Forces an element to be shown
.hidden Forces an element to be hidden
.sr-only
Hides an element to all devices
except screen readers
.sr-only-focusable
Combine with .sr-only to show the
element again when it is focused
(e.g. by a keyboard-only user)
.text-hide
Helps replace an element's text
content with a background image

159
CSS Images Reference
◼ Bootstrap Images

◼ <img> Classes
The classes below can be used to style any image:
◼ Responsive Images
Images come in all sizes. So do screens. Responsive images automatically
adjust to fit the size of the screen.
Create responsive images by adding an .img-fluid class to the <img> tag. The
image will then scale nicely to the parent element.
The .img-fluid class applies max-width: 100%; and height: auto; to the image:
<img class="img-fluid" alt=“New York">
160
Class Description
.rounded
Adds rounded corners to an image
(not available in IE8)
.rounded-circle
Shapes the image to a circle (not
available in IE8)
.img-thumbnail Shapes the image to a thumbnail
.img-fluid
Makes an image responsive (will
scale nicely to the parent element)

CSS Tables Reference
◼ <table> Classes
Use the classes below to style any table:
161
Class Description
.table
Adds basic styling (light padding and
only horizontal dividers) to any <table>
.table-striped
Adds zebra-striping to any table row
within <tbody> (not available in IE8)
.table-bordered
Adds border on all sides of the table
and cells
.table-hover
Enables a hover state on table rows
within a <tbody>
.table-sm
Makes table more compact by cutting
cell padding in half

◼ <tr>, <th> and <td> Classes
Use the classes below to color table rows or cells:
162
Class Description
.active
Applies the hover color to a particular
row or cell
.success
Indicates a successful or positive
action
.info
Indicates a neutral informative
change or action
.warning
Indicates a warning that might need
attention
.danger
Indicates a dangerous or potentially
negative action

◼ Responsive Tables
Responsive tables allow tables to be scrolled horizontally with ease.
Make any table responsive across all viewports by wrapping a .table
with .table-responsive. Or, pick a maximum breakpoint with which to
have a responsive table up to by using .table-responsive{-sm|-md|-lg|-
xl|-xxl}.
◼ Example
<div class="table-responsive">
<table class="table">
...
</table>
</div>
163

03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf

03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf

Recommended

Recommended

More Related Content

Similar to 03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf

Similar to 03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf (20)

Recently uploaded

Recently uploaded (20)

03bnnbnbbnbnnbbnnb.IvanAWD_Bootstrap.pdf