Menu
  1. World
    • All
    • World
      More
    1. Lifestyle
      • All
      • Arts
      • Fashion
      • Health
      • Photography
      • Recipes
      • Travel
      • Cars
      • Business
        More

        No content

        A problem occurred while loading content.

        Previous Next
      1. Fashion
        Previous Next
      2. Sport
      3. Music

        No content

        A problem occurred while loading content.

        Previous Next
      4. Events
        Previous Next
      5. Forum
      6. Maps
      7. Features
      User Menu Search
      Close

      LIST GROUPS

      Basic example

      • Cras justo odio
      • Dapibus ac facilisis in
      • Morbi leo risus
      • Porta ac consectetur ac
      • Vestibulum at eros
      <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>

      Badges

      • 14 Cras justo odio
      • 2 Dapibus ac facilisis in
      • 1 Morbi leo risus
      <ul class="list-group">
        <li class="list-group-item">
          <span class="badge">14</span>
          Cras justo odio
        </li>
      </ul>

      Linked items

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

      Disabled items

      <div class="list-group">
        <a href="#" class="list-group-item disabled">
          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>

      Contextual classes

      • Dapibus ac facilisis in
      • Cras sit amet nibh libero
      • Porta ac consectetur ac
      • Vestibulum at eros
      <ul class="list-group">
        <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
        <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
        <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
        <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
      </ul>
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
        <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
      </div>

      Custom content

      <div class="list-group">
        <a href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <p class="list-group-item-text">...</p>
        </a>
      </div>

      Basic example

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

      Panel with heading

      Panel heading without title
      Panel content

      Panel title

      Panel content
      <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-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>

      Panel with footer

      Panel content
      <div class="panel panel-default">
        <div class="panel-body">
          Panel content
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>

      Contextual alternatives

      Panel title

      Panel content

      Panel title

      Panel content

      Panel title

      Panel content

      Panel title

      Panel content

      Panel title

      Panel content
      View Code
      <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
          <div class="panel panel-success">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
          <div class="panel panel-warning">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
          <div class="panel panel-danger">
            <div class="panel-heading">
              <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>

      With tables

      Panel heading

      Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

      # First Name Last Name Username
      1 Mark Otto @mdo
      2 Jacob Thornton @fat
      3 Larry the Bird @twitter
      View Code
      <div class="panel panel-default">
            <div class="panel-heading">Panel heading</div>
            <div class="panel-body">
              <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div> 
      Panel heading
      # First Name Last Name Username
      1 Mark Otto @mdo
      2 Jacob Thornton @fat
      3 Larry the Bird @twitter
      View Code
      <div class="panel panel-default">
            <div class="panel-heading">Panel heading</div>
      
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
          </div>

      With list groups

      Panel heading

      Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

      • Cras justo odio
      • Dapibus ac facilisis in
      • Morbi leo risus
      • Porta ac consectetur ac
      • Vestibulum at eros
      View Code
      <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">Panel heading</div>
        <div class="panel-body">
          <p>...</p>
        </div>
      
        <!-- List group -->
        <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>
      </div>
      Terms Of UsePrivacy StatementCopyright 2019 NewsMagazine DNN/DotNetNuke/EVOQ theme Demo by EasyDNNsolutions.com
      Back To Top