Category: Bootstrap CSS

Icon glyphs 140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons. Glyphicons attribution Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the...

Images have three classes that can be used to apply some simple styles: .img-rounded adds border-radius:6px to give the image rounded corners, .img-circle makes the entire image round by adding border-radius: 500px, and .img-polaroid...

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Output Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Use any of the available button classes to quickly create a styled button. Example Output

In addition to the :focus state, Bootstrap offers styling for disabled inputs and classes for form validation. Input focus When an input receives :focus (i.e., a user clicks into the input or tabs onto...

With the default grid system that is inherent in Bootstrap, you can use the .span* system for sizing form controls. In addition to the span column-sizing method, you can also use a handful of...

In addition to the basic form controls listed in the previous section, Bootstrap offers a few other form components to complement the standard HTML form elements; for example, it lets you easily prepend and...

Bootstrap natively supports the most common form controls. Chief among them are input, textarea, checkbox, radio, and select. Inputs The most common form text field is the input—this is where users will enter most...

With a few helper classes, you can dynamically update the layout of your form. Bootstrap comes with a few preset styles to choose from. Search form Add .form-search to the <form> tag, and then...

Another one of the highlights of using Bootstrap is the ability to create forms with ease. As a web developer, styling forms is one of my least favorite tasks. Bootstrap makes it easy with...

For basic styling—light padding and only horizontal dividers—add the base class .table to any . It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date...

There are two different key ways to display code with Bootstrap. The first is the <code> tag and the second is the <pre> tag. Generally, if you are going to be displaying code inline,...

Bootstrap offers support and styling for the three main list types that HTML offers: ordered, unordered, and definition lists. An unordered list is a list that doesn’t have any particular order and is traditionally...

For quoting blocks of content from another source within your document. Default blockquote Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>. Blockquote options Style and content changes...

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>. Example Output

Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover,...