# Bootstrap II 👀👀

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:


<b><i>I. Icons 

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

We get icons using the <Code>fa-fa</code attribute and are referenced <code> href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"</code from this website. Icons are placed in the i tag.

<b><i>II. Alert</b></i>

<b>Alert</b> is a class used to give an alert to the user.

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

<b><i>III. Table</b></i>

The <code>.table</code> class adds basic styling to a table.



![table.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626487219276/8WxaFVUQf.png)


The <code>.table-striped </code> class adds zebra-stripes to a table


![striped.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626487236459/8E_xLhz2r.png)


The <code> .table-bordered</code> class adds borders on all sides of the table and cells


![bordered.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626487250612/ZZzsU69K1.png)


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


![hover.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626487268326/1bcD3irTB.png)


The <code> .table-dark </code>class adds a black background to the table:

Combine <code> .table-dark </code> and <code> .table-striped </code> to create a dark, striped table:


![dark striped.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626487287691/eLZSchVln.png)

The <code> .table-borderless </code> class removes borders from the table:

![borderless.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626487306068/y5Oc-WNT_.png)


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


![small.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626487672223/4z902eQJU.png)



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


![responsive.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626487689617/EfG2tuBim.png)


<b><i>IIIb. Contextual Classes</b></i>

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

The contextual classes that can be used are:



![explain.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626487853286/fS1oL8Edf.png)


![contextual.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626487558845/u5K1-VZxA.png)


Lastly, we're going to learn about <b><i>jumbotron!!!</b></i>


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


Use a <code>div</code> element with class <code>.jumbotron</code> to create a jumbotron.


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



![jumbo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626488452868/8SQwxjj_u.png)




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