Grid System

Bootcards builds on Twitter Bootstrap's grid system to allow separate column scrolling in touchscreen devices.

The 2 main top-level columns are .bootcards-list (which is used to navigate your app) and .bootcards-cards (which contains your app's content). In desktop browsers, these will behave like regular bootstrap columns, but on touchscreen devices the user will be able to scroll them separately.

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-5 bootcards-list">
      
        ...your Bootcards List goes here...
        
      </div>
      <div class="col-sm-7 bootcards-cards">
      
        ...your Bootcards Cards go here...
        
      </div>
    </div>
  </div>
</body>

Navigation

Bootcards offers 3 navigation methods: the Navbar, Footer Bar, or Sliding Sidebar.

What you use will depend on the needs of your app, and the number of top-level navigation items. Apps with fewer items would suit using footer navigation on mobile, as they're always accessible, but footer navigation may be impractical for apps with many top level navigation items as it can only fit 4 on phones.

Navbar

The Bootcards Navbar is the main navigation system for desktop browsers.

On desktop, it uses Bootstrap's default .navbar-fixed-top styles and shows all the top level navigation items.

On mobile devices, there isn't enough space for these items, so the Bootstrap Navbar is replaced with a simpler, more native version with only a Title and limited space for other functions (e.g. a Back button or Menu button). These buttons are hidden from desktop browsers, which don't need them.

In addition to the Navbar, you'll also need to implement one of the other navigation structures below (Footer Bar or Sliding Sidebar) to allow mobile users to navigate your app.

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <button type="button" class="btn btn-default btn-back navbar-left pull-left hidden " onclick="history.back()">
      <i class="fa fa-lg fa-chevron-left"></i>
      <span>Back</span>
    </button>
    <button type="button" class="btn btn-default btn-menu navbar-left pull-left offcanvas-toggle">
      <i class="fa fa-lg fa-bars"></i>
      <span>Menu</span>
    </button>
    <a class="navbar-brand" title="Customers v{{getAppVersion}}" href="/">Customers</a>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">
            <i class="fa fa-users"></i> 
            Contacts
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-building-o"></i> 
            Companies
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-gears"></i> 
            Settings
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Double Navbar

The Double Navbar is meant for desktop and allows you to have two rows of menu options.

Set class="has-bootcards-navbar-double" on the body element to deal with the increased height of the navbar.

<div class="navbar navbar-default bootcards-navbar-double" role="navigation">
<div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <a class="navbar-brand" title="Bootcards Starter" href="/">Bootcards Starter</a>  

  <!--navbar menu options: shown on desktop only -->
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right bootcards-nav-secondary">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle navbar-link" data-toggle="dropdown" role="button" aria-expanded="false">
          <i class="fa fa-globe"></i>
          Languages <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Deutsch</a></li>
          <li><a href="#"><i class="fa fa-fw fa-check pull-right"></i>English</a></li>
          <li><a href="#">Espanol</a></li>
        </ul>
      </li> 
      <li>
        <a href="#">
          <i class="fa fa-fw fa-lock"></i>
          Login
        </a>
      </li>    
    </ul>
    <ul class="nav navbar-nav navbar-right bootcards-nav-primary">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
          <i class="fa fa-fw fa-dashboard"></i>
          Home <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#"><i class="fa fa-fw fa-envelope-o"></i> Action</a></li>
          <li><a href="#"><i class="fa fa-fw fa-film"></i> Another action</a></li>
          <li><a href="#"><i class="fa fa-fw fa-file-o"></i> Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#"><i class="fa fa-fw fa-bar-chart-o"></i> Separated link</a></li>
        </ul>
      </li>
      
      <li>
        <a href="#">
          <i class="fa fa-fw fa-briefcase"></i>
          Portfolio
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-fw fa-bullhorn"></i>
          Blog
        </a>
      </li>
      
    </ul>
  </div>
</div><!--container-fluid-->
</div>  <!--navbar--> 
          

Footer Bar

The Footer Bar offers usable mobile navigation for simpler apps with a few important navigation items.

This uses Bootstrap's .navbar-fixed-footer markup, with a .btn-group to contain the navigation elements. These are styled to look like native footer tabs on iOS and Android devices.

On desktop, the footer reverts to a simple, website-style footer to hold items like copyright information, version numbers, etc. These are contained in .bootcards-desktop-footer, and hidden from mobile devices.

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <div class="btn-group">
      <a href="#" class="btn btn-default active">
        <i class="fa fa-2x fa-users"></i>
        Contacts
      </a>
      <a href="#" class="btn btn-default">
        <i class="fa fa-2x fa-building-o"></i>
        Companies
      </a>
      <a href="#" class="btn btn-default">
        <i class="fa fa-2x fa-gears"></i>
        Settings
      </a>
    </div>
    <div class="bootcards-desktop-footer clearfix">
      <p class="pull-left">Text for desktop footer goes here</p>
      <p class="pull-left">More text for desktop footer goes here</p>
   </div>
  </div>
</div>

Apply the .bootcards-nofooter to the <body> element for layouts without a footer: this will remove the standard bottom padding.

Sliding Sidebar ('offcanvas')

The Sliding Sidebar offers complex apps more space navigation items.

This is hidden by default, and accessed when required via a Menu button on the left-hand side of the Navbar.

On desktop browsers, the Sliding Sidebar is inactive, as it's unnecessary.

The Sliding Sidebar consists of two elements:

  • A button to show/ hide the sidebar:
  • <button type="button" class="btn btn-default btn-menu" data-toggle="offcanvas">
        <i class="fa fa-lg fa-bars"></i>
        <span>Menu</span>
    </button>

    Bootcards tries to find the element that has data-toggle="offcanvas" and attaches a handler to show/ hide the menu.

  • The menu:
  • <div class="navmenu offcanvas offcanvas-left">
      <ul class="nav">
        <li class="active">
          <a href="#">
            <i class="fa fa-lg fa-users"></i>
            Contacts
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-lg fa-building-o"></i>
            Companies
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-lg fa-gears"></i>
            Settings
          </a>
        </li>
      </ul>
    </div>

    Submenus

    Using the standard Bootstap 'collapse' function, the offcanvas can also contain menu options with submenu options.

    <!--option with submenu-->
    <li class="collapse litop4">
      <a href="#otherControls" class="bootcards-parent" data-toggle="collapse" data-parent=".collapse">
        <i class="fa fa-lg fa-fw fa-chevron-circle-right"></i> Settings
      </a>
      <div id="otherControls" class="collapse in">
        <ul class="nav navmenu-nav"><li >
          <a href="#" ><i class="fa fa-lg fa-fw fa-cog"></i> General</a></li>
        <li>
          <a href="#"><i class="fa fa-lg fa-fw fa-user"></i> Account</a>
        </li>
         <li>
          <a href="#"><i class="fa fa-lg fa-fw fa-refresh"></i> Sync</a>
        </li>
        </ul>
      </div>
    </li>

    Enable the collapsible menu using the following script: $('.collapse').collapse();

    For more details, see here.

    Lists

    Bootcards Lists are used to navigate the entities in your app (e.g. Contacts, Files, Messages, etc).

    Lists are wrapped in the .bootcards-list class

    <div class="bootcards-list">
      <div class="panel panel-default">
        <div class="list-group">
          <a class="list-group-item" href="#">
            <img src="/images/Sofia Acey.jpg" class="img-rounded pull-left"/>
            <h4 class="list-group-item-heading">Acey, Sofia</h4>
            <p class="list-group-item-text">Masung Corp.</p>
          </a>
          <a class="list-group-item" href="#">
            <img src="/images/Joseph Barish.jpg" class="img-rounded pull-left"/>
            <h4 class="list-group-item-heading">Barish, Joseph</h4>
            <p class="list-group-item-text">Masung Corp.</p>
          </a>
          <a class="list-group-item" href="#">
            <img src="/images/Sarah Benson.jpg" class="img-rounded pull-left"/>
            <h4 class="list-group-item-heading">Benson, Sarah</h4>
            <p class="list-group-item-text">ZetaComm</p>
          </a>
        </div>
      </div>
    </div>

    Detailed Lists

    Detailed Lists can be used when you need to show more information for each entry.

    You can use Bootstrap .col-* <div>s within each .list-group-item to show more pieces of information in whatever format you like, and respond to different device widths.

    <div class="bootcards-list">
      <div class="panel panel-default">
        <div class="list-group">
          <a class="list-group-item" href="#">
            <div class="row">
              <div class="col-sm-6">
                <i class="fa fa-3x fa-building-o pull-left"></i>
                <h4 class="list-group-item-heading">Alparvis Ltd</h4>
                <p class="list-group-item-text">London, UK</p>
              </div>
              <div class="col-sm-6">
                <p class="list-group-item-text">Contractor</p>
                <p class="list-group-item-text">$12,000 Revenue YTD</p>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="#">
            <div class="row">
              <div class="col-sm-6">
                <i class="fa fa-3x fa-building-o pull-left"></i>
                <h4 class="list-group-item-heading">Camion Corp</h4>
                <p class="list-group-item-text">Tokyo, Japan</p>
              </div>
              <div class="col-sm-6">
                <p class="list-group-item-text">Customer</p>
                <p class="list-group-item-text">$75,000 Revenue YTD</p>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="#">
            <div class="row">
              <div class="col-sm-6">
                <i class="fa fa-3x fa-building-o pull-left"></i>
                <h4 class="list-group-item-heading">Derenden Systems</h4>
                <p class="list-group-item-text">Albuquerque, USA</p>
              </div>
              <div class="col-sm-6">
                <p class="list-group-item-text">Supplier</p>
                <p class="list-group-item-text">$1.3m Revenue YTD</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>

    List Search & List Actions

    A search form for when you want the user to be able to filter or search your list, and buttons for any other list functions you need.

    This goes at the top of your list, inside the .modal-body. You can add or remove functions by adding/removing columns in the containing .row and making sure the widths add up.

    <div class="bootcards-list">
      <div class="panel panel-default">
        <div class="panel-body">
          <form>
            <div class="row">
              <div class="col-xs-9">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search Contacts...">
                  <i class="fa fa-search"></i>
                </div>
              </div>
              <div class="col-xs-3">
                <a class="btn btn-primary btn-block" href="#">
                  <i class="fa fa-plus"></i>
                  Add
                </a>
              </div>
            </div>
          </form>
        </div>
    
        ...list markup goes here...
    
      </div>
    </div>

    Cards

    Cards are the core of Bootcards, and contain your app's content. Different Cards are available for different types of content (text, tables, forms, charts, media, files, etc).

    Cards are based on the same markup as Bootstrap's .panel. Each card can have a .panel-heading, .panel-body and a .panel-footer. All of these are optional, so just use whichever parts your app needs. You can even use multiple headers or footers (e.g. if you needed separate footer areas separated by a divider).

    Card Title

    Button

    Card content...

    <div class="panel panel-default">
      <div class="panel-heading clearfix">
        <h3 class="panel-title pull-left">Card Title</h3>
          <a class="btn btn-default pull-right" href="#">
            <i class="fa fa-check"></i>
            Button
          </a>
      </div>
      <div class="panel-body">
        <p>Card content...</p>
      </div>
      <div class="panel-footer">
        <small>Card footer...</small>
      </div>
    </div>

    Base Cards

    Base Cards display a list of information separated by dividers.

    Replace the default .panel-body with a .list-group.

    Base Card Title

    Edit

    Name

    John Smith

    Occupation

    Web Developer

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus tortor. Integer viverra turpis ac fringilla hendrerit. Sed faucibus posuere felis et pellentesque. Cras varius tortor vitae molestie tempor. Proin ut viverra elit, ac gravida tortor.

    <div class="panel panel-default">
      <div class="panel-heading clearfix">
        <h3 class="panel-title pull-left">Base Card Title</h3>
          <a class="btn btn-primary pull-right" href="#">
            <i class="fa fa-pencil"></i>
            Edit
          </a>
        </div>
        <div class="list-group">
          <div class="list-group-item">
            <p class="list-group-item-text">Name</p>
            <h4 class="list-group-item-heading">John Smith</h4>
          </div>
          <div class="list-group-item">
            <p class="list-group-item-text">Occupation</p>
            <h4 class="list-group-item-heading">Web Developer</h4>
          </div>
          <div class="list-group-item">
            <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus tortor. Integer viverra turpis ac fringilla hendrerit. Sed faucibus posuere felis et pellentesque. Cras varius tortor vitae molestie tempor. Proin ut viverra elit, ac gravida tortor.</p>
          </div>
        </div>
      <div class="panel-footer">
        <small>Built with Bootcards - Base Card</small>
      </div>
    </div>

    Form Cards

    Form Cards are used for user input in your app.

    Replace the default .panel-body with a <form>.

    Form Card Title

    <div class="panel panel-default">
      <div class="panel-heading clearfix">
        <h3 class="panel-title pull-left">Form Card Title</h3>
        <div class="btn-group pull-right">
          <button class="btn btn-danger">
            <i class="fa fa-times"></i>
            Cancel
          </button>
          <button class="btn btn-success">
            <i class="fa fa-check"></i>
            Save
          </button>
        </div>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-xs-3 control-label">Name</label>
            <div class="col-xs-9">
              <input type="text" class="form-control" value="John Smith">
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-3 control-label">Occupation</label>
            <div class="col-xs-9">
              <select class="form-control">
                <option>Designer</option>
                <option selected>Developer</option>
                <option>Salesman</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-3 control-label">Description</label>
            <div class="col-xs-9">
              <textarea class="form-control" rows="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris tellus, vehicula ut tellus id, suscipit dapibus tortor. Integer viverra turpis ac fringilla hendrerit. Sed faucibus posuere felis et pellentesque. Cras varius tortor vitae molestie tempor. Proin ut viverra elit, ac gravida tortor.</textarea>
            </div>
          </div>
        </form>
      </div>
      <div class="panel-footer">
        <small>Built with Bootcards - Form Card</small>
      </div>
    </div>

    Table Cards

    Table Cards display tabular data.

    You can use the same table classes as Bootstrap, e.g. the .table-hover and .active classes used in this example.

    Wrap wider tables in a <div class="table-responsive"> so they'll be able to scroll horizontally in narrower browsers such as mobiles, and not be cut off.

    Table Card Title

    NameForecastQuota
    Guy Bardsley27504000
    Adam Callahan33004000
    Total60508000
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Table Card Title</h3>
      </div>
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr class="active"><th>Name</th><th>Forecast</th><th>Quota</th></tr>
          </thead>
          <tbody>
            <tr><td>Guy Bardsley</td><td>2750</td><td>4000</td></tr>
            <tr><td>Adam Callahan</td><td>3300</td><td>4000</td></tr>
            <tr><td><strong>Total</strong></td><td><strong>6050</strong></td><td><strong>8000</strong></td></tr>
          </tbody>
        </table>
      </div>
      <div class="panel-footer">
        <small>Built with Bootcards - Table Card</small>
      </div>
    </div>

    Chart Cards

    Chart cards contain charts powered by Morris.js.

    These can be used with Table cards in order to toggle between a chart view and the raw data.

    Chart Card Heading

    <div class="panel panel-default bootcards-chart">
      <div class="panel-heading">
        <h3 class="panel-title">Chart Card Heading</h3>
      </div>
      <div class="bootcards-chart-canvas" id="barChart"></div>
      <div class="panel-footer">
        <small>Built with Bootcards - Chart Card</small>
      </div>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript">
      var drawCharts = function() {
        $("#barChart").empty();
        Morris.Bar({
          element: 'barChart',
          data: [
            {person: 'Guy Bardsley', sales: 550},
            {person: 'Adam Callahan', sales: 1500},
            {person: 'Arlo Geist', sales: 3750},
            {person: 'Sheila Hutchins', sales: 3500}
          ],
          xkey: 'person',
          ykeys: ['sales'],
          labels: ['Sales'],
          hideHover: 'auto'
        });
      }
      $(document).ready( function() {
        drawCharts();
      });
      $(window).on('resize', function() {
        drawCharts();
      });
    </script>

    Summary Cards

    Summary cards can be used on dashboards, etc to highlight important pieces of data in your app.

    Summary Card Heading

    <div class="panel panel-default bootcards-summary">
      <div class="panel-heading">
        <h3 class="panel-title">Summary Card Heading</h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-xs-6 col-sm-4">
            <a class="bootcards-summary-item" href="#">
              <i class="fa fa-3x fa-users"></i>
              <h4>Contacts <span class="label label-info">432</span></h4>
            </a>
          </div>
          <div class="col-xs-6 col-sm-4">
            <a class="bootcards-summary-item" href="#">
              <i class="fa fa-3x fa-building-o"></i>
              <h4>Companies <span class="label label-info">98</span></h4>
            </a>
          </div>
          <div class="col-xs-6 col-sm-4">
            <a class="bootcards-summary-item" href="#">
              <i class="fa fa-3x fa-clipboard"></i>
              <h4>Notes <span class="label label-danger">54</span></h4>
            </a>
          </div>
          <div class="col-xs-6 col-sm-4">
            <a class="bootcards-summary-item" href="#">
              <i class="fa fa-3x fa-files-o"></i>
              <h4>Files <span class="label label-info">65</span></h4>
            </a>
          </div>
          <div class="col-xs-6 col-sm-4">
            <a class="bootcards-summary-item" href="#">
              <i class="fa fa-3x fa-check-square-o"></i>
              <h4>Tasks <span class="label label-warning">109</span></h4>
            </a>
          </div>      
        </div>
      </div>
      <div class="panel-footer">
        <small>Built with Bootcards - Summary Card</small>
      </div>
    </div>

    Media Cards

    Media Cards hold larger images or videos.

    Media Card Heading

    Media card description lorem ipsum dolor est compendium
    <div class="panel panel-default bootcards-media">
      <div class="panel-heading">
        <h3 class="panel-title">Media Card Heading</h3>
      </div>
      <div class="panel-body">
        Media card description lorem ipsum dolor est compendium
      </div>
      <img src="http://www.teamstudio.com/Portals/218295/images/istock_000001242290small.jpg" class="img-responsive"/>
      <div class="panel-footer">
        <div class="btn-group btn-group-justified">
          <div class="btn-group">
            <button class="btn btn-default">
              <i class="fa fa-arrow-down"></i>
              Download
            </button>
          </div>
          <div class="btn-group">
            <button class="btn btn-default">
              <i class="fa fa-star"></i>
              Favorite
            </button>
          </div>
          <div class="btn-group">
            <button class="btn btn-default">
              <i class="fa fa-envelope"></i>
              Email
            </button>
          </div>
        </div>
      </div>
    </div>

    File Cards

    File Cards are intended to show information and functions for non-media file formats (PDFs, Word documents, spreadsheets, etc).

    File Card Heading

    Added by John Smith on 5 March 2014

    MediaFile card description lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo, nulla ut porta interdum, mi mi venenatis felis, vitae pellentesque ante eros at enim.

    <div class="panel panel-default bootcards-file">
      <div class="panel-heading">
        <h3 class="panel-title">File Card Heading</h3>
      </div>
      <div class="list-group">
        <div class="list-group-item">
          <a href="#">
            <i class="icon-file-pdf"></i>
          </a>
          <h4 class="list-group-item-heading">
            <a href="#">
              File Name Goes Here
            </a>
          </h4>
          <p class="list-group-item-text"><strong>PDF</strong></p>
          <p class="list-group-item-text"><strong>3.2Mb</strong></p>
        </div>
        <div class="list-group-item">
          <p class="list-group-item-text"><strong>Added by John Smith on 5 March 2014</strong></p>
        </div>
        <div class="list-group-item">
          <p class="list-group-item-text">MediaFile card description lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo, nulla ut porta interdum, mi mi venenatis felis, vitae pellentesque ante eros at enim.</p>
        </div>
      </div>
      <div class="panel-footer">
        <div class="btn-group btn-group-justified">
          <div class="btn-group">
            <button class="btn btn-default">
              <i class="fa fa-arrow-down"></i>
              Download
            </button>
          </div>
          <div class="btn-group">
            <button class="btn btn-default">
              <i class="fa fa-star"></i>
              Favorite
            </button>
          </div>
          <div class="btn-group">
            <button class="btn btn-default">
              <i class="fa fa-envelope"></i>
              Email
            </button>
          </div>
        </div>
      </div>
    </div>

    Rich Text Cards

    Rich Text Cards are designed for longer passages of text, which may include various heading levels, paragraphs and lists.

    They have more padding around the .panel-content to help readability.

    Rich Text Card Heading

    Lead body copy vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis pretium nisl. Etiam at vestibulum purus, sit amet blandit mi. Duis enim lectus, tempus nec varius sed, sollicitudin quis velit. Fusce quis sem porttitor, euismod ante vitae, ultricies erat.

    • Duis cursus dui et turpis gravida sollicitudin.
    • Donec eget mauris feugiat, euismod purus nec, feugiat neque.
    • Nunc erat est, molestie eget magna in, consectetur euismod lorem.
    1. Sed luctus congue orci quis tempus.
    2. Praesent in viverra lorem.
    3. Suspendisse augue lacus, porta quis imperdiet at, posuere vel nulla.
    <div class="panel panel-default bootcards-richtext">
      <div class="panel-heading">
        <h3 class="panel-title">Rich Text Card Heading</h3>
      </div>
      <div class="panel-body">
        <p class="lead">Lead body copy vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis pretium nisl. Etiam at vestibulum purus, sit amet blandit mi. Duis enim lectus, tempus nec varius sed, sollicitudin quis velit. Fusce quis sem porttitor, euismod ante vitae, ultricies erat.</p>
        <ul>
          <li>Duis cursus dui et turpis gravida sollicitudin.</li>
          <li>Donec eget mauris feugiat, euismod purus nec, feugiat neque.</li>
          <li>Nunc erat est, molestie eget magna in, consectetur euismod lorem.</li>
        </ul>
        <ol>
          <li>Sed luctus congue orci quis tempus.</li>
          <li>Praesent in viverra lorem.</li>
          <li>Suspendisse augue lacus, porta quis imperdiet at, posuere vel nulla.</li>
        </ol>
      </div>
      <div class="panel-footer">
        <small>Built with Bootcards - Rich Text Card</small>
      </div>
    </div>

    Modals

    Sometimes, you'll want to put something like a form or an important message in a modal, obscuring the other content completely.

    The markup is quite similar to Cards, with a header, body, and footer.

    <div class="modal fade in" role="dialog">
      <div class="modal-dialog">
    
        <div class="modal-content">
          <form class="form-horizontal">
    
            <div class="modal-header">
              <div class="btn-group pull-left">
                <button class="btn btn-danger" data-dismiss="modal">
                  Cancel
                </button>
              </div>
              <div class="btn-group pull-right">
                <button type="submit" class="btn btn-success">
                  Save
                </button>
              </div>
    
              <h3 class="modal-title">New Company</h3>
            </div>
    
            <div class="modal-body">
              <div class="form-group">
                <label class="col-xs-3 control-label">Name</label>
                <div class="col-xs-9">
                  <input type="text" name="name" class="form-control" placeholder="Company" value="">
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-3 control-label">Type</label>
                <div class="col-xs-9">
                  <select name="type" class="form-control" value="">
                    <option value="" selected="">Select a Type...</option>
                    <option value="Prospect">Prospect</option>
                    <option value="Customer">Customer</option>
                    <option value="Inactive">Inactive</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-3 control-label">Location</label>
                <div class="col-xs-9">
                   <input type="text" name="location" class="form-control" placeholder="Location" value="">
                </div>
              </div>
            </div>
    
            <div class="modal-footer">
              <small class="pull-left">Built with Bootcards - Form Card</small>
              <a href="#" class="btn btn-link btn-xs pull-right">View Source</a>
            </div>
    
          </form>
        </div>
    
      </div>
    </div>
    Remember to wrap buttons in the header of your modals in <div class="btn-group"> or your buttons might not work.