Jola Sonowo's Blog

Jola Sonowo's Blog

Bootstrap II 👀👀

Bootstrap II 👀👀

more on bootstrap! learn all about alerts, tables, jumbotrons and more!

Hey everyone,

Let's get into the next part of Bootstrap!

We're going to learn about icons, alerts, tables and jumbotrons.

I'm sure you're as excited as I am!!

Let's dive in:

Starting with:

I. Icons

what are icons? Icons are images used to help guide users when navigating a website. For example the pointer.

We get icons using the fa-fa href="cdnjs.cloudflare.com/ajax/libs/font-awesome.."</code from this website. Icons are placed in the i tag.

II. Alert

Alert is a class used to give an alert to the user.

Alerts are created with the .alert class , followed by one of the contextual classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark

III. Table

The .table class adds basic styling to a table.

table.png

The .table-striped class adds zebra-stripes to a table

striped.png

The .table-bordered class adds borders on all sides of the table and cells

bordered.png

The .table-hover class adds a hover effect (grey background color) on table rows

hover.png

The .table-dark class adds a black background to the table:

Combine .table-dark and .table-striped to create a dark, striped table:

dark striped.png

The .table-borderless class removes borders from the table:

borderless.png

The .table-sm class make the table smaller by cutting cell padding in half:

small.png

The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally):

responsive.png

IIIb. Contextual Classes

Contextual classes can be used to colour the whole table table, the table rows tr or table cells td.

The contextual classes that can be used are:

explain.png

contextual.png

Lastly, we're going to learn about jumbotron!!!

A jumbotron indicates a big grey box for calling extra attention to some special content or information.

Use a div element with class .jumbotron to create a jumbotron.

To create a full-width jumbotron without rounded borders, add the .jumbotron-fluid class and a .container or .container-fluid inside of it:

jumbo.png

That's all for now!! Thanks for reading! 🥰🥰 Stay tuned for more 🎉🎉

 
Share this