Category: Bootstrap

Bootstrap

Navs in Bootstrap

Navs in Bootstrap

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style. Example Output

Icons

Icons

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

Images

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...

Button Sizes

Button Sizes

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.

Buttons

Buttons

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

Form Control States

Form Control States

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...

Form Control Sizing

Form Control Sizing

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...

Extended Form Controls

Extended Form Controls

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...

Supported Form Controls

Supported Form Controls

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...

Optional Form Layouts

Optional Form Layouts

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...

Normal Forms

Normal Forms

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...

Tables

Tables

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...

Code

Code

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,...