Scribd
Upload
27 views24 pages

Bootstrap

The document provides instructions on how to create a basic web page using Bootstrap. It covers including the necessary HTML boilerplate, adding containers and grids, and basic components like buttons, forms, navbars and tables. Key aspects include using the container class to set widths, grid classes to layout content, and component classes for common elements.

Uploaded by

lovetube
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
27 views24 pages

Bootstrap

The document provides instructions on how to create a basic web page using Bootstrap. It covers including the necessary HTML boilerplate, adding containers and grids, and basic components like buttons, forms, navbars and tables. Key aspects include using the container class to set widths, grid classes to layout content, and component classes for common elements.

Uploaded by

lovetube
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/ 24

Create Your First Web Page With Bootstrap

• Bootstrap 5 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 title and character
set:
• <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
  </head>
</html>
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.
Container classes

There are two container classes to choose from:


1.The .container class provides a responsive fixed width container
2.The .container-fluid class provides a full width container, spanning the entire
width of the viewport
Note that its width (max-width) will change on different screen

Extra Small Medium Large Extra XXL


small ≥576px ≥768px ≥992px Large ≥1400px
<576px ≥1200px
max- 100% 540px 720px 960px 1140px 1320px
width
Container Padding
By default, containers have left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding
and margins to make them look even better. For example, .pt-5 means "add a large top padding":

Example
<div class="container pt-5"></div>
• The classes are named using the format {property}{sides}-
{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl,
and xxl.
• Where property is one of:
• m - for classes that set margin
• p - for classes that set padding
• 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
• 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
• s - (start) for classes that set margin-left or padding-left in LTR, margin-
right or padding-right in RTL
• e - (end) for classes that set margin-right or padding-right in LTR, margin-
left or padding-left in RTL
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element
• <div class="container p-5 my-5 border"></div>

<div class="container p-5 my-5 bg-dark text-


white"></div>

<div class="container p-5 my-5 bg-primary text-


white"></div>
You can also use the .container-sm|md|lg|xl classes to determine when the container should be
responsive.
The max-width of the container will change on different screen sizes/viewports:

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
Bootstrap grid
Grid Classes
The Bootstrap grid system has six classes:
•.col- (extra small devices - screen width less than 576px)
•.col-sm- (small devices - screen width equal to or greater than 576px)
•.col-md- (medium devices - screen width equal to or greater than 768px)
•.col-lg- (large devices - screen width equal to or greater than 992px)
•.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
•.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you want to set the same widths for sm and md, you only need to specify sm.
Basic Structure of a Bootstrap Grid

• <!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->


<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
• The following example shows how to create four equal-width
columns starting at tablets and scaling to extra large desktops. On
mobile phones or screens that are less than 576px wide, the
columns will automatically stack on top of each other:
• <div class="row">
• <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
• <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
• <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
• <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
• </div>
• </div>
Bootstrap  Buttons

• <button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn
btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Button Sizes

Use the .btn-lg class for large buttons or .btn-


sm class for small buttons:

<button type="button" class="btn btn-primary
btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary
btn-sm">Small</button>
Basic Dropdown

• <div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-
toggle" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>
Bootstrap  Navs

• <ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
• For vertical links
• <ul class="nav flex-column">
Bootstrap  Forms

• Stacked Form
• <form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter
email" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter
password" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
Form Row/Grid (Inline Forms)

• <form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-
control" placeholder="Enter email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-
control" placeholder="Enter password" name="pswd">
    </div>
  </div>
</form>
Bootstrap  Tables

A basic Bootstrap 5 table has a light padding and horizontal dividers.


The .table class adds basic styling to a table:
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
• Striped Rows
The .table-striped class adds zebra-stripes to a table:
• <table class="table table-striped">
Bordered Table
• The .table-bordered class adds borders on all sides of the table and
cells:
<table class="table table-bordered">
• Hover Rows
The .table-hover class adds a hover effect (grey background color) on
table rows:
• Black/Dark Table
The .table-dark class adds a black background to the table:
<table class="table table-dark">
• Responsive Tables
• The .table-responsive class adds a scrollbar to the table when needed
(when it is too big horizontally):
• You can also decide when the table should get a scrollbar, depending
on the screen width:
• <div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

You might also like