4.6 Components

Overview and Examples

Components are reusable features that are built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Some common examples of components that you might use are:

1. Lists (there are pre-made classes for these)
2. Jumbotrons
3. Buttons (you can use your own classes to override the default styles)

• Slides
• Documentation

Customizing a Component

We can customize any component by using the class name in our css file and “re-set” the properties.

Section 4.7 has more information on how you can figure out which classes to use.

The example below shows how you can customize a jumbotron.

Jumbotron Example

To change its properties use the jumbotron class:

.jumbotron{
    background-color:#cc0000;
    font-family:'Papyrus',sans-serif;
    background-image:url('whatever.jpg');
    border-radius:0px;
}

You can also set a background image for your jumbotron.

To do that, you need to use the appropriate path to the image file. Remember, location of images is all relative so you need the ../ to go out of the CSS folder and then into the images folder.

.jumbotron{
    background-image:url('../images/whatever.jpg');
}

There are also many ways you can modify your background image. Here are a few examples:

background-size:200px 400px;
background-repeat:no-repeat;
background-position:0px -200px;
background-size:cover;

W3Schools has more details on modifying background images.

• Documentation

!important

Some classes will not take effect unless you use !important.

Try it if the CSS property alone doesn't make the change. If you still don't see the change, go back and check your code for mistakes.

.bg-dark{
    background-color:#cc0000 !important;
}