Scribd
Upload
6 views

bootstrap presentation

bootstrap presentation wt bca sem-1 2024-2028 session

Uploaded by

golu9354singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

bootstrap presentation

bootstrap presentation wt bca sem-1 2024-2028 session

Uploaded by

golu9354singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 63

BOOTSTRAP

• Bootstrap is a free front-end framework for


faster and easier web development

• Build fast, responsive sites with Bootstrap

• to easily create responsive designs


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
to large desktop
Why use bootstrap?(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
• Browser compatibility: Bootstrap is compatible with all modern
browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and
Opera)
VERSIONS OF BOOTSTRAP

• BOOTSTRAP 3 (RELEASED IN 2013)


• BOOTSTRAP 4(RELEASED IN 2018)
• BOOTSTAP 5(RELEASED IN 2021)
• Bootstrap 5 is the newest version of Bootstrap; with new components,
faster stylesheets, more responsiveness etc.
WHERE TO GET BOOTSTRAP

• DOWNLOAD BOOTSTRAP FROM


getbootstrap.com
Linking web design
• To add a link to Bootstrap, you need to: Go to get
bootstrap and click Getting Started. There you will find
the below CDN links.
• Copy the links & paste it inside the tag. CSS link: <link
href=”https://cdn.jsdelivr.net/npm/bootstrap@5.
• Example:<link rel="stylesheet" href="https://maxcdn.boots
trapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Containers
Containers are a fundamental building block of
Bootstrap that contain, pad, and align your content
within a given device or viewport.
Containers can be nested, but most layouts do not
require a nested container.

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
Example for container classes
Example for container-fluid classes
GRID
A grid system is a two-dimensional framework of intersecting lines that designers use to align
and lay out design elements, such as text, images, and functions, on a page or screen.
❖Bootstrap grid allows only coloumns in a page.
❖We make its width upto 12 or the sum of every column should be
12 i.e. a column by size 4 and a column by size 8 therefore the sum
of 4&8 is 12.
4 classes of grid
1. XS(EXTRA SMALL): for phone screens<768px
2. SM(SMALL):for tablets screen>=768px
3. MD(MEDIUM):for small laptops>=992px
4. LG(LARGE):for laptop & desktops>=1200px
TABLE
➢To make a table we use : .table
➢To add zebra stripes : .table- striped
➢To add boarder : .table-boarder
➢To add greyish background colour: .table-hover
➢To cut all cell padding in half: .table-condensed
Contextual cover
It adds colour in a table: <tr> for table rows ; <td> for table cells ;
class description
1. Active greyish colour
2. Success positive/green colour
3. Info change of action/ blue colour
4. Warning need attention/yellow colour
5. Danger negative action/red colour
images
There are 3 types of shapes:
➢Round corners: .img-rounded
➢Circle : .img-circle
➢Thumbnail : .img-thumbnail
How to use:
<img src= class=”img-circle” >
Typography
Typography is a feature of Bootstrap for styling and formatting the text content. It is
used to create customized headings, inline subheadings, lists, paragraphs, aligning,
adding more design-oriented font styles, and much more.
• Bootstrap's global default font-size is 14px, with a line-height ( the vertical distance
between two lines of type) of 1.428.
• This is applied to the <body> element and all paragraphs (<p>).
• In addition, all <p> elements have a bottom margin that equals half their computed
line-height (10px by default).
Features of typography
• Creating customized headings
• Creating inline subheadings
• Creating lists
• Creating paragraphs
• Aligning text
• Adding more design-oriented font styles
• Highlighting text using the mark element
• Rendering text as underlined, bold, or fine print
Example for heading
<small>
Example for <mark>
Example of <abbr>
<blockquote>
A blockquote in Bootstrap is a way to present
content from another resource, website, or third
party on your website or portal. It adds a vertical
line at the right side of the content.
Example
To show the quote on the right, use the .blockquote-reverse class:
<dl>
In Bootstrap, the dl-horizontal class is used in
definition lists. In a definition list, each list item can
consist of both the <dt> and the <dd>
elements. The <dt> stands for definition term, and
the <dd> is the definition of the <dt>.
<code>
Inline snippets of code should be embedded in the
code element
<kbd>
To indicate input that is typically entered via the
keyboard, use the kbd element
<pre>
The <pre> tag in Bootstrap defines preformatted
text. The text in a <pre> element is displayed in a fixed-
width font, and the text preserves both spaces and line
breaks. The text will be displayed exactly as written in
the HTML source code.
Contextual Colors and
Backgrounds
Bootstrap also has some contextual classes that can be
used to provide "meaning through colors".
The classes for text colors are: .text-muted , .text-
primary, .text-success, .text-info , .text-warning,
and .text-danger
More Typography Classes
Creating a Jumbotron
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.
Tip: Inside a jumbotron you can put nearly any valid HTML, including other
Bootstrap elements/classes.
Jumbotron Inside Container
Jumbotron Outside Container
Creating a Page Header
A page header is like a section divider.
The .page-header class adds a horizontal line under the heading (+ adds some
extra space around the element).
Use a <div> element with class .page-header to create a page header:
Bootstrap Glyphicons
Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.
Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
Glyphicon Syntax
A glyphicon is inserted with the following syntax:

The name part in the syntax above must be replaced with the proper name of the
glyphicon.
Example

You might also like