Editors’ Note: This feature appears as it was published in the edition of UT Dallas Magazine. Titles or faculty members listed may have changed since that time.

Typography

<h1>Heading 1</h1> use only once per page

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Paragraphs will look like this. The UT Dallas Magazine uses the Roboto Slab font family.

Unordered lists
Look like
This

Numbered lists
Look like
This

Links

This Is a Linked Heading

Embedded links will look like this.

Article tags

On Campus

From the Lab

Arts & Culture

Grid System

The UT Dallas Magazine uses Bootstrap’s 3.3.7 grid system. Its pre-defined classes are mobile-first. Columns per row can range from 1 to 12 columns.

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Laptops (≥992px)	Large devices Desktops (≥1200px)
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Grid behavior	Horizontal at all times	Starts stacked full-width, then horizontal above breakpoints
# of columns	up to 12
Gutter width	30px (15px on each side of a column)

Examples

1. Stack all columns at full-width on mobile:

.col-md-2

.col-sm-8

.col-sm-4

.col-md-4

.col-lg-6

2. Stack the columns on mobile by making one full-width and the other half-width:

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

3. Make columns start at 50% wide on mobile and bump up to 33.3% wide on desktop:

.col-xs-6 .col-md-4

4. Make columns 50% wide both on mobile and desktop:

.col-xs-6

<!-- 1. Stack the columns at full width on mobile -->
    <div class="row">
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-sm-8</div>
      <div class="col-md-4">.col-sm-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-lg-6</div>
      <div class="col-md-6">.col-lg-6</div>
    </div>

<!-- 2. Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

<!-- 3. Make columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

<!-- 4. Make columns 50% wide both on mobile and desktop -->
    <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
    </div>

Images

Use the .img-responsive class for images to adjust fluidly within its container width. The class applies max-width:100%; and display:block to the image.

Example

This image placeholder is set to adjust responsively within its parent column.

<div class="col-sm-3">
  <img class="img-responsive" alt="placeholder" src="img/2x1.jpg" />
</div>

STYLE GUIDE