There are a lot of advanced editing options available for you to enhance the look and feel of your website. Below are a number of options that are available for you; however, please note that you will have to directly edit the source code in order to add these features.
Buttons
The color of the button is determined by a class. The classes are btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, and btn-link. The size of the button is determined by another class: btn-lg, btn-sm, or btn-xs. The default button size is the second line of buttons. These classes are added in addition to the "btn" class.
The style of the table is determined by a class. The classes from left to right are table (the default), table-striped, table-bordered, and table-condensed. These classes are added in addition to the "table" class.
The image source for the thumbnails can be found by accessing file storage, navigating to the the image, and copying the URL after the root of the main site and including the first backslash "/". The beginning of your image source should be /yoursite/files/view/images/
Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
<divclass="thumbnail"> <imgsrc="/site/files/view/images/imagename.extension" alt="Name for this image that will display if the image is broken"/> <divclass="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div>
Labels
The color of the label is determined by a class. The classes are label-default, label-primary, label-success, label-info, label-warning, and label-danger. The size of the label is determined by the heading. The headings are (top to bottom) h1, h2, h3, h4, h5, h6, and p.
The color of the alert is determined by a class. The classes are alert-succes, alert-info, alert-warning, and alert-danger. These classes are added in addition to the class "alert".
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Alerts
<divclass="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message. </div>
<divclass="alert alert-info" role="alert">
<strong>Heads Up!</strong> This alert needs your attention, but it's not super important. </div>
<divclass="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good. </div>
<divclass="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again. </div>
List Groups
List groups are broken into two pieces with the classes "list-group" to denote a list group and "list-group-item" to specify the particular items in the list.
<ulclass="list-group">
<liclass="list-group-item">Cras justo odio</li>
<liclass="list-group-item">Dapibus ac facilisis in</li>
<liclass="list-group-item">Morbi leo risus</li>
<liclass="list-group-item">Porta ac consectetur ac</li>
<liclass="list-group-item">Vestibulum at eros</li>
</ul>
<divclass="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>
<divclass="list-group"> <a href="#" class="list-group-item active"> <h4class="list-group-item-heading">List group item heading</h4> <pclass="list-group-item-text">Cras justo odio</p> </a> <a href="#" class="list-group-item"> <h4class="list-group-item-heading">List group item heading</h4> <pclass="list-group-item-text">Dapibus ac facilisis in</p> </a> <a href="#" class="list-group-item"> <h4class="list-group-item-heading">List group item heading</h4> <pclass="list-group-item-text">Morbi leo risus</p> </a> </div>
Panels
The color of the panel is determined by a class. The classes are panel-default, panel-primary, panel-success, panel-info, panel-warning, and panel-danger. The classes are added to the class "panel".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
Wells
<divclass="well"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p> </div>
