Typography

    Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
     
    Rating:
    ( 0 Rating )
    Pin It

    h1. Heading 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    h2. Heading 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    h3. Heading 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    h4. Heading 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    h5. Heading 5

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    h6. Heading 6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


    Unordered list

    • Item
    • Item
    • Item
      • Item
      • Item
      • Item

    Ordered list

    1. tem
    2. Item
    3. Item
      1. Item
      2. Item
      3. Item

    Tables

    # First Name Last Name Username
    1 Mark Otto @mdo
    2 Jacob Thornton @fat
    3 Larry the Bird @twitter

    Contextual classes

    # Column heading Column heading Column heading
    1 Column content Column content Column content
    2 Column content Column content Column content
    3 Column content Column content Column content
    4 Column content Column content Column content
    5 Column content Column content Column content
    6 Column content Column content Column content
    7 Column content Column content Column content
    8 Column content Column content Column content
    9 Column content Column content Column content

    Responsive tables

    # Table heading Table heading Table heading Table heading Table heading Table heading
    1 Table cell Table cell Table cell Table cell Table cell Table cell
    2 Table cell Table cell Table cell Table cell Table cell Table cell
    3 Table cell Table cell Table cell Table cell Table cell Table cell

    Inline form

    Send invitation
    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="This email address is being protected from spambots. You need JavaScript enabled to view it.">
      </div>
      <btn type="submit" class="btn btn-default">Send invitation</btn>
    </form>
    $
    .00
    Transfer cash

    Horizontal form

    Sign in
    <form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <btn type="submit" class="btn btn-default">Sign in</btn>
        </div>
      </div>
    </form>

    Checkboxes and radios

    Default (stacked)

    <div class="checkbox">
      <label>
        <input type="checkbox" value="">
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="checkbox disabled">
      <label>
        <input type="checkbox" value="" disabled>
        Option two is disabled
      </label>
    </div>
    
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
    <div class="radio disabled">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option three is disabled
      </label>
    </div>
    Inline checkboxes and radios

    Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.


    <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>
    
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
    </label>

    Selects

    Note that many native select menus?namely in Safari and Chrome?have rounded corners that cannot be modified via border-radius properties.

    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>