Table classes in Boot starp

Basic Table

A basic Bootstrap table has a light padding and

only horizontal dividers.

The .table class adds basic styling to a table:

<div class="container"> <tbody>
<tr>
<h2>Basic Table</h2> <td>Ram</td>
<p>The .table class adds basic <td>sing</td>
styling (light padding and only <td>ram@gmail.com</td>
</tr>
horizontal dividers) to a
<tr>
table:</p> <td>Krishan</td>
<table class="table"> <td>kumar</td>
<td>kr@gmail.com</td>
<thead> </tr>
<tr> <tr>
<td>Roshan</td>
<th>Firstname</th>
<td>kumar</td>
<th>Lastname</th> <td>rosh@gmail.com</td>
the .table class adds basic styling (light padding
<th>Email</th>
and only horizontal dividers) to a table: </tr>
</tbody>
</tr> </table>
</thead> </div>
Striped Rows
The .table-striped class adds zebra-stripes to a table:
<tbody>
<table class="table table- <tr>
striped"> <td>John</td>
<td>Doe</td>
<thead> <td>john@example.com</td>
</tr>
<tr> <tr>
<td>Mary</td>
<th>Firstname</th> <td>Moe</td>
<td>mary@example.com</td>
<th>Lastname</th> </tr>
<tr>
<th>Email</th> <td>July</td>

</tr> <td>Dooley</td>
<td>july@example.com</td>

</thead> </tr>
</tbody>
</table>
Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:

<table class="table table- The .table-bordered class

bordered"> adds borders to a table:
Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows:

<p>The .table-hover class enables Condensed Table

a hover state on table rows:</p> The .table-condensed class makes a table
more compact by cutting cell padding
in half:
<table class="table table-hover">
<table class="table table-
<thead>
condensed">
<tr> <thead>
<th>Firstname</th> <tr>
<th>Lastname</th> <th>Firstname</th>
<th>Email</th> <th>Lastname</th>
</tr> <th>Email</th>
</thead> </tr>
</thead>
Contextual Classes
Contextual classes can be used to color table rows (<tr>) or table cells (<td>):
<tr class="success">
<td>Success</td>
Contextual classes can be used to color table rows or table <td>Doe</td>
<td>john@example.com</td>
cells. The classes that can be used are: .active, .success,
</tr>
.info, .warning, and .danger. <tr class="danger">
<table class="table">
<td>Danger</td>
<thead>
<tr> <td>Moe</td>
<th>Firstname</th> <td>mary@example.com</td>
<th>Lastname</th> </tr>
<th>Email</th>
<tr class="info">
</tr>
</thead>
<td>Info</td>
<tbody> <td>Dooley</td>
<tr> <td>july@example.com</td>
<td>Default</td>
</tr>
<td>Defaultson</td>
<tr class="warning">
<td>def@somemail.com</td>
</tr>
 Bootstrap CSS Classes
 Many CSS frameworks make heavy use of CSS With CSS classes, Bootstrap lets us
classes. For instance, Bootstrap CSS uses quickly style page elements by just
classes to define page elements. adding one or more class names.
 Let’s see an example of how Bootstrap uses CSS classes enable you to format
CSS classes. In Bootstrap CSS, the CSS different types of elements while
class .btn can be used with
writing less code.
the <button> HTML element (as well as
the <a> and <input> elements). Bootstrap  Text
contains CSS that automatically formats any .font-italic
elements defined with the .btn class a certain
way. Therefore, simply adding the .font-weight-bold
attribute class=“btn” to an element changes its .font-weight-bolder
appearance.
.font-weight-light
<button class="btn">Click Me</button><br>
<button class="btn btn-success">Click Me</button><br>
.font-weight-lighter
<button class="btn btn-danger">Click Me</button><br>
 font and feature selection

Text Text wrapping and overflow

Documentation and examples for common text utilities to control
alignment, wrapping, weight, and more.
Wrap text with a .text-
Text alignment
<p class="text-start">Start aligned text on all viewport
wrap class.
sizes.</p> <div class="badge bg-primary text-wrap"
style="width: 6rem;"> This text should wrap.
<p class="text-center">Center aligned text on all viewport
</div>
sizes.</p>
<p class="text-end">End aligned text on all viewport
sizes.</p>
<p class="text-sm-start">Start aligned text on viewports Prevent text from wrapping
sized SM (small) or wider.
</p>
with a .text-nowrap class.
<p class="text-md-start">Start aligned text on viewports
sized MD (medium) or wider.</p>
<div class="text-nowrap bd-highlight"
<p class="text-lg-start">Start aligned text on viewports
style="width: 8rem;"> This text should
sized LG (large) or wider.</p>
overflow the parent. </div>
<p class="text-xl-start">Start aligned text on viewports
sized XL (extra-large) or wider.</p>
Text transform Font weight and italics
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p> ="fw-bold">Bold text.</p>
<p class
<p class="text-capitalize">CapiTaliZed text.</p>
="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class

Font size
="fw-normal">Normal weight text.</p>
<p class

<p class ="fw-light">Light weight text.</p>

<p class="fs-1">.fs-1 text</p>
<p class ="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fs-2">.fs-2 text</p>

<p class="fs-3">.fs-3 text</p> <p class ="fst-italic">Italic text.</p>

<p class="fs-4">.fs-4 text</p>
="fst-normal">Text with normal font style</p>
<p class
<p class="fs-5">.fs-5 text</p>

<p class="fs-6">.fs-6 text</p>

 Boot Strap Modal
  Bootstrap’s JavaScript modal
plugin to add dialogs to your site
for lightboxes, user notifications,
or completely custom content.
Bootstrap Modals offer a lightweight, multi-purpose
JavaScript popup that’s customizable and responsive.
They can be used to display alert popups, videos, and
images in a website. Bootstrap-based websites can use
Bootstrap modals to showcase, for example, terms and
conditions (as part of a signup process), videos (similar
to a standard light box), or even social media widgets.
 Modals are built with HTML, CSS, and
JavaScript. They’re positioned over everything
else in the document and remove scroll from
the <body> so that modal content scrolls instead.
 Clicking on the modal “backdrop”
automatically close the modal.
will
 Bootstrap only supports one modal window at a
time. Nested modals aren’t supported as we
believe them to be poor user experiences.
 Modals use position: fixed, which can
sometimes be a bit particular about its rendering.
Whenever possible, place your modal HTML in
a top-level position to avoid potential
interference from other elements. You’ll likely
run into issues when nesting a .modal within
another fixed element.
 Once again, due to position: fixed, there are
some caveats with using modals on mobile
devices. 
 Due to how HTML5 defines its
semantics, the autofocus HTML attribute has no
effect in Bootstrap modals. To achieve the same
effect, use some custom JavaScript:
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#myModal">
  Open modal
</button>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>
data-toggle and data-target.
The toggle tells Bootstrap what to do and
the target tells Bootstrap which element is going to open.
So whenever a link like that is clicked,
a modal with an ID of “basic Modal” will appear.
 <!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">

The .fade class adds a transition effect which fades the modal in and out.
the .modal-sm class in Bootstrap to set small modal with less width.

modal-content class defines the modal content

Modal content can be any HTML element (divs, headings, paragraphs, images,
etc.).
<!-- Fading modal -->
<div class="modal fade"></div>

<!-- Modal without animation -->

<div class="modal"></div>

Modal Size
Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for
large modals, or .modal-xl for extra large modals.
Add the size class to the <div> element with class .modal-dialog:
 Scrolling Modal
When you have a lot of content inside the modal, a scrollbar is added to the
page. See the examples below to understand it:
<div class="modal-dialog">

However, it is possible to only scroll inside the modal, instead of the page itself, by adding .modal-dialog-
scrollable to .modal-dialog:

<div class="modal-dialog modal-dialog-scrollable">
 <!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

The .modal-header class is used to define the style for the header

of the modal.

.modal-title class in Bootstrap to set the title of a modal

<div class="bg-primary"></div>
<div class="bg-secondary"></div>
<div class="bg-success"></div>
<div class="bg-danger"></div>
<div class="bg-warning"></div>
<div class="bg-info"></div>
<div class="bg-light"></div>
<div class="bg-dark"></div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>

The .modal-body class is used to define the style for the body of

the modal. 
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
</div>
A modal footer is used to customize the default footer of a modal
dialog.
<body> <!-- Modal body -->
<div class="modal-body">
<div class="container"> Modal body..
<h2>Small Modal</h2>
</div>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data- <!-- Modal footer -->
target="#myModal">
<div class="modal-footer">
Open modal
</button>
<button type="button" class="btn btn-
secondary"
<!-- The Modal -->
data-dismiss="modal">Close</button>
<div class="modal fade" id="myModal"> </div>
<div class="modal-dialog modal-sm">
<div class="modal-content"> </div>
</div>
<!-- Modal Header -->
<div class="modal-header"> </div>
<h4 class="modal-title">Modal
Heading</h4> </div>
<button type="button" class="close" data-
dismiss="modal">&times;</button>
</div> </body>
</html>