Bootstrap - Main Contents

link for bootstrap

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

  <p class="text-muted">Test</p>
  <p class="text-primary">Test</p>
  <p class="text-success">Test</p>
  <p class="text-info">Test</p>
  <p class="text-warning">Test</p>
  <p class="text-danger">Test</p>

  <abbr title="attribute">attr</abbr>
  <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

  <address>
    <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
  </blockquote>

  <table class="table">
    <tr>
      <td>table</td>
      <td>table</td </tr>
      <tr>
        <td>table</td>
        <td>table</td </tr>
        <tr>
          <td>table</td>
          <td>table</td </tr>
  </table>

  <table class="table table-striped">
    <tr>
      <td>table table-striped</td>
      <td>table table-striped</td </tr>
      <tr>
        <td>table table-striped</td>
        <td>table table-striped</td </tr>
        <tr>
          <td>table table-striped</td>
          <td>table table-striped</td </tr>
  </table>


  <table class="table table-bordered">
    <tr>
      <td>table table-bordered</td>
      <td>table table-bordered</td </tr>
      <tr>
        <td>table table-bordered</td>
        <td>table table-bordered</td </tr>
        <tr>
          <td>table table-bordered</td>
          <td>table table-bordered</td </tr>
  </table>

  <table class="table table-hover">
    <tr>
      <td>table table-hover</td>
      <td>table table-hover</td </tr>
      <tr>
        <td>table table-hover</td>
        <td>table table-hover</td </tr>
        <tr>
          <td>table table-hover</td>
          <td>table table-hover</td </tr>
  </table>

  <table class="table table-condensed">
    <tr>
      <td>table table-condensed</td>
      <td>table table-condensed</td </tr>
      <tr>
        <td>table table-condensed</td>
        <td>table table-condensed</td </tr>
        <tr>
          <td>table table-condensed</td>
          <td>table table-condensed</td </tr>
  </table>


  <table class="table">
    <tr class="active">
      <td>active</td>
      <td>active</td>
    </tr>
    <tr class="success">
      <td>success</td>
      <td>success</td>
    </tr>
    <tr class="warning">
      <td>warning</td>
      <td>warning</td>
    </tr>
    <tr class="danger">
      <td>danger</td>
      <td>danger</td>
    </tr>
  </table>

  <div class="table-responsive">
    <table class="table">
      <tr>
        <td>div table-responsive</td>
        <td>div table-responsive</td>
      </tr>
      <tr>
        <td>div table-responsive</td>
        <td>div table-responsive</td>
      </tr>
      <tr>
        <td>div table-responsive</td>
        <td>div table-responsive</td>
      </tr>
    </table>
  </div>

  <form class="form-inline" role="form">
    <div class="form-group">
      <label class="sr-only" for="exampleInputEmail2">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label class="sr-only" for="exampleInputPassword2">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
  </form>



  <form role="form">
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>



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

 <input type="text" class="form-control" placeholder="Text input"><br>
 <textarea class="form-control" rows="3"></textarea>

<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="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>


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


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

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


  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label class="col-lg-2 control-label">Email</label>
      <div class="col-lg-10">
        <p class="form-control-static">email@example.com</p>
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword" class="col-lg-2 control-label">Password</label>
      <div class="col-lg-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
      </div>
    </div>
  </form>


  <input class="form-control" id="focusedInput" type="text" value="This is focused...">


  <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

  <form class="form-inline" role="form">
    <fieldset disabled>
      <div class="form-group">
        <label for="disabledTextInput">Disabled input</label>
        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
      </div>
      <div class="form-group">
        <label for="disabledSelect">Disabled select menu</label>
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Can't check this
        </label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </fieldset>
  </form>


  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess">
  </div>
  <div class="form-group has-warning">
    <label class="control-label" for="inputWarning">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning">
  </div>
  <div class="form-group has-error">
    <label class="control-label" for="inputError">Input with error</label>
    <input type="text" class="form-control" id="inputError">
  </div>

  <input class="form-control input-lg" type="text" placeholder=".input-lg">
  <input class="form-control" type="text" placeholder="Default input">
  <input class="form-control input-sm" type="text" placeholder=".input-sm">

  <select class="form-control input-lg">...</select>
  <select class="form-control">...</select>
  <select class="form-control input-sm">...</select>



  <div class="row">
    <div class="col-lg-2">
      <input type="text" class="form-control" placeholder=".col-lg-2">
    </div>
    <div class="col-lg-3">
      <input type="text" class="form-control" placeholder=".col-lg-3">
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder=".col-lg-4">
    </div>
  </div>


  <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

  <!-- Standard gray button with gradient -->
  <button type="button" class="btn btn-default">Default</button>

  <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
  <button type="button" class="btn btn-primary">Primary</button>

  <!-- Indicates a successful or positive action -->
  <button type="button" class="btn btn-success">Success</button>

  <!-- Contextual button for informational alert messages -->
  <button type="button" class="btn btn-info">Info</button>

  <!-- Indicates caution should be taken with this action -->
  <button type="button" class="btn btn-warning">Warning</button>

  <!-- Indicates a dangerous or potentially negative action -->
  <button type="button" class="btn btn-danger">Danger</button>

  <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
  <button type="button" class="btn btn-link">Link</button>




  <p>
    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-default btn-lg">Large button</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary">Default button</button>
    <button type="button" class="btn btn-default">Default button</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary btn-sm">Small button</button>
    <button type="button" class="btn btn-default btn-sm">Small button</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
    <button type="button" class="btn btn-default btn-xs">Extra small button</button>
  </p>



  <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>


  <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
  <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>




  <a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
  <a href="#" class="btn btn-default btn-lg disabled">Link</a>




  <a class="btn btn-default" href="#">Link</a>
  <button class="btn btn-default" type="submit">Button</button>
  <input class="btn btn-default" type="button" value="Input">
  <input class="btn btn-default" type="submit" value="Submit">

  <img src="..." alt="..." class="img-rounded">
  <img src="..." alt="..." class="img-circle">
  <img src="..." alt="..." class="img-thumbnail">




  <button type="button" class="close" aria-hidden="true">&times;</button>




  <span class="glyphicon glyphicon-search"></span>



  <div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
  </div>




  <!-- Split button -->
  <div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>




  <div class="btn-group dropup">
    <button type="button" class="btn btn-default">Dropup</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>



  <div class="row">
    <div class="col-lg-6">
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
        </span>
        <input type="text" class="form-control">
      </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
    <div class="col-lg-6">
      <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
        </span>
      </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
  </div><!-- /.row -->



  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
  </ul>


  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>


  <ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
  </ol>




  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>




  <span class="label label-default">Default</span>
  <span class="label label-primary">Primary</span>
  <span class="label label-success">Success</span>
  <span class="label label-info">Info</span>
  <span class="label label-warning">Warning</span>
  <span class="label label-danger">Danger</span>


  <a href="#">Inbox <span class="badge">42</span></a>



  <div class="jumbotron">
    <div class="container">
      <h1>Hello, world!</h1>
      <p>...</p>
      <p><a class="btn btn-primary btn-lg">Learn more</a></p>
    </div>
  </div>



  <div class="row">
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img data-src="holder.js/300x200" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>...</p>
          <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
        </div>
      </div>
    </div>
  </div>



  <div class="alert alert-success">...</div>
  <div class="alert alert-info">...</div>
  <div class="alert alert-warning">...</div>
  <div class="alert alert-danger">...</div>




  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
      style="width: 40%">
      <span class="sr-only">40% Complete (success)</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
      <span class="sr-only">20% Complete</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
      style="width: 60%">
      <span class="sr-only">60% Complete (warning)</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
      style="width: 80%">
      <span class="sr-only">80% Complete</span>
    </div>
  </div>




  <div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
      style="width: 40%">
      <span class="sr-only">40% Complete (success)</span>
    </div>
  </div>
  <div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
      <span class="sr-only">20% Complete</span>
    </div>
  </div>
  <div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
      style="width: 60%">
      <span class="sr-only">60% Complete (warning)</span>
    </div>
  </div>
  <div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
      style="width: 80%">
      <span class="sr-only">80% Complete (danger)</span>
    </div>
  </div>




  <div class="progress progress-striped active">
    <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
      <span class="sr-only">45% Complete</span>
    </div>
  </div>


  <div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%">
      <span class="sr-only">35% Complete (success)</span>
    </div>
    <div class="progress-bar progress-bar-warning" style="width: 20%">
      <span class="sr-only">20% Complete (warning)</span>
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
      <span class="sr-only">10% Complete (danger)</span>
    </div>
  </div>



  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>



  <ul class="list-group">
    <li class="list-group-item">
      <span class="badge">14</span>
      Cras justo odio
    </li>
  </ul>


  <div class="list-group">
    <a href="#" class="list-group-item active">
      Cras justo odio
    </a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
  </div>




  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>



  <div class="panel panel-default">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
      Panel content
    </div>
  </div>


  <div class="panel panel-primary">...</div>
  <div class="panel panel-success">...</div>
  <div class="panel panel-info">...</div>
  <div class="panel panel-warning">...</div>
  <div class="panel panel-danger">...</div>



  <div class="well well-lg">...</div>
  <div class="well well-sm">...</div>
  <div class="well">...</div>