Working With Bootstrap Buttons

Now there's three different types of elements that can be made to look like buttons: links; of course, the button tag; as well as input fields. To create a button, you simply add the class of btn, and technically, you are supposed to also add a contextual color.

Exploring Table Styles

Tables are great bootstrap styles because they take care of handling something that would be super difficult for you to do by yourself. Simply just add a class of table, and your table looks a lot better and that's because it's adding a bit of padding as well as some underlines underneath each row. Bootstrap also provides a series of sub-classes that you can use to enhance the tables.

Adding Images Classes

Bootstrap has a lot of really useful classes that can help you tame your images. Now if you have an image that is a little bit too big for their column widths. Bootstrap can make those images more responsive if you add an img-responsive class.

Understanding Bootstrap Helper Classes

Bootstrap has a number of miscellaneous classes that can help you take care of common styling needs. First, Bootstrap offers a number of predefined contextual colors. You'll see them reappear in a bunch of other places, as well. You can use them to highlight text colors, or backgrounds.

Using Responsive Utilities

Bootstrap offers a set of responsive utility classes so that you can control the visibility of certain elements. Now these classes allow you to turn visibility on or off, depending on certain responsive breakpoints, or, when the user tries to print out the page. You specify a visibility keyword, and that's visible, or hidden. Then you add a size, and those correspond to the responsive grid, so the options are the same as any of the grid breakpoints, that's XS, SM, MD, LG, and there's also an option to specify print as a breakpoint. Which means that the element will be visible, or hidden, when somebody tries to print out the page. Finally, if you're specifying that something needs to be visible at a specific breakpoint, or for print, you can optionally provide information about the display element for that breakpoint. So you can ask the element to display as a block element, an inline element, or, an in-line block element. Or you can specify that the element only shows up during printing. If you're just hiding an element you don't have to provide this part.

Button Example Code

            <button class="btn btn-default">Default</button>
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-success">Success</button>
            <button class="btn btn-info">Info</button>
            <button class="btn btn-warning">Warning</button>
            <button class="btn btn-danger">Danger</button>
            <button class="btn btn-default">Default</button>
            <button class="btn btn-default btn-lg">Large</button>
            <button class="btn btn-default btn-sm">Small</button>
            <button class="btn btn-default btn-xs">Extra Small</button>
            <button class="btn btn-default btn-block">Block Level</button>
        

Table Styles Example Code

            <div class="container">
            <div class="row">
                <section class="col-xs-12">
            <div class="table-responsive">
                <table class="table table-condensed">
                    <thead>
                    <tr>
                        <th>Class</th>
                        <th>Color</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">Normal</th>
                            <td class="active">Default</td>
                            <td>Default color to a particular row or cell</td>
                        </tr>
                    </tbody>
                </table>
                </div>
                </section>
            </div>
            </div>
        

Image Classes Example Code

        <img src="images/drsanders.jpg" class="img-thumbnail img-responsive center-block" alt="Dr Sanders Photo">
        

Helper Classes Example Code

            <button class="btn btn-default">Default</button>
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-success">Success</button>
            <button class="btn btn-info">Info</button>
            <button class="btn btn-warning">Warning</button>
            <button class="btn btn-danger">Danger</button>
        

Responsive Utilities Example Code

        <p><span class="h1 visible-print-block" style="width: 400px;">Example</span>