cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- Note: This is for Bootstrap v4 -->
<div class="container-fluid">
<p style="padding-top:10px;">
  Updated for v1.9.32
</p>
<h2>Alerts</h2>
<div>
  <div class="alert alert-success mdi mdi-star" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info mdi mdi-information" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning mdi mdi-alert" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger mdi mdi-skull" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-info mdi mdi-loading mdi-spin" role="alert">
  <strong>Processing</strong> Please wait while we process your request.
</div>
</div>
<h2>Badges</h2>
<ul class="list-group">
  <li class="list-group-item justify-content-between">
    List item with badge
    <span class="badge badge-default badge-pill mdi mdi-star">14</span>
  </li>
</ul>
<h2>Breadcrumbs</h2>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#" class="mdi mdi-home">Home</a></li>
  <li class="breadcrumb-item"><a href="#" class="mdi mdi-library">Library</a></li>
  <li class="breadcrumb-item active"><span class="mdi mdi-database">Data</span></li>
</ol>
<h2>Buttons</h2>
<div>
  <button type="button" class="btn btn-primary mdi mdi-home">Primary</button>
<button type="button" class="btn btn-secondary mdi mdi-star">Secondary</button>
<button type="button" class="btn btn-success mdi mdi-heart">Success</button>
<button type="button" class="btn btn-info mdi mdi-information">Info</button>
<button type="button" class="btn btn-warning mdi mdi-alert">Warning</button>
<button type="button" class="btn btn-danger mdi mdi-skull">Danger</button>
</div>
<div class="mt-2">
<button type="button" class="btn btn-outline-primary mdi mdi-home-outline">Primary</button>
<button type="button" class="btn btn-outline-secondary mdi mdi-star-outline">Secondary</button>
<button type="button" class="btn btn-outline-success mdi mdi-heart-outline">Success</button>
<button type="button" class="btn btn-outline-info mdi mdi-information-outline">Info</button>
<button type="button" class="btn btn-outline-warning mdi mdi-alert-outline">Warning</button>
<button type="button" class="btn btn-outline-danger mdi mdi-skull">Danger</button>
</div>
<div class="mt-2">
  <button class="btn btn-primary btn-sm mdi mdi-star"></button>
  <button class="btn btn-primary btn-sm mdi mdi-star">Small</button>
  <button class="btn btn-primary mdi mdi-star"></button>
  <button class="btn btn-primary mdi mdi-star">Regular</button>
  <button class="btn btn-primary btn-lg mdi mdi-star"></button>
  <button class="btn btn-primary btn-lg mdi mdi-star">Large</button>
</div>
<div>
  <button class="btn btn-primary mdi mdi-loading mdi-spin">Loading...</button>
</div>
<h2>Button Groups</h2>
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary mdi mdi-format-align-left">Left</button>
  <button type="button" class="btn btn-secondary mdi mdi-format-align-center">Middle</button>
  <button type="button" class="btn btn-secondary mdi mdi-format-align-right">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary mdi mdi-format-align-left"></button>
  <button type="button" class="btn btn-secondary mdi mdi-format-align-center"></button>
  <button type="button" class="btn btn-secondary mdi mdi-format-align-right"></button>
</div>
<h2>Card</h2>
<div class="card" style="width: 20rem;">
  <div style="background: #DDD;text-align: center;line-height:100px;">100x50</div>
  <div class="card-block">
    <h4 class="card-title mdi mdi-star">Card title</h4>
    <p class="card-text">Placeholder text <span class="mdi mdi-emoticon"></span>.</p>
  </div>
</div>
<!-- <h2>Carousel</h2> -->
<h2>Collapse</h2>
<div class="row">
  <div class="col-6">
    <button class="btn btn-primary btn-sm mdi mdi-chevron-up collapsed" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
  Toggle (Default Collapsed)
</button>
    <div class="collapse" id="collapseExample1">
      <div class="card card-block">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col-6">
    <button class="btn btn-primary btn-sm mdi mdi-chevron-up" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="true" aria-controls="collapseExample2">
  Toggle (Default Opened)
</button>
    <div class="show" id="collapseExample2">
      <div class="card card-block">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>
<h2>Dropdowns</h2>
  <div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle mdi mdi-star" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item mdi mdi-plus-circle" href="#">Action</a>
    <a class="dropdown-item mdi mdi-minus-circle" href="#">Another action</a>
    <a class="dropdown-item mdi mdi-star" href="#">Something else here</a>
  </div>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-danger mdi mdi-skull">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item mdi mdi-star" href="#">Action</a>
    <a class="dropdown-item mdi mdi-star" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item mdi mdi-star" href="#">Separated link</a>
  </div>
</div>
<!--<h2>Forms</h2>-->
<h2>Input group</h2>
<div class="input-group">
  <span class="input-group-addon mdi mdi-at" id="basic-addon1"></span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<h2>Jumbotron</h2>
  <div class="jumbotron">
  <h1 class="display-3 mdi mdi-star">Hello, world!</h1>
    <p class="lead">This is a simple hero unit <span class="mdi mdi-emoticon"></span>, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>
<h2>List group</h2>
<ul class="list-group">
  <li class="list-group-item mdi mdi-numeric-1-box">Cras justo odio</li>
  <li class="list-group-item mdi mdi-numeric-2-box">Dapibus ac facilisis in</li>
  <li class="list-group-item mdi mdi-numeric-3-box">Morbi leo risus</li>
</ul>
<h2>Modal</h2>
<div style="background:#F1F1F1;padding: 5px 0;">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title mdi mdi-application">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary mdi mdi-content-save">Save changes</button>
        </div>
      </div>
    </div>
  </div>
<h2>Navs</h2>
<nav class="nav">
  <a class="nav-link mdi mdi-home active" href="#">Active</a>
  <a class="nav-link mdi mdi-star" href="#">Link</a>
  <a class="nav-link mdi mdi-star" href="#">Link</a>
  <a class="nav-link mdi mdi-star disabled" href="#">Disabled</a>
</nav>
<h2>Navbar</h2>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand mdi mdi-application" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link mdi mdi-home" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link mdi mdi-star" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link mdi mdi-star disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0 mdi mdi-magnify" type="submit"></button>
    </form>
  </div>
</nav>
<h2>Pagination</h2>
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link mdi mdi-chevron-left" href="#"></a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link mdi mdi-chevron-right" href="#"></a></li>
  </ul>
</nav>
<h2>Popovers</h2>
<div class="bd-example-popover-static">
  <div class="popover popover-top">
    <h3 class="popover-title">
      <span class="mdi mdi-application"></span>
      Popover top
    </h3>
    <div class="popover-content">
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
  </div>

  <div class="popover popover-right">
    <h3 class="popover-title">
      <span class="mdi mdi-star"></span>
      Popover right
    </h3>
    <div class="popover-content">
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
  </div>

  <div class="popover popover-bottom">
    <h3 class="popover-title">
      <span class="mdi mdi-note"></span>
      Popover bottom
    </h3>
    <div class="popover-content">
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
  </div>

  <div class="popover popover-left">
    <h3 class="popover-title">
      <span class="mdi mdi-message-reply"></span>
      Popover left
    </h3>
    <div class="popover-content">
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
  </div>

  <div class="clearfix"></div>
</div>
<!--<h2>Progress</h2>-->
<!--<h2>Scrollspy</h2>-->
<h2>Tooltips</h2>
<div>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<span class='mdi mdi-star'></span><em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>
</div>
<h2>MDI Examples</h2>
<div>
  <h3>Sizes</h3>
  Inherit: <span class="mdi mdi-account"></span>
  mdi-18px: <span class="mdi mdi-account mdi-18px"></span>
  mdi-24px: <span class="mdi mdi-account mdi-24px"></span>
  mdi-36px: <span class="mdi mdi-account mdi-36px"></span>
  mdi-48px: <span class="mdi mdi-account mdi-48px"></span>
</div>
<div>
  <h3>Spin</h3>
  mdi-spin: <span class="mdi mdi-loading mdi-spin"></span>
  or <span class="mdi mdi-star mdi-spin"></span>
</div>
<p class="mt-3">That is all the examples, hopefully you found this useful. Good luck with your project!</p>
</div>
            
          
!
            
              // Basic formatting to make it easier to read.
h2 { margin: 15px 0 10px 0; }
h3 { font-size: 1.2em; }
// Bootstrap v4 Specific Tweaks
.alert.mdi::before { margin: 0 3px 0 -3px; }
.btn.mdi:not(:empty)::before{ margin: 0 3px 0 -3px; }
.breadcrumb-item {
  a.mdi, span.mdi {
    &::before { margin: 0 2px 0 -2px }
  }
}
.dropdown-item.mdi::before { margin: 0 8px 0 -10px; }
.list-group-item.mdi::before { margin: 0 6px 0 -6px; }
.modal-title.mdi::before { margin: 0 4px 0 0; }
.nav-link.mdi::before { margin: 0 4px 0 -4px; }
.navbar-brand.mdi::before { margin: 0 4px 0 0; }
.popover-title.mdi::before { margin: 0 4px 0 -4px; }
// Collapse Demo
.btn.mdi-chevron-up.collapsed::before {
  content: '\f140';
}
.bd-example-popover-static {
    padding-bottom: 1.5rem;
    background-color: #f9f9f9
}
.bd-example-popover-static .popover {
    position: relative;
    display: block;
    float: left;
    width: 260px;
    margin: 0.75rem
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console