Bootstrap Tutorial - Bootstrap card layout








Using card like layout

The following HTML code uses the Bootstrap classes to layout a page in a card style.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!-- ww w  . j  a  v a 2 s.  c om-->
<body style='margin: 20px;'>

  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-offset-3 panel">

        <h1 class="margin-base-vertical">Have you ever seen the rain?</h1>

        <p>Someone told me long ago there's a calm before the storm. I
          know, It's been comin for some time.</p>
        <p>When it's over, so they say, it'll rain a sunny day. I know,
          Shinin down like water.</p>

        <p>I want to know, have you ever seen the rain?</p>

        <form class="margin-base-vertical">
          <p class="input-group">
            <span class="input-group-addon"><span class="icon-envelope"></span></span>
            <input type="text" class="form-control input-large" name="email"
              placeholder="jonsnow@knowsnothi.ng" />
          </p>
          <p class="help-block text-center">
            <small>We won't send you spam. Unsubscribe at any time.</small>
          </p>
          <p class="text-center">
            <button type="submit" class="btn btn-success btn-large">Keep
              me posted</button>
          </p>
          </span>
        </form>

        <div class="margin-base-vertical">
          <small class="text-muted"><a
            href="http://www.flickr.com/photos/erwlas/6133364748/">Background
              picture by erwlas @flickr</a>. Used under <a
            href="http://creativecommons.org/licenses/by/2.0/deed.en">Creative
              Commons - Attribution</a>.</small>
        </div>

      </div>
      <!-- //main content -->
    </div>
    <!-- //row -->
  </div>
  <!-- //container -->


</body>
</html>

Click to view the demo