Category «Bootstrap»

Bootstrap Glyphicons

Glyphicons Bootstrap provides 260 glyphicons from the Glyphicons Halflings set. Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc. Here are some examples of glyphicons: Envelope glyphicon: Print glyphicon: Search glyphicon: Download glyphicon: Glyphicon Syntax A glyphicon is inserted with the following syntax: <span class=”glyphicon glyphicon-name“></span> The name part in the syntax above …

Bootstrap Navigation Bar

Navigation Bars A navigation bar is a navigation header that is placed at the top of the page: WebSiteName Home Page 1 Page 2 Page 3 With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class=”navbar navbar-default”>. The following example shows how …

Bootstrap Badges and Labels

Badges Badges are numerical indicators of how many items are associated with a link: News 5 Comments 10 Updates 2 The numbers (5, 10, and 2) are the badges. Use the .badge class within <span> elements to create badges: Example <a href=”#”>News <span class=”badge”>5</span></a><br> <a href=”#”>Comments <span class=”badge”>10</span></a><br> <a href=”#”>Updates <span class=”badge”>2</span></a>   Badges can …

Bootstrap Forms

Bootstrap’s Default Settings Form controls automatically receive some global styling with Bootstrap: All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%. Bootstrap Form Layouts Bootstrap provides three types of form layouts: Vertical form (this is default) Horizontal form Inline form Standard rules for all three form layouts: Wrap labels …

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 …