Bootstrap II 👀👀
more on bootstrap! learn all about alerts, tables, jumbotrons and more!
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:
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.
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
.table class adds basic styling to a table.
.table-striped class adds zebra-stripes to a table
.table-bordered class adds borders on all sides of the table and cells
.table-hover class adds a hover effect (grey background color) on table rows
.table-dark class adds a black background to the table:
.table-striped to create a dark, striped table:
.table-borderless class removes borders from the table:
.table-sm class make the table smaller by cutting cell padding in half:
.table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally):
IIIb. Contextual Classes
Contextual classes can be used to colour the whole table
table, the table rows
tr or table cells
The contextual classes that can be used are:
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.
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-fluid inside of it:
That's all for now!! Thanks for reading! 🥰🥰 Stay tuned for more 🎉🎉