Category «Bootstrap»

Bootstrap Progress Bars

Basic Progress Bar A progress bar can be used to show a user how far along he/she is in a process. Bootstrap provides several types of progress bars. A default progress bar in Bootstrap looks like this: 70% Complete To create a default progress bar, add a .progress class to a <div> element: Example <div …

Bootstrap Pagination

Basic Pagination If you have a web site with lots of pages, you may wish to add some sort of pagination to each page. A basic pagination in Bootstrap looks like this: 1 2 3 4 5 To create a basic pagination, add the .pagination class to an <ul> element: Example <ul class=”pagination”> <li><a href=”#”>1</a></li> …

Bootstrap Images

Bootstrap Image Shapes Rounded Corners: Circle: Thumbnail: Rounded Corners The .img-rounded class adds rounded corners to an image (IE8 does not support rounded corners): Example <img src=”cinqueterre.jpg” class=”img-rounded” alt=”Cinque Terre” width=”304″ height=”236″>   Circle   The .img-circle class shapes the image to a circle (IE8 does not support rounded corners): Example <img src=”cinqueterre.jpg” class=”img-circle” alt=”Cinque …

Bootstrap Pager

What is Pager? Pager is also a form of pagination (as described in the previous chapter). Pager provides previous and next buttons (links). To create previous/next buttons, add the .pager class to an <ul> element: Example <ul class=”pager”> <li><a href=”#”>Previous</a></li> <li><a href=”#”>Next</a></li> </ul> Result:   Align Buttons Use the .previous and .next classes to align …

Bootstrap Jumbotron and Page Header

Creating a Jumbotron A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap …

Bootstrap List Groups

Basic List Groups The most basic list group is an unordered list with list items: First item Second item Third item To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item: Example <ul class=”list-group”> <li class=”list-group-item”>First item</li> <li class=”list-group-item”>Second item</li> <li class=”list-group-item”>Third item</li> </ul>   List …

Bootstrap Jumbotron and Page Header

Creating a Jumbotron A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap …

Bootstrap Panels

Panels A panel in bootstrap is a bordered box with some padding around its content: A Basic Panel Panels are created with the .panel class, and content inside the panel has a .panel-body class: Example <div class=”panel panel-default”> <div class=”panel-body”>A Basic Panel</div> </div>   The .panel-default class is used to style the color of the …

Bootstrap Wells

Wells The .well class adds a rounded border around an element with a gray background color and some padding: Basic Well Example <div class=”well”>Basic Well</div>   Well Size Small Well Normal Well Large Well Change the size of the well by adding the .well-sm class for small wells orĀ  .well-lg class for large wells: Example …

Bootstrap Dropdowns

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Dropdown Example Example <div class=”dropdown”> <button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Dropdown Example <span class=”caret”></span></button> <ul class=”dropdown-menu”> <li><a href=”#”>HTML</a></li> <li><a href=”#”>CSS</a></li> <li><a href=”#”>JavaScript</a></li> </ul> </div>   Example Explained The .dropdown class indicates a dropdown menu. To open …