Bootstrap SLIDES for web development course

What is 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.
• Bootstrap is the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-first web sites.
• Bootstrap is completely free to download and use!
• Advantages of Bootstrap:
• 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)

What is Bootstrap?
• 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
• Bootstrap is famous for being developed with components that have the
ability to follow the property of responsive designs
• Responsive Design is about using CSS and HTML to resize, hide, shrink,
enlarge, or move the content to make it look good on any screen
• Responsive Design allow your page works for computer, tablets and
mobile phones.

What is Bootstrap?
• In other words, bootstrap is a collection of CSS classes and JavaScript
functions the you get ready to use and will not worry about write code
like this:

First Bootstrap Page
• You will need to include three files:
• bootstrap.min.css
• jquery.min.js
• bootstrap.min.js
• You must download it and include in you page
• For this example, we include from the Internet

Where to Get Bootstrap?
• There are two ways to start using Bootstrap on your own web site.
• Download Bootstrap from getbootstrap.com
• If you want to download and host Bootstrap yourself, go to
getbootstrap.com, and follow the instructions there.
• Include Bootstrap from a CDN
• If you don't want to download and host Bootstrap yourself, you can include
it from a CDN (Content Delivery Network).
• MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You
must also include jQuery.

Bootstrap CDN
• You must include the following Bootstrap’s CSS, JavaScript, and jQuery from MaxCDN
into your web page.
• 
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/
bootstrap.min.css">
•
• 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/
bootstrap.min.js"></script>
• 
<script src="https://code.jquery.com/jquery-latest.js"></script>

• Include the HTML5 doctype at the beginning of the page,
along with the lang attribute and the correct character set

• Meta viewport tag ensure proper rendering and touch
zooming
• Width of the page to follow the screen-width of the device and
initial zoom level to default zoom level of device
• User will have a better experience, thus will not need zoom the
page to view page information

Create Web Page with Bootstrap
• Bootstrap is mobile-first
• 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:
• <meta name="viewport" content="width=device-width, initial-scale=1">
• 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).
• The initial-scale=1 part sets the initial zoom level when the page is first
loaded by the browser.

• Bootstrap has a concept of containing element to wrap site
contents

Containers
• 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.
Note: Containers are not nestable (you cannot put a container inside
another container).

Bootstrap Grids
• Bootstrap's grid system allows up to 12 columns across the page
• You can divide the container in rows and each row in columns with space
multiple of the 12

The Bootstrap grid system has four classes:
xs/sm (for phones)
md (for tablets)
lg (for desktops)
xl (for larger desktops)
The classes above can be combined to create more dynamic and flexible
layouts.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
// Large devices (desktops, 992px and up)
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap Grids
• In the bellow example, we divide the space inside the container in 1 row
and this row in 3 columns with the same side. 4+4+4 = 12
• You can use any combination that the sum be equal to 12.

Bootstrap Grids
• Bootstrap’s grid system allows up to 12 columns across the
page.
• 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>
• Bootstrap's grid system is responsive, and the columns will re-
arrange automatically depending on the screen size.

<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
• 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 Grids
• Responsive Bootstrap's grid system with 3 columns
small screens big screens

Spacing
Bootstrap includes a wide range of shorthand responsive margin and padding
utility classes to modify an element’s appearance.
The classes are named using the format {property}{sides}-
{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Where property is one of:
• m - for classes that set margin
• p - for classes that set padding
Where sides is one of:
• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom

Spacing - Continued
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto
(You can add more sizes by adding entries to the $spacers Sass map variable.)

Sizing
Easily make an element as wide or as tall (relative to its parent) with our width
and height utilities.

Border
Reference: https://getbootstrap.com/docs/4.0/utilities/borders/

Border-color.

Border-radius.

Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and
morewithafullsuiteofresponsiveflexboxutilities.Formorecompleximplementations,customCSS
maybenecessary.
• Apply display utilities to create a flexbox container and transform direct children
elements into flex items. Flex containers and items are able to be modified further with
additional flex properties.
• e.g.
 .d-flex
 .d-inline-flex
• Set the direction of flex items in a flex container with direction utilities. In most cases
you can omit the horizontal class here as the browser default is row. However, you may
encounter situations where you needed to explicitly set this value (like responsive
layouts).
• Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to
start the horizontal direction from the opposite side.
Direction

Typography
Documentation and examples for Bootstrap typography, including global settings,
headings, body text, lists, and more
Headings
<p class="h1">h1. Bootstrap heading</p>
Output

Inline Text Elements
Output
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Lists
unstyled
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
Remove the default list-style and left margin on list items (immediate children
only). This only applies to immediate children list items, meaning you will
need to add the class for any nested lists as well.
inline

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-
reverse to start the horizontal direction from the opposite side.

Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical
direction from the opposite side.

Justify-Content
 .justify-content-start
 .justify-content-end
 .justify-content-center
 .justify-content-between
 .justify-content-around

Align-items
 .align-items-start
 .align-items-end
 .align-items-center
 .align-items-baseline
 .align-items-stretch

Bootstrap Table
• 4 main classes:
• .table
• .table-striped
• .table-bordered
• .table-hover
• 5 contextual classes:
• .active
• .success
• .info
• .warning
• .danger

Bootstrap Images
3 main classes:
• . rounded
• . rounded-circle
• . img-thumbnail

• Rounded Corners
• The .rounded class adds rounded corners to an image (IE8 does not support
rounded corners):
• Circle
• The .rounded -circle class shapes the image to a circle (IE8 does not support
rounded corners):
• Thumbnail
• The .img-thumbnail class shapes the image to a thumbnail:
• Responsive Images
• Images comes in all sizes. So do screens. Responsive images automatically
adjust to fit the size of the screen.
• Create responsive images by adding an .img-responsive class to
the <img> tag. The image will then scale nicely to the parent element.
• The .img-responsive class applies display: block; and max-width:
100%; and height: auto; to the image:
Bootstrap Images

Bootstrap Alerts
• Bootstrap provides an easy way to create predefined alert messages
• Alerts are created with the .alert class, followed by one of the four contextual
classes
• .alert-success
• .alert-info
• .alert-warning
• .alert-danger

• Button Styles
• 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 Buttons
• The button classes can be used on the following elements:
• <a>
• <button>
• <input>

• Button Sizes
• Bootstrap provides four button sizes with the following classes:
• .btn-lg
• .btn-md
• .btn-sm
• .btn-xs
• Active/Disabled Button:
• A button can be set to an active (appear pressed) or a disabled (unclickable) state:
• The class .active makes a button appear pressed, and the class .disabled makes a
button unclickable
• Block Level Buttons
• A block level button spans the entire width of the parent element.
• Add class .btn-block to create a block level button

Bootstrap Buttons
• Bootstrap provides seven styles of buttons:
• To achieve the button styles above, Bootstrap has the
following contextual classes:
• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

Bootstrap Glyphicons
• Bootstrap provides 260 glyphicons from the
Glyphicons Halflings set
• (http://getbootstrap.com/components/)

Bootstrap Labels
• Labels are used to provide information about
something
• Bootstrap create labels with colorful backgrounds to highlight
the text inside de label
• Use the .label class, followed by one of the six
contextual classes .label-default, .label-
primary, .label-success, .label-info, .label-warning
or .label-danger

Bootstrap Panels
• A panel in bootstrap is a bordered box with some padding
around its content that can be use to highlight or
separated some information
• Like other bootstrap elements panel has contextual classes
also (.panel-default, .panel-primary, .panel- success, .panel-
info, .panel-warning, or .panel- danger)

Bootstrap SLIDES for web development course

Recommended

More Related Content

Similar to Bootstrap SLIDES for web development course (20)

Recently uploaded (20)

Bootstrap SLIDES for web development course

Editor's Notes