Sponsor Index

For This:

Copy This:

h1. Main heading style with small item

<h1>h1. Main heading style <small>with small item</small></h1>

h2. Main heading style

<h2>h2. Main heading style</h2>

h3. Main heading style

<h3>h3. Main heading style</h3>

h4. Main heading style

<h4>h4. Main heading style</h4>

h5. Main heading style

<h5>h5. Main heading style</h5>

h6. Main heading style

<h6>h6. Main heading style</h6>

Lead style paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, nunc vel dapibus eleifend, nisi massa maximus libero, at fringilla sapien lacus et ex. Donec varius volutpat pulvinar.

<p class="lead>Lead style paragraph. <a href="#">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Donec hendrerit, nunc vel dapibus eleifend, nisi massa maximus libero, at fringilla sapien lacus et ex. Donec varius volutpat pulvinar.</p>

Normal style paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, nunc vel dapibus eleifend, nisi massa maximus libero, at fringilla sapien lacus et ex. Donec varius volutpat pulvinar.

<p>Normal style paragraph. <a href="#">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Donec hendrerit, nunc vel dapibus eleifend, nisi massa maximus libero, at fringilla sapien lacus et ex. Donec varius volutpat pulvinar.</p>

This text is bold

This text is italic

This text is small

This text is underlined

~~This text is struckthrough~~

This text is highlighted

This text is bold

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Lowercased text.

Uppercased text.

Capitalized text.

<p><strong>This text is bold</strong></p>

<p><em>This text is italic</em></p>

<p><small>This text is small</small></p>

<p><u>This text is underlined</u></p>

<p><s>This text is struckthrough</s></p>

<p><mark>This text is highlighted</mark></p>

<p><strong>This text is bold</strong></p>

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Justified text.</p>

<p class="text-nowrap">No wrap text.</p>

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Addresses

Bootstrap/Core provides a semantic, properly formed format for addresses:

Penton Media
5541 Central Ave #150
Boulder, CO 80301
P: (303) 998-9011

Full Name
first.last@example.com

<address>
  <strong>Penton Media</strong><br>
  5541 Central Ave #150<br>
  Boulder, CO 80301<br>
  <abbr title="Phone">P:</abbr> (303) 998-9011
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Text states

Text states are quick and easy way to provide colored text on a span without having to use inline markup.

Text Muted Link Text.

Text Primary Link Text.

Text SuccessLink Text.

Text Info Link Text.

Text Warning Link Text.

Text Danger Link Text.

<p class="text-muted">Text Muted <a href="#">Link Text</a>.

<p class="text-primary">Text Primary <a href="#">Link Text</a>.

<p class="text-success">Text Success <a href="#">Link Text</a>.

<p class="text-info">Text Info <a href="#">Link Text</a>.

<p class="text-warning">Text Warning <a href="#">Link Text</a>.

<p class="text-danger">Text Danger <a href="#">Link Text</a>.

BG Primary Link Text.

BG Success Link Text.

BG Info Link Text.

BG Warning Link Text.

BG Danger Link Text.

<p class="bg-primary">BG Primary <a href="#">Link Text</a>.
<p class="bg-success">BG Success <a href="#">Link Text</a>.
<p class="bg-info">BG Info <a href="#">Link Text</a>.
<p class="bg-warning">BG Warning <a href="#">Link Text</a>.
<p class="bg-danger">BG Danger <a href="#">Link Text</a>.

You can combine text styles and states with text elements to create rich typography

**This a bolded headline with part that's italicized and struck through and the last word is red.**

FontAwesome

FontAwesome Icons are supported on Core and can be combined with text styles to make for rich icons. A full list of FontAwesome icons is available here.

Sizes:

fa-lg fa-2x fa-3x fa-4x fa-5x

Rotated & Flipped

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

Stacked

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

<i class="fa fa-rocket fa-lg"></i> fa-lg
<i class="fa fa-rocket fa-2x"></i> fa-2x
<i class="fa fa-rocket fa-3x"></i> fa-3x
<i class="fa fa-rocket fa-4x"></i> fa-4x
<i class="fa fa-rocket fa-5x"></i> fa-5x

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

Tables

Tables are a great way of presenting tabular data, like pricing table or for a comparison chart. Tables should never be used for layout on any of our sites.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

A striped variant is also available for further clarity:

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Buttons

Default Primary Success Info Warning Danger Link

Buttons are fancy links. They're great for CTAs and other things that need prominence on a page. You can apply any of the brand colors to them using the appropriate classes. There are also three sizes of button, the default size, a small size and a large size.

Default Size Small Size Large Size

<a class="btn btn-default" href="#">Default</a>

<a class="btn btn-primary" href="#">Primary</a>

<a class="btn btn-success" href="#">Success</a>

<a class="btn btn-info" href="#">Info</a>

<a class="btn btn-warning" href="#">Warning</a>

<a class="btn btn-danger" href="#">Danger</a>

<a class="btn btn-link" href="#">Link</a>

<a class="btn btn-primary btn-sm" href="#">Small</a>

<a class="btn btn-primary btn-lg" href="#">Large</a>

Labels

Default Primary Success Info Warning Danger

Labels are similar to buttons but are just a visual call out of a snippet of text. Use them to highlight things like numbers.

Number of new registrants for this year's event: 100!

Default

Primary

Success

Info

Warning

Danger

Panels

Panels are great contextual container objects for things like lists, submenus, etc.

Panel Default

Panel content

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel Default</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel Primary

Panel content

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel Primary</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel Success

Panel content

<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Panel Success</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel Info

Panel content

<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Panel Info</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel Warning

Panel content

<div class="panel panel-warning">
  <div class="panel-heading">
    <h3 class="panel-title">Panel Warning</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel Danger

Panel content

<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">Panel Danger</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Media Objects

Media Objects are good for sectional content, like steps of exhibitor registration or a landing page. FontAwesome icons can be used instead of images as well.

Media Object Top Aligned

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media Object Middle Aligned

Media Object Right and Bottom Aligned

<div class="media">
  <div class="media-left media-top">
    <a href="#">
      <img class="media-object" src="//placehold.it/64">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Object Headline</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  </div>
</div>

Wells

Wells are useful for both inline sidebars of information or to call attention to a key part of text.

This is a Well.

<div class="well">This is a Well.</div>

Alerts

Alerts are great for CTAs or for highlighting updates to a page. They should not replace wells as they lose their specialness.

Alert Info

<div class="alert alert-info" role="alert">
  <strong>Alert Info</strong>
</div>

Alert Success

<div class="alert alert-success" role="alert">
 <strong>Alert Success</strong>
</div>

Alert Warning

<div class="alert alert-warning" role="alert">
  <strong>Alert Warning</strong>
</div>

Alert Danger

<div class="alert alert-danger" role="alert">
  <strong>Alert Danger</strong>
</div>

Images

There's several built in styles for images in Bootstrap/Core. Round corners, circle images and thumbnails. Thumbnails are great for images that link to larger versions, circular and rounded corner images can be used to add visual interest to images.

<img src="//placehold.it/200">
<img src="//placehold.it/200" class="img-rounded">
<img src="//placehold.it/200" class="img-circle">
<img src="//placehold.it/200" class="img-thumbnail>

Responsive Images

Responsive images shrink with their container. Just add the class img-responsive to the image. All of the images below are the same size:

Responsive Embeds

Like responsive images, responsive embeds shrink video/flash/iframes/etc to fit the container object:

16:9 aspect ratio, ideal for widescreen videos or maps on pages with wide real estate but short height.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zB4I68XVPzQ"></iframe>
</div>

4:3 aspect ratio, ideal for old videos in the square TV format of pre-HD, or maps where coverage is needed in both directions.

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3055.4818334451447!2d-105.22587358439407!3d40.020020487594124!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x876bedf9ba5db86f%3A0x43aa56af88ee850!2s5541+Central+Ave%2C+Boulder%2C+CO+80301!5e0!3m2!1sen!2sus!4v1493154564074"></iframe>
</div>

Note: be sure to only copy the URL of the iframe/video/etc and add it to the responsive embed. Ignore the height and width markup and frameborder="0", both of those are taken care of by this class.

Sponsor Index

For This:

Copy This:

h1. Main heading style with small item

h2. Main heading style

h3. Main heading style

h4. Main heading style

h5. Main heading style

h6. Main heading style

Blockquotes

Addresses

Text states

This a bolded headline with part that's italicized and struck through and the last word is red.

FontAwesome

Tables

Buttons

Labels

Panels

Panel Default

Panel Primary

Panel Success

Panel Info

Panel Warning

Panel Danger

Media Objects

Media Object Top Aligned

Media Object Middle Aligned

Media Object Right and Bottom Aligned

Wells

Alerts

Images

Responsive Images

Responsive Embeds

Sponsors

Countdown

RSS Feed

**This a bolded headline with part that's italicized and struck through and the last word is red.**