Let's explore the classes that Bootstrap provides to help us style tables. Make the following changes to the code above and see what happens:

Give the table a class of table.

Add a second class to the table, called table-inverse. In other worse, your class attribute should have a value of "table table-inverse".

Remove the table-inverse class from the table, and add a class of thead-inverse to the thead.

Add a class of table-striped to the table. Now you should see alternating rows colored differently!

Add a class of table-bordered to the table to add borders around each table cell.

Add a class of table-hover to the table to add styles to the rows when you hover on them.

Add a class of table-sm to the table.

You can style table rows based on the color palettes we've seen for alerts and buttons! Try adding some contextual classes to your trs: for example, table-primary, table-secondary, table-success, and so on.

To read more about working with tables in Bootstrap, check out the docs.

Forms

Bootstrap also gives you a whole suite of classes for building forms, both horizontally and with a block layout. Here's a basic example of a form styled with Bootstrap:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Bootstrap Form Example</title><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"crossorigin="anonymous"></head><body><divclass="container"><h1>Add an Animal!</h1><form><divclass="form-group"><labelfor="name">Name</label><inputtype="text"class="form-control"id="name"placeholder="What's the name of the animal?"></div><divclass="form-group"><labelfor="type">Animal Type</label><selectclass="form-control"id="type"><option>Cat</option><option>Dog</option><option>Horse</option><option>Lemur</option><option>Other</option></select></div><divclass="form-group"><labelfor="age">Age</label><inputtype="number"class="form-control"id="age"placeholder="What's the age of the animal?"min="0"max="100"step="1"value="0"></div><divclass="form-group"><labelfor="fav-food">Favorite Food</label><inputtype="text"class="form-control"id="fav-food"placeholder="What's the favorite food of the animal?"></div><buttontype="submit"class="btn btn-primary">Submit</button></form></div></body></html>

The most important thing to remember when building forms with Bootstrap is to use the form-group for each part of the form. The elements used to collect information from the user (input, select, and so on) are also typically given a class of form-control.

You can also align form groups horizontally by giving the groups a class of row, and giving elements inside of the group column classes. For labels, you should also add the col-form-label class to ensure that the label is vertically aligned properly.

Here's the same form as above, styled horizontally:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Bootstrap Form Example</title><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"crossorigin="anonymous"></head><body><divclass="container"><h1>Add an Animal!</h1><form><divclass="form-group row"><labelfor="name"class="col-3 col-form-label">Name</label><inputtype="text"class="form-control col-9"id="name"placeholder="What's the name of the animal?"></div><divclass="form-group row"><labelfor="type"class="col-3 col-form-label">Animal Type</label><selectclass="form-control col-9"id="type"><option>Cat</option><option>Dog</option><option>Horse</option><option>Lemur</option><option>Other</option></select></div><divclass="form-group row"><labelfor="age"class="col-3 col-form-label">Age</label><inputtype="number"class="form-control col-9"id="age"placeholder="What's the age of the animal?"min="0"max="100"step="1"value="0"></div><divclass="form-group row"><labelfor="fav-food"class="col-3 col-form-label">Favorite Food</label><inputtype="text"class="form-control col-9"id="fav-food"placeholder="What's the favorite food of the animal?"></div><buttontype="submit"class="btn btn-primary">Submit</button></form></div></body></html>

There's a lot more you can do with the styling of your forms using Bootstrap. Check out the docs if you'd like to dig deeper. For now, though, it's important to remember that you shouldn't worry about trying to memorize the syntax, class names, and so on. That's what the documentation is for! Instead, if you want to practice, use the documentation as a starting point. Try building a couple of forms based on the docs, playing around with classes, and seeing what sorts of variants you can come up with.