LAB 2.3

Question 1

<p>This text is muted.</p>

<p>This text is important.</p>

<p>This text indicates success.</p>

<p>This text represents some information.</p>

<p>This text represents a warning.</p>

<p>This text represents danger.</p>

<p>Secondary text.</p>

<p>This text is dark grey.</p>

<p>Default body color (often black).</p>

<p>This text is light grey (on white
background).</p>

<p>This text is white (on white
background).</p>

Answer 1

Text Colors

Question 2

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

Answer 2

Background Colors

Question 3

• A basic Bootstrap 5 table has a light padding and horizontal dividers.
• The .table class adds basic styling to a table:

<table>
<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>

Answer 3

Basic Table

Question 4

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

Answer 4

Striped Rows

Question 5

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

Answer 5

Bordered Table

Question 6

• Adds a hover effect (grey background color) on table rows

Answer 6

Hover Rows

Question 7

• adds a black background to the table

Answer 7

Black / Dark Table

Question 8

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

Answer 8

Dark Striped Table

Question 9

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

Answer 9

Hoverable Dark Table

Question 10

• removes borders from the table

Answer 10

Borderless Table

Question 11

• can be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>)

<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>
<td>Primary</td>
<td>Joe</td>
<td>joe@example.com</td>
</tr>
<tr>
<td>Success</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Danger</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>Info</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>Warning</td>
<td>Refs</td>
<td>bo@example.com</td>
</tr>
<tr>
<td>Active</td>
<td>Activeson</td>
<td>act@example.com</td>
</tr>
<tr>
<td>Secondary</td>
<td>Secondson</td>
<td>sec@example.com</td>
</tr>
<tr>
<td>Light</td>
<td>Angie</td>
<td>angie@example.com</td>
</tr>
<tr>
<td>Dark</td>
<td>Bo</td>
<td>bo@example.com</td>
</tr>
</tbody>
</table>

Answer 11

Contextual Classes

Question 12

Blue: Indicates an important action

Answer 12

.table-primary

Question 13

Green: Indicates a successful or positive action

Answer 13

.table-success

Question 14

Red: Indicates a dangerous or potentially negative action

Answer 14

.table-danger

Question 15

Light blue: Indicates a neutral informative change or action

Answer 15

.table-info

Question 16

Orange: Indicates a warning that might need attention

Answer 16

.table-warning

Question 17

Grey: Applies the hover color to the table row or table cell

Answer 17

.table-active

Question 18

Grey: Indicates a slightly less important action

Answer 18

.table-secondary

Question 19

Light grey table or table row background

Answer 19

.table-light

Question 20

Dark grey table or table row background

Answer 20

.table-dark

Question 21

• You can also use any of the contextual classes to only add a background color to the table header

Answer 21

Table Head Colors

Question 22

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

Answer 22

Small table

Question 23

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

Answer 23

Responsive Tables

Question 24

< 576px

Answer 24

.table-responsive-sm < 576px

Question 25

< 768px

Answer 25

.table-responsive-md

Question 26

< 992px

Answer 26

.table-responsive-lg

Question 27

< 1200px

Answer 27

.table-responsive-xl

Question 28

< 1400px

Answer 28

.table-responsive-xxl

Question 29

• The .rounded class adds rounded corners to an image:

<img></img>

Answer 29

Rounded Corners

Question 30

• the .rounded-circle class shapes the image to a circle

<img></img>

Answer 30

Circle

Question 31

• The .img-thumbnail class shapes the image to a thumbnail (bordered)

<img></img>

Answer 31

Thumbnail

Question 32

• float an image to the left with the .float-start class or to the right with .float-end

<img></img>
<img></img>

Answer 32

Aligning Images

Question 33

• Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:

<img></img>-

Answer 33

Centered Image

Question 34

• Images come in all sizes. So do screens. automatically adjust to fit the size of the screen.
• Create responsive images by adding an .img-fluid class to the <img></img> tag. The image will then scale nicely to the parent element.
• The .img-fluid class applies max-width: 100%; and height: auto; to the image:

<img></img>

Answer 34

Responsive Images

Question 35

• was introduced in Bootstrap 3 as a big padded box for calling extra attention to some special content or information.
• are no longer supported in Bootstrap 5. However, you can use a <div> element and add special helper classes together with a color class to achieve the same effect

<div>
<h1>Jumbotron Example</h1>
<p>Lorem ipsum...</p>
</div>

Answer 35

Jumbotron

Question 36

Bootstrap 5 provides an easy way to create predefined alert messages

<div>
<strong>Success!</strong> Indicates a successful or positive
action.
</div>

Answer 36

Alerts

Question 37

Add the .alert-link class to any links inside the alert box to create “matching colored links”

<div>
<strong>Success!</strong> You should <a>read
this message</a>.
</div>

Answer 37

Alert Links