tabs test

Category: Uncategorized January 24, 2017

Bootstrap tab panel example (using nav-pills)

Content’s background color is the same for the tab

We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab

We applied clearfix to the tab-content to rid of the gap between the tab and the content

We use css to change the background color of the content to be equal to the tab

Example tab 2 (using standard nav-tabs)

Standard tab panel created on bootstrap using nav-tabs

Notice the gap between the content and tab after applying a background color

add clearfix to tab-content (see the css)

Example 3

Same as example 1 but we have now styled the tab’s corner

We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab

We applied clearfix to the tab-content to rid of the gap between the tab and the content

We use css to change the background color of the content to be equal to the tab