tables class in bootstrap

1. Table classes in Boot starp

2. Basic Table
 A basic Bootstrap table has a light padding and
only horizontal dividers.
 The .table class adds basic styling to a table:

3. <div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling
(light padding and only horizontal
dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ram</td>
<td>sing</td>
<td>ram@gmail.com</td>
</tr>
<tr>
<td>Krishan</td>
<td>kumar</td>
<td>kr@gmail.com</td>
</tr>
<tr>
<td>Roshan</td>
<td>kumar</td>
<td>rosh@gmail.com</td>
</tr>
</tbody>
</table>
</div>
the .table class adds basic styling (light
padding and only horizontal dividers) to a
table:

4. Striped Rows
The .table-striped class adds zebra-stripes to a table:
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>

5. Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:
<table class="table
table-bordered">
The .table-bordered
class adds borders to
a table:

6. Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows:
<p>The .table-hover class
enables a hover state on
table rows:</p>
<table class="table table-
hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
Condensed Table
The .table-condensed class makes a
table more compact by cutting cell
padding in half:
<table class="table table-
condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>

7. Contextual Classes
Contextual classes can be used to color table rows (<tr>) or table
cells (<td>):
Contextual classes can be used to color table rows or table
cells. The classes that can be used are: .active, .success,
.info, .warning, and .danger.
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def@somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr class="warning">

8. Bootstrap CSS Classes
 Many CSS frameworks make heavy use of
CSS classes. For instance, Bootstrap
CSS uses classes to define page elements.
 Let’s see an example of how Bootstrap
uses CSS classes. In Bootstrap CSS, the
CSS class .btn can be used with
the <button> HTML element (as well as
the <a> and <input> elements). Bootstrap
contains CSS that automatically formats
any elements defined with the .btn class a
certain way. Therefore, simply adding the
attribute class=“btn” to an element
changes its appearance.
<button class="btn">Click Me</button><br>
<button class="btn btn-success">Click Me</button><br>
<button class="btn btn-danger">Click Me</button><br>
With CSS classes, Bootstrap
lets us quickly style page
elements by just adding one or
more class names. CSS classes
enable you to format different
types of elements while writing
less code.
 Text
.font-italic
.font-weight-bold
.font-weight-bolder
.font-weight-light
.font-weight-lighter

9. font and feature selection
 Text
Documentation and examples for common text utilities to
control alignment, wrapping, weight, and more.
Text alignment
<p class="text-start">Start aligned text on all
viewport sizes.</p>
<p class="text-center">Center aligned text
on all viewport sizes.</p>
<p class="text-end">End aligned text on all
viewport sizes.</p>
<p class="text-sm-start">Start aligned text on
viewports sized SM (small) or wider.
</p>
<p class="text-md-start">Start aligned text on
viewports sized MD (medium) or
wider.</p>
<p class="text-lg-start">Start aligned text on
viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on
viewports sized XL (extra-large) or
wider.</p>
 Text wrapping and overflow
Wrap text with a .text-
wrap class.
<div class="badge bg-primary text-wrap"
style="width: 6rem;"> This text should wrap.
</div>
Prevent text from wrapping with
a .text-nowrap class.
<div class="text-nowrap bd-highlight"
style="width: 8rem;"> This text should
overflow the parent. </div>

10. Text transform
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Font size
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
Font weight and italics
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

11. 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” will
automatically close the modal.
 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:

12. <!-- 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.

13. <!-- 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:

14. 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">

15. <!-- 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>

16. <!-- 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.

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