Elements

Jumbotron

Hello world

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.


<div class="jumbotron">
    <h3>Hello world</h3>
    <p>This is a template for a simple marketing or informational website. 
    It includes a large callout called a jumbotron and three supporting pieces of content. 
    Use it as a starting point to create something more unique.</p>
    <button class="button-primary">Learn more</button>
</div>

Badges

This is a default badge 2

This is a primary badge 2

This is a success badge 2

This is a warning badge 2

This is a danger badge 2

This is a dark badge 2


<p>This is a default badge <span class="badge">2</span></p>
<p>This is a primary badge <span class="badge primary">2</span></p>
<p>This is a success badge <span class="badge success">2</span></p>
<p>This is a warning badge <span class="badge warning">2</span></p>
<p>This is a danger badge <span class="badge danger">2</span></p>
<p>This is a dark badge <span class="badge dark">2</span></p>

Buttons


<button class="button">Default</button>
<button class="button-primary">Primary</button>
<button class="button-success">Success</button>
<button class="button-warning">Warning</button>
<button class="button-danger">Danger</button>
<button class="button-dark">Dark</button>

Outline Buttons


<button class="button outline">Default</button>
<button class="button-primary outline">Primary</button>
<button class="button-success outline">Success</button>
<button class="button-warning outline">Warning</button>
<button class="button-danger outline">Danger</button>
<button class="button-dark outline">Dark</button>

Disabled buttons


<button class="button" disabled>Default</button>
<button class="button-primary" disabled>Primary</button>
<button class="button-success" disabled>Success</button>
<button class="button-warning" disabled>Warning</button>
<button class="button-danger" disabled>Danger</button>
<button class="button-dark" disabled>Dark</button>

Outline disabled buttons


<button class="button outline" disabled>Default</button>
<button class="button-primary outline" disabled>Primary</button>
<button class="button-success outline" disabled>Success</button>
<button class="button-warning outline" disabled>Warning</button>
<button class="button-danger outline" disabled>Danger</button>
<button class="button-dark outline" disabled>Dark</button>

Loader example


                        <div class="loader"></div>

Modal window


<!--The button-->
<button class="button-dark outline" onclick="openModal('myModal');">open modal</button>

...

<!-- The modal itself-->
<div id="myModal" class="modal">
    <div class="modal-content modal-center modal-fullscreen">
        <div class="modal-header">
            <span class="close" onclick="closeModal('myModal');">×</span>
            <h2>Modal Header</h2>
        </div>
        <div class="modal-body">
            <p>Some text in the Modal Body</p>
            <p>Some other text...</p>
        </div>
        <div class="modal-footer">
            <h3>Footer</h3>
            <div  style="text-align: right;">
                <button class="button-danger" onclick="closeModal('myModal');">Close</button>
            </div>
        </div>
    </div> 
</div>


<!--The button-->
<button class="button-success outline" onclick="openModal('modalAlert');">open alert modal</button>

...

<!-- The modal itself-->
<div id="modalAlert" class="modal">
    <div class="modal-content modal-center modal-lg success">
        <div class="modal-header"><span class="closebtn" onclick="closeModal('modalAlert');">×</span></div>
        <div class="modal-body">
            This is an alert modal.
        </div>
    </div>
</div>


<!--The button-->
<button class="button-primary outline" onclick="openModal('modalTop');">open top modal</button>

...

<!-- The modal itself-->
<div id="modalTop" class="modal">
    <div class="modal-content modal-top modal-lg primary">
        <div class="modal-header"><span class="closebtn" onclick="closeModal('modalTop');">×</span></div>
        <div class="modal-body">
            This is an alert modal on the top of the page.
        </div>
    </div>
</div>


<!--The button-->
<button class="button-warning outline" onclick="openModal('modalLeft');">open left modal</button>

...

<!-- The modal itself-->
<div id="modalLeft" class="modal">
    <div class="modal-content modal-left">
        <div class="modal-header">
            <span class="close" onclick="closeModal('modalLeft');">×</span>
            <h2>Left Modal</h2>
        </div>
        <div class="modal-body">
            <p>This modal appears from the left</p>
            
        </div>
        <div class="modal-footer">
            <h3>Footer</h3>
            <div  style="text-align: right;">
                <button class="button-danger" onclick="closeModal('modalLeft');">Close</button>
            </div>
        </div>
    </div> 
</div>


<!--The button-->
<button class="button-danger outline" onclick="openModal('modalRight');">open right modal</button>

...

<!-- The modal itself-->
<div id="modalRight" class="modal">
    <div class="modal-content modal-right modal-sm">
        <div class="modal-header">
            <span class="close" onclick="closeModal('modalRight');">×</span>
            <h2>Right Modal</h2>
        </div>
        <div class="modal-body">
            <p>This modal appears from the right</p>
            
        </div>
        <div class="modal-footer">
            <h3>Footer</h3>
            <div  style="text-align: right;">
                <button class="button-danger" onclick="closeModal('modalRight');">Close</button>
            </div>
        </div>
    </div> 
</div>


<!--The button-->
<button class="button outline" onclick="openModal('modalBottom');">open bottom modal</button>

...

<!-- The modal itself-->
<div id="modalBottom" class="modal">
    <div class="modal-content modal-bottom modal-md">
        <div class="modal-header">
            <span class="close" onclick="closeModal('modalBottom');">×</span>
            <h2>Bottom Modal</h2>
        </div>
        <div class="modal-body">
            <p>This modal appears from the bottom</p>
            
        </div>
        <div class="modal-footer">
            <h3>Footer</h3>
            <div  style="text-align: right;">
                <button class="button-danger" onclick="closeModal('modalBottom');">Close</button>
            </div>
        </div>
    </div> 
</div>

Modal image preview


<!--The image-->
<img id="myImg" class="imgToPreview" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" 
onclick="openImageModal(this, 'imgModal');">

...

<!-- The modal itself-->
<div id="imgModal" class="modal">    
    <span class="modal-image-close" onclick="closeModal('imgModal');">×</span>
    <img class="modal-content modal-center" id="modalImage">
    <div id="modalCaption" class="modal-caption"></div>
</div>

Alerts

× This is an alert box.


<div class="alert">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    This is an alert box.
</div>
<div class="alert primary">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    This is an alert box.
</div>
<div class="alert success">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    This is an alert box.
</div>
<div class="alert warning">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    This is an alert box.
</div>
<div class="alert danger">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    This is an alert box.
</div>                     
<div class="alert dark">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
    This is an alert box.
</div>

Notes

Danger! Some text...


<div class="note">
    <strong>Danger!</strong> Some text...
</div> 
<div class="note primary">
    <strong>Danger!</strong> Some text...
</div>
<div class="note success">
    <strong>Danger!</strong> Some text...
</div>
<div class="note warning">
    <strong>Danger!</strong> Some text...
</div>
<div class="note danger">
    <strong>Danger!</strong> Some text...
</div>
<div class="note dark">
    <strong>Danger!</strong> Some text...
</div>

Progress bar


<div class="progressBar">
    <div class="progress primary" style="width: 0%"></div>
</div>  
<div class="progressBar">
    <div class="progress success" style="width: 0%"></div>
</div>  
<div class="progressBar">
    <div class="progress warning" style="width: 0%"></div>
</div>  
<div class="progressBar">
    <div class="progress danger" style="width: 0%"></div>
</div> 
<div class="progressBar">
    <div class="progress dark" style="width: 0%"></div>
</div> 

...

<script type="text/javascript">
    function changeValues() {        
        document.getElementsByClassName("progress primary")[0].style.width = "3%";
        document.getElementsByClassName("progress success")[0].style.width = "60%";
        document.getElementsByClassName("progress warning")[0].style.width = "23%";
        document.getElementsByClassName("progress danger")[0].style.width = "70%";
        document.getElementsByClassName("progress dark")[0].style.width = "43%";
    }
</script>

Cards

Card title

Card body

Card title

Card body

Card title

Card body

Card title

Card body

Card title

Card body

Card title

Card body


<div class="col-md-3 card">
    <h3>Card title</h3>
    <hr />
    <p>Card body</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-3 card primary">
    <h3>Card title</h3>
    <hr />
    <p>Card body</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-3 card success">
    <h3>Card title</h3>
    <hr />
    <p>Card body</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-3 card warning">
    <h3>Card title</h3>
    <hr />
    <p>Card body</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-3 card danger">
    <h3>Card title</h3>
    <hr />
    <p>Card body</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-3 card dark">
    <h3>Card title</h3>
    <hr />
    <p>Card body</p>
</div>