Show your data in proper way in website using Content of Bootstrap

One of the most important aspects of Web design usability is the readability of text or data. Readable text affects how users process the information in the content. Bootstrap provides elements of typography to help you make your data look more relevant to scope or domain of your website.

If you’re new to Bootstrap or you don’t know what really it is.. I recommend you to go to my this article to get the entire basic idea of Bootstrap framework.

Typography

You can style and format your text content like headings, paragraphs, block quotes, etc. with Bootstrap.

Headings

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Customizing headings

<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>

Display headings

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Inline text elements

<p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p>

Blockquotes

<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Images

Responsive images

.img-fluid is used set image as responsive image.

<img src="..." class="img-fluid" alt="Responsive image">

Image thumbnails

.img-thumbnail is used to give an image a rounded 1px border appearance.

<img src="..." alt="..." class="img-thumbnail">

Aligning images

It is used to give alignment of an image.

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

Tables

Tables in Bootstrap is used store data in proper way.

<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

classes used in table

with <table>

  • .table To show proper table
  • .table-dark For dark table
  • .table-striped Used to add zebra-striping to any table row within the <tbody>
  • .table-bordered Used for borders on all sides of the table and cells
  • .table-borderless Used for table without border
  • .table-hover Used to enable a hover state on table rows within the <tbody>

with <thead>

  • .thead-dark For dark background in header
  • .thead-light For light background in header

with <tr>, <td>, <th>

  • .table-active
  • [By default]
  • .table-primary
  • .table-secondary
  • .table-success
  • .table-danger
  • .table-warning
  • .table-info
  • .table-light
  • .table-dark

Resposive Tables

.table-responsive is used for across every breakpoint for horizontally scrolling tables.

We can also use breakepoint for Responsive table like .table-responsive-sm

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Figures

Anytime you need to display a bit of content — like a picture with an optional caption, think about using a <figure>.

<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

I hope you’ve found this piece of information helpful. I’d love to hear your feedback!

Thanks for reading! :)

Enthusiastic learner and programmer who loves sharing his knowledge and experiences.