Bootstrap Classes

Classes:

.active:

1.     Adds a background color to the table row.

2.     Adds a background color to the active link in a default navbar.

3.     Adds a blue background color to the active list item in a list group.

4.     Adds a background color to simulate a "pressed" button.

5.     Adds a background color to the active pagination link (to highlight the current page).

It used in different categories i.e. Table , Navbar, List Group , Buttons, Pagination e.t.c.

            .btn:

                   Use to create a basic button (gray background and rounded corners).

            .btn-default:

                   Use to create default button. White background and grey border.

            .btn-group:

                   Use to create Groups buttons together on a single line.

.btn-group-justified:

          Use to makes a group of buttons span the entire width of the screen.

.checkbox:

                   Use to create container for checkboxes.

            .checkbox-inline:

                   Use to makes multiple checkboxes appear on the same line.

            .dropdown:

Creates a toggle able menu that allows the user to choose one value from a predefined list.

            .dropdown-header:

                   Used to add headers inside the dropdown menu.

            .dropdown-menu:

Adds the default styles for the dropdown menu container.

           

.dropdown-toggle:

                   Used on the button that should hide and show (toggle) the dropdown menu.

            .embed-responsive:

Container for embedded content. Makes videos or slideshows scale properly on any device.

            .form-control:

Used on input, text area, and select elements to span the entire width of the page and make them responsive.

            .form-group:

                   Container for form input and label.

            .form-inline:

                   Makes a form left-aligned with inline-block controls.

            .form-horizontal:

                   Aligns labels and groups of form controls in a horizontal layout.

            .glyphicon:

Creates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halflings set.

            .icon-bar:

                   Used in the navbar to create a hamburger menu (three horizontal bars).

            .icon-next:

Unicode icon (arrow pointing right), used in carousels. This is often replaced with a glyphicon.

            .icon-prev:

Unicode icon (arrow pointing left), used in carousels. This is often replaced with a glyphicon.

            .input-group:

Container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".

            .nav .navbar-nav:

Used on a <ul> container that contains the list items with links inside a navigation bar.

            .navbar:

                   Creates a navigation bar.

            .navbar-brand:

Added to a link or a header element inside the navbar to represent a logo or a header.

            .pagination:

Creates a pagination (Useful when you have a web site with lots of pages. used on <ul> elements).

            .progress-bar:

                   Creates a progress bar.

Comments

Popular Posts