Button styles can be applied to anything with the .btn
class applied. However, typically you'll want to apply these to only <a>
and <button>
elements for the best rendering.
Fancy larger or smaller buttons? Add .btn-large
, .btn-small
, or .btn-mini
for additional sizes.
Button styles can be applied to anything with the .btn
class applied. However, typically you'll want to apply these to only <a>
and <button>
elements for the best rendering.
The default Kickoff button set has 7 states.
-alert-block
to use this style.
- HTML
-<h5>Default</h5>
- <div class="alert">
- <strong>Warning!</strong> Best check yo self, you're not looking too good.
- </div>
- <h5>Success</h5>
- <div class="alert alert-success">
- <strong>Warning!</strong> Best check yo self, you're not looking too good.
- </div>
- <h5>Error</h5>
- <div class="alert alert-error">
- <strong>Warning!</strong> Best check yo self, you're not looking too good.
- </div>
- <h5>Alert block</h5>
- <div class="alert alert-block">
- <h4>Warning!</h4>
- This version allows for more text inside the message box. Add the class <code>alert-block</code> to use this style.
- </div>
- .SCSS
- // Set the backgrounds
-// -------------------------
-.btn-primary {
- @include button-background($btn-primary-background, $btn-primary-background-highlight);
-}
-// Warning appears are orange
-.btn-warning {
- @include button-background($btn-warning-background, $btn-warning-background-highlight);
-}
-// Danger and error appear as red
-.btn-danger {
- @include button-background($btn-danger-background, $btn-danger-background-highlight);
-}
-// Success appears as green
-.btn-success {
- @include button-background($btn-success-background, $btn-success-background-highlight);
-}
-// Info appears as a neutral blue
-.btn-info {
- @include button-background($btn-info-background, $btn-info-background-highlight);
-}
-// Inverse appears as dark gray
-.btn-inverse {
- @include button-background($btn-inverse-background, $btn-inverse-background-highlight);
-}
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.- -
<html>
-<head>
-</head>
-<body>
-<div class="main">
-
-<div>
-</body>
-</html>
-
- Album | -Year | -Price | -
---|---|---|
Are You Experienced | -1967 | -$10.00 | -
Axis: Bold as Love | -1967 | -$12.00 | -
Electric Ladyland | -1968 | -$10.00 | -
Band of Gypsys | -1970 | -$12.00 | -
- Your browser does not support these elements yet! Consider downloading a Chromium Nightly.
-
- The progress element (spec: 4.10.16) represents the completion progress of a task and can be both indeterminate as determinate. -
-- Displaying a scalar measurement within a known range, like hard drive usage, can be done using the meter element (spec: 4.10.17) -
-Having forms styled like this depends on specific markup with specific class names. Please take the example code below as a guide.
-<form action="#" class="well">
- <fieldset>
- <legend>Your form</legend>
- <ul>
- <li class="control-group">
- <label for="name" class="control-label">Name</label>
- <div class="controls">
- <input type="text" id="name" placeholder="Zander Martineau" />
- </div>
- </li>
- <li class="control-group">
- <label for="email" class="control-label">Email</label>
- <div class="controls"><input type="email" id="email" placeholder="zander@martineau.tv" /></div>
- </li>
- <li class="control-group">
- <label for="phone" class="control-label">Phone</label>
- <div class="controls"><input type="number" id="phone" placeholder="020 123 4567" /></div>
- </li>
- <li class="control-group">
- <label for="comments" class="control-label">Comments</label>
- <div class="controls">
- <textarea id="comments" rows="3" cols="50"></textarea>
- </div>
- </li>
- </ul>
-
- </fieldset>
-
- <div class="form-actions text_centre">
- <input type="submit" value="Submit" class="btn btn-primary" />
- <button type="reset" class="btn btn-inverse">Cancel</button>
- </div>
-
- </form>
- Assuming you use the same markup as above, all you have to do is simply add a .form-horizontal
class to the <form>
element & you'll now have right aligned, inline form labels in an instant.
<form action="#" class="well form-horizontal">
- <fieldset>
- <legend>Your form</legend>
- <ul>
- <li class="control-group">
- <label for="name" class="control-label">Name</label>
- <div class="controls">
- <input type="text" id="name" placeholder="Zander Martineau" />
- </div>
- </li>
- <li class="control-group">
- <label for="email" class="control-label">Email</label>
- <div class="controls">
- <input type="email" id="email" placeholder="zander@martineau.tv" />
- </div>
- </li>
- <li class="control-group">
- <label for="phone" class="control-label">Phone</label>
- <div class="controls"><input type="number" id="phone" placeholder="020 123 4567" /></div>
- </li>
- <li class="control-group">
- <label for="comments" class="control-label">Comments</label>
- <div class="controls">
- <textarea id="comments" rows="3" cols="50"></textarea>
- </div>
- </li>
- </ul>
-
- </fieldset>
-
- <div class="form-actions text_centre">
- <input type="submit" value="Submit" class="btn btn-primary" />
- <button type="reset" class="btn btn-inverse">Cancel</button>
- </div>
-
-</form>
- This is a simplified form where everything is inline. It does not follow the same rules as the previous two examples but you will need to add a class of .form-inline
to the <form>
element so the inputs & buttons play nicely.
<form class="well form-inline">
- <input type="text" class="input-medium" placeholder="Email">
- <input type="password" class="input-medium" placeholder="Password">
- <label class="checkbox">
- <input type="checkbox"> Remember me
- </label>
- <button type="submit" class="btn">Sign in</button>
-</form>
- This is similar to the inline form example above
-All the form elements you could need.
-<form action="#" class="well">
- <fieldset>
- <legend>Your form</legend>
- <ul>
- <li class="control-group">
- <label for="text" class="control-label">Text</label>
- <div class="controls">
- <input type="text" id="text" placeholder="Zander Martineau" class="input-xlarge" />
- </div>
- </li>
- <li class="control-group">
- <label for="email" class="control-label">Email</label>
- <div class="controls">
- <input type="email" id="email" placeholder="zander@martineau.tv" class="input-xlarge" />
- </div>
- </li>
- <li class="control-group">
- <label for="number" class="control-label">Number</label>
- <div class="controls">
- <input type="number" id="number" placeholder="020 123 4567" class="input-xlarge" />
- </div>
- </li>
- <li class="control-group">
- <label for="file" class="control-label">File upload <br>
- <small>Firefox uses the <code>size</code> attribute to determine width.</small>
- </label>
-
- <div class="controls">
- <div class="file-wrapper input-xlarge">
- <input type="file" id="file" accept="image/*" size="14" />
- </div>
- </div>
- </li>
- <li class="control-group">
- <label for="comments" class="control-label">Textarea</label>
- <div class="controls">
- <textarea id="comments" rows="3" cols="50" class="input-xlarge"></textarea>
- </div>
- </li>
- <li class="control-group">
- <label for="comments" class="control-label">Checkboxes & Radio buttons</label>
- <div class="controls">
- <label class="checkbox">
- <input type="checkbox" value="">
- Option one is this and that—be sure to include why it's great
- </label>
-
- <label class="radio">
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
- Option one is this and that—be sure to include why it's great
- </label>
- <label class="radio">
- <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
- Option two can be something else and selecting it will deselect option one
- </label>
- </div>
- </li>
- <li class="control-group">
- <label for="comments" class="control-label">Inline checkboxes</label>
- <div class="controls">
- <label class="checkbox inline">
- <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
- </label>
- <label class="checkbox inline">
- <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
- </label>
- <label class="checkbox inline">
- <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
- </label>
- </div>
- </li>
- <li class="control-group">
- <label for="comments" class="control-label">Comments</label>
- <div class="controls">
- <select class="input-xlarge">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- </div>
- </li>
- <li class="control-group">
- <label for="comments" class="control-label">Comments</label>
- <div class="controls">
- <select multiple="multiple" class="input-xlarge">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- </div>
- </li>
- </ul>
-
- </fieldset>
-
- <div class="form-actions text_centre">
- <input type="submit" value="Submit" class="btn btn-primary" />
- <button type="reset" class="btn btn-inverse">Cancel</button>
- </div>
-
-</form>
- Percentage widths, set your column size by restricting the .container
wrapper <div>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
-One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
-On larger screens, split larger column in two, then on smaller screens split them while still keeping the overall grid.
- -Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
- -One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
- -One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
-One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
-On larger screens, allow smaller columns to site beside other column but on smaller screens 'shunt' them down below its siblings.
- -Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
-One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
-On larger screens, allow smaller columns to site beside other column but on smaller screens 'shunt' them down below its siblings.
- -Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-On larger screens, allow smaller columns to site beside other column but on smaller screens 'shunt' them down below its siblings.
- -Add a .centred
or .centered
class to each column. This also means that you can only have one column per row.
Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position
. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon-
for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
-Bootstrap uses an <i>
tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
-
- <i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class:
--
- <i class="icon-search icon-white"></i>
There are 120 classes to choose from for your icons. Just add an <i>
tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
- Heads up!
- When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i>
tag for proper spacing.
-
Icons are great, but where would one use them? Here are a few ideas:
-Essentially, anywhere you can put an <i>
tag, you can put an icon.
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
- -