Scribd
Upload
7 views58 pages

Bootstrap

Bootstrap is an open-source framework for responsive web design, featuring a 12-column grid system and various components to enhance web development speed and consistency. It allows for customization and ensures cross-browser compatibility, with options to download or use a CDN. The document also covers responsive design principles, grid system structures, typography, and basic table formatting within Bootstrap.

Uploaded by

Ritesh bhusara
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views58 pages

Bootstrap

Bootstrap is an open-source framework for responsive web design, featuring a 12-column grid system and various components to enhance web development speed and consistency. It allows for customization and ensures cross-browser compatibility, with options to download or use a CDN. The document also covers responsive design principles, grid system structures, typography, and basic table formatting within Bootstrap.

Uploaded by

Ritesh bhusara
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 58

Web Desgning

Unit-6
Bootstrap
What Is Bootstrap?
Bootstrap is an open source product developed by Mark Otto and Jacob Thornton in August
2011.
it allows for responsive web design and features a robust 12-column, 940px-wide grid.
Bootstrap File Structure
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
├── img/
│ ├── glyphicons-halflings.png
│ ├── glyphicons-halflings-white.png
└── README.md
Why Use Bootstrap?

• Increase development speed.


• Assure responsiveness.
• Prevent repetition between projects
• Add consistency
• Ensure cross browser compatibility
• Large community
• customizable
Bootstrap=(Grid System+ Classes+Components)
Grid System: to make web page responsive
Classes: img-fluid class for making image responsive
<img src=“” class=“img-fluid” alt=“”>
Components: html and css components(button,border,alert)
Bootstrap projects:
1)Zero CSS(Grid System+ Classes+Components)
2)custom design(grid system)
Where to Get Bootstrap?

There are two ways to start using Bootstrap on your own


web site.
• Download Bootstrap from getbootstrap.com and attach
• Include Bootstrap from a CDN
Basic HTML Template
Responsive Design
What Is Responsive Design?
Responsive design is a method for taking all of the existing content that is on the page and
optimizing it for the device that is viewing it.
Bootstrap uses CSS media queries to measure the width of the browser viewport and then, using
conditionals, changes which parts of the stylesheets are loaded. Using the width of the browser
viewport, Bootstrap can then optimize the content using a combination of ratios or widths, but it
mostly relies on min-width and max-width properties.
Bootstrap supports five different layouts
Responsive web design
Container layout

Container Container fluid


• The container class provide a • The container-fluid class
responsive fixed width container provides a full width container,
• Max-width will change on spanning the entire width of
different screen sizes: viewport
• Always span the entire width of
screen(100%)
Bootstrap Grid system
1. Breakpoint: (categorization according to devices width)
2. Container: (wrapper that contain the whole website like div)
website width depends on wrapper width
EX: compare https://passwordsgenerator.net/
and
https://www.lastpass.com/features/password-generator
3. Row
4. Column
Default Grid System
The default Bootstrap grid (see Figure 1-1) system utilizes 12 columns, making for a 940px-wide
container without responsive features enabled. With the responsive CSS file added, the grid adapts to
be 724px or 1170px wide, depending on your viewport.
Below 767px viewports, such as the ones on tablets and smaller devices, the columns become fluid
and stack vertically. At the default width, each column is 60 pixels w
ide and offset 20 pixels to the left.
Basic Grid HTML
• To create a simple layout, create a container with a that has a class of .row and add the appropriate
amount of .span* columns. Since we have a 12-column grid, we just need the amount of .span*
columns to equal 12. We could use a 3-6-3 layout, 4-8, 3-5-4, 2-8-2
<div class=“row”>
<div class=“span8”></div>
<div class=“span4”></div>
Offsetting Columns:
You can move columns to the right using the .offset* class. Each class moves the span over that
width.
Nesting Columns:
To nest your content with the default grid, inside of a .span*, simply add a new .row
with enough .span that it equals the number of spans of the parent container.
Fluid Grid System
• The fluid grid system uses percentages instead of pixels for column
widths
• We can make any row “fluid” by changing .row to .row-fluid. The
column classes stay exactly the same, making it easy to flip between
fixed and fluid grids.
• To offset, you operate in the same way as the fixed grid system—
add .offset* to any column to shift by your desired number of
columns:
Bootstrap flow:
Container>row>column>content(text and images)
Typography
Bootstrap uses Helvetica Neue, Helvetica, Arial, and sansserif in its default font
stack.
These are all standard fonts and are included as defaults on all major computers.
If by chance these fonts don’t exist, they fall back to sansserif (the catchall) to tell
the browser to use the default font for the browser.
All body copy has the font-size set at 14 pixels, with the line-height set at 20 pixels.
The tag has a margin-bottom of 10 pixels, or half the line-height.
Cont…..

• Bootstrap 5 uses a default font-size of 1rem(16px) and its line-height


is 1.5 .
• In addition, all <p> elements have margin-top :0 and margin-
bottom:1rem(16px)
• <h1>…..<h6>: with a bolder font and responsive font size
• Display headings:
<h1>I’m Heading1 h1<small>I’m secondary Heading1 h1 </h1>
Output:
Cont……
<lead>: To add some emphasis to a paragraph, add class="lead". This will give you larger font size,
lighter weight, and a taller line height .
<mark>: heighlight text
<abbr> : dotted border bottom and a cursor with question mark.
Table
Basic Table
STRIPED TABLE
• By adding the table-striped class, we get the stripes on rows within
the <tbody>
Images

You might also like