Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

  • Rows must be placed within a .container (fixed-widt) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin with elements with a class of .row.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

Look to the examples for applying these principles to your code.

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 752px 972px 1172px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto 60px ~78px 95px
Gutter width 32px (16px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that stars out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

Example

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
     <div class="col-md-8">.col-md-8</div>
     <div class="col-md-4">.col-md-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-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>

Example: Fluid container

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid

<div class="container-fluid">
  <div class="row">
      ...
  </div>
</div>

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

Example

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- 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>

<!-- 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>

<!-- Columns are always 50% wide, 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>

Example: Mobile, tablet, desktop

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

Example

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Example: Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Example

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

Example

.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

Offsetting columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

Example

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
<div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Example

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="row">
 <div class="col-sm-9">
   Level 1: .col-sm-9
   <div class="row">
     <div class="col-xs-8 col-sm-6">
       Level 2: .col-xs-8 .col-sm-6
     </div>
     <div class="col-xs-4 col-sm-6">
       Level 2: .col-xs-4 .col-sm-6
     </div>
   </div>
 </div>
</div>

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

Example

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Spacing

Spacing utilities that apply to all breakpoints, from xs to lg, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, and lg.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • min - (by default) for classes that set the margin or padding to .0625rem (~1px)
  • 1 - (by default) for classes that set the margin or padding to .25rem (~4px)
  • 2 - (by default) for classes that set the margin or padding to .5rem (~8px)
  • 3 - (by default) for classes that set the margin or padding to 1rem (~16px)
  • 4 - (by default) for classes that set the margin or padding to 1.5rem (~24px)
  • 5 - (by default) for classes that set the margin or padding to 3rem (~48px)
  • 6 - (by default) for classes that set the margin or padding to 4rem (~64px)
  • 7 - (by default) for classes that set the margin or padding to 5rem (~80px)
  • 8 - (by default) for classes that set the margin or padding to 6rem (~96px)
  • 9 - (by default) for classes that set the margin or padding to 7rem (~112px)
  • 10 - (by default) for classes that set the margin or padding to 8rem (~128px)
    NOTE: Size is set using the variable $spacer which by default is set to 1rem. All margin/padding sizes can be changed by editing this variable.
It is important to note the differences between margin and padding. The single biggest Difference is that vertical margins auto-collapse, and padding doesn't.

Example

Margins
This is a div with both top and bottom margins set to 16px
This is a div with both top and bottom margins set to 24px
This is a div with both top and bottom margins set to 96px
Padding
This is a div with both top and bottom padding set to 8px
This is a div with both top and bottom padding set to 24px
This is a div with both top and bottom padding set to 96px
<h5 class="text-left">Margins</h5>
<div class="row">
  <div class="col-xs-12 my-2">This is a div with both top and bottom margins set to 16px</div>
</div>
<div class="row">
  <div class="col-xs-12 my-4">This is a div with both top and bottom margins set to 24px</div>
</div>
<div class="row">
  <div class="col-xs-12 my-8">This is a div with both top and bottom margins set to 96px</div>
</div>
<h5 class="text-left">Padding</h5>
<div class="row">
  <div class="col-xs-12 py-2">This is a div with both top and bottom padding set to 8px</div>
</div>
<div class="row">
  <div class="col-xs-12 py-4">This is a div with both top and bottom padding set to 24px</div>
</div>
<div class="row">
  <div class="col-xs-12 py-8">This is a div with both top and bottom padding set to 96px</div>
</div>

Usage

.mt-0 { 
  margin-top: 0 !important;
}
.ml-1 { 
  margin-left: 4px !important;
  margin-left: ($spacer * .25);
    }
.px-2 {
  padding-right: 8px !important;
  padding-right: ($spacer * .5) !important; 
  padding-left: 8px !important;
  padding-left: ($spacer * .5) !important; 
}
.p-3 {
  padding: 16px !important;
  padding: $spacer !important;
}

Horizontal Centering

UA-Bootstrap now includes Bootstrap 4's .mx-auto class for horizontally centering fixed-width block level content. That is, content that has display: block and a width set. It does this by setting the horizontal margins to auto

<div class="row show-grid">
  <div class="mx-auto" style="width:200px;"><a class="btn btn-default btn-block">Centered Element</a></div>
</div>

Row buffer

Deprecation Warning

WARNING: Buffer classes have been deprecated in favor of spacing classes (See Spacing)

In order to allow the typography to set the vertical rhythm, rows do not have any margins around them by default. These classes are intended to be used sparingly only when default vertical rhythm appears unnatural: .top-buffer-md-* or .bottom-buffer-md-* .

This adds a series of buffer classes, and buffer resets. The buffers follow the pattern of SIDE-buffer-SIZE-* The resets follow the pattern of SIDE-buffer-SIZE-reset(excluding xs)

SIDE referes to which side of the element you would like the buffer class to be applied to (top/bottom/left/right).

SIZE referes to the viewport(s) you would like the buffer classes applied to. The viewports use the (xs/sm/md/lg) naming scheme.

NOTE: Buffer classes will be applied to the viewport you specify, as well as any 'larger' viewports.

For example: If I want to apply a 5px top buffer to an element, but I want it applied on only xs and sm viewports I would use: top-buffer-xs-5 AND top-buffer-md-reset

That will apply a top buffer of 5px to my element at the xs viewport and up, but then reset the buffer of the element on md viewport and up.

Additional bottom buffer classes added

Initially .bottom-buffer-* was added to bootstrap but now additional classes have been added to help positioning on different viewports for example .bottom-buffer-md-*

Example

Top Buffer
top-buffer-*-0 or top-buffer-*-reset, default buffer is zero. You can also just leave off if not removing margin.
top-buffer-*-1
top-buffer-*-5
top-buffer-*-10
top-buffer-*-15
top-buffer-*-20
top-buffer-*-25
top-buffer-*-30
top-buffer-*-50
<div class="row">
  <div class="col-xs-12">top-buffer-*-0 or top-buffer-*-reset, default buffer is
  zero. You can also just leave off if not removing margin.</div>
</div>
<div class="row top-buffer-xs-1">
  <div class="col-xs-12">top-buffer-*-1</div>
</div>
<div class="row top-buffer-xs-5">
  <div class="col-xs-12">top-buffer-*-5</div>
</div>
<div class="row top-buffer-xs-10">
  <div class="col-xs-12">top-buffer-*-10</div>
</div>
<div class="row top-buffer-xs-15">
  <div class="col-xs-12">top-buffer-*-15</div>
</div>
<div class="row top-buffer-xs-20">
  <div class="col-xs-12">top-buffer-*-20</div>
</div>
<div class="row top-buffer-xs-25">
  <div class="col-xs-12">top-buffer-*-25</div>
</div>
<div class="row top-buffer-xs-30">
  <div class="col-xs-12">top-buffer-*-30</div>
</div>
<div class="row top-buffer-xs-50">
  <div class="col-xs-12">top-buffer-*-50</div>
</div>

Example

Bottom Buffer
bottom-buffer-*-0 or bottom-buffer-*-reset, default buffer is zero. You can also just leave off if not removing margin.
bottom-buffer-*-1
bottom-buffer-*-5
bottom-buffer-*-10
bottom-buffer-*-15
bottom-buffer-*-20
bottom-buffer-*-25
bottom-buffer-*-30
bottom-buffer-*-50
<div class="row">
  <div class="col-xs-12">bottom-buffer-*-0 or bottom-buffer-*-reset, default buffer is
  zero. You can also just leave off if not removing margin.</div>
</div>
<div class="row bottom-buffer-xs-1">
  <div class="col-xs-12">bottom-buffer-*-1</div>
</div>
<div class="row bottom-buffer-xs-5">
  <div class="col-xs-12">bottom-buffer-*-5</div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-12">bottom-buffer-*-10</div>
</div>
<div class="row bottom-buffer-xs-15">
  <div class="col-xs-12">bottom-buffer-*-15</div>
</div>
<div class="row bottom-buffer-xs-20">
  <div class="col-xs-12">bottom-buffer-*-20</div>
</div>
<div class="row bottom-buffer-xs-25">
  <div class="col-xs-12">bottom-buffer-*-25</div>
</div>
<div class="row bottom-buffer-xs-30">
  <div class="col-xs-12">bottom-buffer-*-30</div>
</div>
<div class="row bottom-buffer-xs-50">
  <div class="col-xs-12">bottom-buffer-*-50</div>
</div>

Column buffer

Deprecation Warning

WARNING: Buffer classes have been deprecated in favor of spacing classes (See Spacing)

This adds a series of buffer classes, and buffer resets. The buffers follow the pattern of SIDE-buffer-SIZE-* The resets follow the pattern of SIDE-buffer-SIZE-reset (excluding xs)

SIDE referes to which side of the element you would like the buffer class to be applied to (top/bottom/left/right).

SIZE referes to the viewport(s) you would like the buffer classes applied to. The viewports use the (xs/sm/md/lg) naming scheme.

NOTE: Buffer classes will be applied to the viewport you specify, as well as any 'larger' viewports.

For example: If I want to apply a 5px top buffer to an element, but I want it applied on only xs and sm viewports I would use: top-buffer-xs-5 AND top-buffer-md-reset

That will apply a top buffer of 5px to my element at the xs viewport and up, but then reset the buffer of the element on md viewport and up.

With the .right-buffer-*-* or .left-buffer-*-* class, you can add buffer to the right and left of columns.

<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-0">
    <a class="btn btn-default btn-block">right-buffer-*-0</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-0">
    <a class="btn btn-default btn-block">left-buffer-*-0</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-1">
    <a class="btn btn-default btn-block">right-buffer-*-1</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-1">
    <a class="btn btn-default btn-block">left-buffer-*-1</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-5">
    <a class="btn btn-default btn-block">right-buffer-*-5</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-5">
    <a class="btn btn-default btn-block">left-buffer-*-5</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-10">
    <a class="btn btn-default btn-block">right-buffer-*-10</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-10">
    <a class="btn btn-default btn-block">left-buffer-*-10</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-15">
    <a class="btn btn-default btn-block">right-buffer-*-15</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-15">
    <a class="btn btn-default btn-block">left-buffer-*-15</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-20">
    <a class="btn btn-default btn-block">right-buffer-*-20</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-20">
    <a class="btn btn-default btn-block">left-buffer-*-20</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-30">
    <a class="btn btn-default btn-block">right-buffer-*-30</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-30">
    <a class="btn btn-default btn-block">left-buffer-*-30</a>
  </div>
</div>

Display

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

For more information see: Bootstrap 4 Display

How it works

Change the value of the display property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.

Notation

Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

.d-{value} for xs .d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.

Hiding Elements

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-*class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block

Example

hide on screens wider than lg
hide on screens smaller than lg

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Examples

d-inline

d-inline
d-inline

<div class="d-inline p-2 bg-red text-white">d-inline</div>
<div class="d-inline p-2 bg-blue text-white">d-inline</div>

d-block

d-block d-block

<span class="d-block p-2 bg-red text-white">d-block</span>
<span class="d-block p-2 bg-blue text-white">d-block</span>

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

For more information see Bootstrap 4 Flex

Additional information on how flex works can be found on CSS-Tricks' Complete Guide to Flexbox

Compatibility Warning

Internet Explorer and Microsoft Edge require that a specific width be defined for flex containers in order to display properly.

Enable Flex Behaviors

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

I'm a flexbox container!
<div class="d-flex p-2 bg-red text-white">I'm a flexbox container!</div>
I'm an inline flexbox container!
<div class="d-inline-flex p-2 bg-red text-white">I'm an inline flexbox container!</div>

Responsive variations also exist for .d-flex and .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row well">
    <div class="p-2 bg-red text-white">Flex item 1</div>
    <div class="p-2 bg-blue text-white">Flex item 2</div>
    <div class="p-2 bg-red text-white">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse well">
    <div class="p-2 bg-red text-white">Flex item 1</div>
    <div class="p-2 bg-blue text-white">Flex item 2</div>
    <div class="p-2 bg-red text-white">Flex item 3</div>
</div>

Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

Flex item 1
Flex item 2
Flex item 3

Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-column">
    <div class="p-2 bg-red text-white">Flex item 1</div>
    <div class="p-2 bg-blue text-white">Flex item 2</div>
    <div class="p-2 bg-red text-white">Flex item 3</div>
</div>
<br>
<div class="d-flex flex-column-reverse">
    <div class="p-2 bg-red text-white">Flex item 1</div>
    <div class="p-2 bg-blue text-white">Flex item 2</div>
    <div class="p-2 bg-red text-white">Flex item 3</div>
</div>

Responsive variations also exist for flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

Justify Content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Responsive variations also exist for justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

Align Items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex align-items-start bg-cool-gray mb-3" style="height: 100px">...</div>
<div class="d-flex align-items-end bg-cool-gray mb-3" style="height: 100px">...</div>
<div class="d-flex align-items-center bg-cool-gray mb-3" style="height: 100px">...</div>
<div class="d-flex align-items-baseline bg-cool-gray mb-3" style="height: 100px">...</div>
<div class="d-flex align-items-stretch bg-cool-gray mb-3" style="height: 100px">...</div>

Responsive variations also exist for align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

Align Self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

Flex item 1
Aligned Self Start
Flex item 3
Flex item 1
Aligned Self End
Flex item 3
Flex item 1
Aligned Self Center
Flex item 3
Flex item 1
Aligned Self Baseline
Flex item 3
Flex item 1
Aligned Self Stretch
Flex item 3
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Responsive variations also exist for align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

Auto Margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).

Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default justify-content value. See this StackOverflow answer for more details.
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

With Align Items

Vertically move one flex item to the top or bottom of a container by mixing align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.

Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-nowrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Responsive variations also exist for flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

Align Content

Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.

Heads up! This property has no effect on single rows of flex items.
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-end flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-center flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-between flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-around flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsive variations also exist for align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch

Flex Within the Grid

Apply display and flex utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

Note: When using display and flex utilities with columns, the xs column size must be set to work as intended on mobile.

I'm a flexbox container!
I'm a flexbox container with a lot of text that makes me very long compared to the other flexbox containers in this grid to show you how all the heights are the same!
I'm a flexbox container with a button aligned to the bottom! Button

Sample Text Heading

I'm a flexbox container with a lot of text that makes me very long compared to the other flexbox containers!

I'm a flexbox container with my text aligned to the middle!
I'm a flexbox container with my text aligned to the bottom!
<div class="row d-flex flex-wrap">
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block bg-blue text-white height-100">
                I'm a flexbox container!
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block height-100">
                I'm a flexbox container with a lot of text that makes me very long compared to the other flexbox containers in this grid to show you how all the heights are the same!
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block bg-blue text-white height-100 d-flex flex-column">
                I'm a flexbox container with a button aligned to the bottom!
                <a class="btn btn-hollow-reverse mt-auto" href="#flex-within-the-grid">Button</a>
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block height-100">
                <h3>Sample Text Heading</h3>
                <p>I'm a flexbox container with a lot of text that makes me very long compared to the other flexbox containers!</p>
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block bg-chili text-white height-100 d-flex flex-column">
                <span class="my-auto text-center">I'm a flexbox container with my text aligned to the middle!</span>
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block height-100 d-flex flex-column">
                <span class="mt-auto">I'm a flexbox container with my text aligned to the bottom!</span>
            </div>
        </div>
    </div>
</div>

Typography

Visit the fonts section for tips and best practices.

Text Colors

In order to change the color of your text to one of the Arizona's brand colors you can use one of the predefined .text-color classes. It is not advised to use text color classes without first checking their accessibility score. One handy way to see if a text color has enough contrast from the background color is our text color accessibility test.

Example

Bloom text example. As a text color, bloom has color contrast issues.


Arizona red text example.


Chili text example.


Sky text example.


Oasis text example.


Azurite text example.


Arizona blue text example.


Midnight text example.


Cool gray text example.


Warm gray text example.


Leaf text example.


River text example.


Silver text example.


Ash text example.


Sage text example.


Copper (mesa) text example.


Dark silver text example.


White text example.

 <p class="text-bloom">Bloom text example. As a text color, bloom has color contrast issues.</p>
 <p class="text-red">Arizona red text example.</p>
 <p class="text-chili">Chili text example.</p>
 <div class="bg-midnight card-block">
   <p class="text-sky">Sky text example.</p>
 </div>
 <div class="bg-midnight card-block">
   <p class="text-oasis">Oasis text example.</p>
 </div>
 <p class="text-azurite">Azurite text example.</p>
 <p class="text-blue">Arizona blue text example.</p>
 <p class="text-midnight">Midnight text example.</p>
 <div class="bg-midnight card-block">
   <p class="text-cool-gray">Cool gray text example.</p>
 </div>
 <div class="bg-midnight card-block">
   <p class="text-warm-gray">Warm gray text example.</p>
 </div>
 <div class="bg-midnight card-block">
   <p class="text-leaf">Leaf text example.</p>
 </div>
 <p class="text-river">River text example.</p>
 <div class="bg-midnight card-block">
   <p class="text-silver">Silver text example.</p>
 </div>
 <p class="text-ash">Ash text example.</p>
 <p class="text-sage">Sage text example.</p>
 <p class="text-mesa">Copper (mesa) text example.</p>
 <p class="text-silver-dark">Dark silver text example.</p>
 <div class="bg-red card-block">
   <p class="text-white">White text example.</p>
 </div>

Headings

All HTML headings, h1 through h6, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. Heading sizes change at different breakpoints.

For accessibility reasons, do not use headings to achieve visual results only.

Example

Heading one example


Heading two example


Heading three example


Heading four example


Heading five example

Heading six example
 <h1>Heading one example</h1>
 <h2>Heading two example</h2>
 <h3>Heading three example</h3>
 <h4>Heading four example</h4>
 <h5>Heading five example</h5>
 <h6>Heading six example</h6>

Heading Options

Combine classes as needed. Headings h1 through h6 can use text color classes like .text-blue or .text-azurite. The .sans class provides a sanserif alternative for h1 and h2. Plus there's .text-uppercase.

Example

How to Apply


More than 100 Majors


Freshmen


A complete application includes

 <h1 class="text-uppercase text-midnight sans">How to Apply</h1>
 <h2 class="text-uppercase text-blue sans">More than 100 Majors</h2>
 <h3 class="text-uppercase text-azurite">Freshmen</h3>
 <h4 class="text-uppercase text-ash">A complete application includes</h4>

The same heading options can be used with .h1 through .h6 classes to match the font styling of a heading while maintaining best practices for web accessibility.

Example

Cost & Aid


More than 86% of Wildcats receive aid


International


Scholarship Universe

 <p class="h1 text-uppercase text-midnight sans">Cost & Aid</p>
 <p class="h2 text-uppercase text-blue sans">More than 86% of Wildcats receive aid</p>
 <h2 class="h3 text-uppercase text-azurite">International</h2>
 <p class="h4 text-uppercase text-ash">Scholarship Universe</p>

Margin Vertical Align

Default vertical alignment for headings, h1 through h6, might not be set to what you need for your documents. You can change this by using .margin-align-*.

Alternately, you can use .margin-zero-* to override top or bottom margin to zero.

Note! The best results occur in block-level elements, and not inline-elements.

Example

Text align top example


Text align middle example


Text align bottom example


Text align with zero margin-top


Text align with zero margin-bottom

<p class="margin-align-top">Text align top example</p>
<p class="margin-align-middle">Text align middle example</p>
<p class="margin-align-bottom">Text align bottom example</p>
<p class="margin-zero-top">Text align with zero margin-top</p>
<p class="margin-zero-bottom">Text align with zero margin-bottom</p>

Font Size

Using HTML headings, h1 through h6, to size text can give you unwanted .margin-top and .margin-bottom. To avoid these margins but keep the font-size, you can instead use .text-size-h*. Like with headings, these classes' font-size values change at different breakpoints.

Example

Heading 1 Text Size


Heading 2 Text Size


Heading 3 Text Size


Heading 4 Text Size


Heading 5 Text Size


Heading 6 Text Size

<p class="text-size-h1">Heading 1 Text Size</p>
<p class="text-size-h2">Heading 2 Text Size</p>
<p class="text-size-h3">Heading 3 Text Size</p>
<p class="text-size-h4">Heading 4 Text Size</p>
<p class="text-size-h5">Heading 5 Text Size</p>
<p class="text-size-h6">Heading 6 Text Size</p>

Body Copy

UA Bootstrap's global default font-size is 16px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of 16px by default.

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>

Lead Body Copy

Make a paragraph stand out by adding .lead.

Example

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Inline Text Elements

Marked Text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

Example

You can use the mark tag to highlight text.
<mark>highlight</mark>

Deleted Text

For indicating blocks of text that have been deleted use the <del> tag.

Example

This line of text is meant to be treated as deleted text.
<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough Text

For indicating blocks of text that are no longer relevant use the <s> tag.

Example

This line of text is meant to be treated as no longer accurate.
<s>This line of text is meant to be treated as no longer accurate.</s>

Inserted Text

For indicating additions to the document use the ins tag.

Example

This line of text is meant to be treated as an addition to the document.
<ins>This line of text is meant to be treated as an addition to the document.</ins>

Underlined Text

To underline text use the u tag.

Example

This line of text will render as underlined.
<u>This line of text will render as underlined.</u>

Small Text

For de-emphasizing inline or blocks of text, use the small tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

Example

This line of text is meant to be treated as fine print.
<small> This line of text is meant to be treated as fine print.</small>

Bold

For emphasizing a snippet of text with a heavier font-weight.

Example

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italic

For emphasizing a snippet of text with italics.

Example

The following snippet of text is rendered as italicized text
<em>rendered as italicized</em>

Alignment Classes

Easily realign text to components with text alignment classes.

Example

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<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>

Responsive Alignment Classes

Changing alignment of text at different breakpoints allows for more design options.

Class Name Extra small devices
Phones (<48em)
text-align
Small devices
Tablets (≥48em)
text-align
Medium devices
Desktops (≥60em)
text-align
Large devices
Desktops (≥75em)
text-align
.text-left-not-xs inherit left left left
.text-center-not-xs inherit center center center
.text-right-not-xs inherit right right right
.text-justify-not-xs inherit justify justify justify
.text-left-xs left inherit inherit inherit
.text-center-xs center inherit inherit inherit
.text-right-xs right inherit inherit inherit
.text-justify-xs justify inherit inherit inherit
.text-left-not-sm left inherit left left
.text-center-not-sm center inherit center center
.text-right-not-sm right inherit right right
.text-justify-not-sm justify inherit justify justify
.text-left-sm inherit left inherit inherit
.text-right-sm inherit right inherit inherit
.text-justify-sm inherit justify inherit inherit
.text-left-not-md left left inherit left
.text-center-not-md center center inherit center
.text-right-not-md right right inherit right
.text-justify-not-md justify justify inherit justify
.text-left-md inherit inherit left inherit
.text-center-md inherit inherit center inherit
.text-right-md inherit inherit right inherit
.text-justify-md inherit inherit justify inherit
.text-left-not-lg left left left inherit
.text-center-not-lg center center center inherit
.text-right-not-lg right right right inherit
.text-justify-not-lg justify justify justify inherit
.text-left-lg inherit inherit inherit left
.text-center-lg inherit inherit inherit center
.text-jusitify-lg inherit inherit inherit justify

Transformation Classes

Transform text in components with text capitalization classes.

Example

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Lists

Unordered

A list of items in which the order does not explicitly matter.

Example

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
    <li>...</li>
</ul>

Triangle

Same as unordered list but uses blue triangles as bullets.

Example

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem atmassa
  • Facilisis in pretium nislaliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="triangle">
    <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

Example

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
    <li>...</li>
</ol>

Utility Classes

General use Utility Classes.

.no-line-height

Here is an example

of a few lines of text

with the default line spacing


Here is an example

of a few lines of text

without the default line spacing

<div class="row">
   <p>Here is an example</p>
   <p>of a few lines of text</p>
   <p>with the default line spacing</p>
</div>
<div class="row no-line-height">
   <p>Here is an example</p>
   <p>of a few lines of text</p>
   <p>without the default line spacing</p>
</div>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard <blockquote>.

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in .

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>

Alternate displays

Add .blockquote-reverse for a blockquote with right-aligned content.

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

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

Tables

Basic

Use the standard table code to make tables. Add .table-striped for row separators.

Example

Optional table caption.
# Name URL Username
1 University of Arizona arizona.edu @UofA
2 Arizona Alumni arizonaalumni.com @UAAA
3 Arizona Athletics arizonawildcats.com @AZATHLETICS
<div class="table-responsive">
  <table class="table-striped">
      ...
  </table>
</div>

Add .table-dark for an alternate dark version.

Example

Optional table caption.
# Name URL Username
1 University of Arizona arizona.edu @UofA
2 Arizona Alumni arizonaalumni.com @UAAA
3 Arizona Athletics arizonawildcats.com @AZATHLETICS
<div class="table-responsive">
  <table class="table-dark table-striped">
      ...
  </table>
</div>

Hover Rows

Add the .table-hover class to table elements for a hover effect on table rows.

Example

Optional table caption.
# Name URL Username
1 University of Arizona arizona.edu @UofA
2 Arizona Alumni arizonaalumni.com @UAAA
3 Arizona Athletics arizonawildcats.com @AZATHLETICS
<div class="table-responsive">
  <table class="table-hover">
      ...
  </table>
</div>

Example

Optional table caption.
# Name URL Username
1 University of Arizona arizona.edu @UofA
2 Arizona Alumni arizonaalumni.com @UAAA
3 Arizona Athletics arizonawildcats.com @AZATHLETICS
<div class="table-responsive">
  <table class="table-dark table-hover">
      ...
  </table>
</div>

Example

Optional table caption.
# Name URL Username
1 University of Arizona arizona.edu @UofA
2 Arizona Alumni arizonaalumni.com @UAAA
3 Arizona Athletics arizonawildcats.com @AZATHLETICS
<div class="table-responsive">
  <table class="table-hover table-striped">
      ...
  </table>
</div>

Example

Optional table caption.
# Name URL Username
1 University of Arizona arizona.edu @UofA
2 Arizona Alumni arizonaalumni.com @UAAA
3 Arizona Athletics arizonawildcats.com @AZATHLETICS
<div class="table-responsive">
  <table class="table-dark table-hover table-striped">
      ...
  </table>
</div>

Responsive Tables

Create responsive tables by wrapping any <table> in .table-responsive to make them scroll horizontally on small devices (under 48em). When viewing on anything larger than 48em wide, you will not see any difference in these tables.

Example

Optional table caption.
# Name URL Username
1 University of Arizona arizona.edu @UofA
2 Arizona Alumni arizonaalumni.com @UAAA
3 Arizona Athletics arizonawildcats.com @AZATHLETICS
<div class="table-responsive">
  <table class="table-striped">
      ...
  </table>
</div>

Forms

Basic Example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 50%; by default. Wrap labels and controls in .form-group for optimum spacing.

Example

Example block-level help text here.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="input-group">
    <label> Checkboxes <span class="form-required" title="This field is required.">*</span> </label>
    <div class="checkbox">
        <label>
          <input type="checkbox"> Checkbox
        </label>
    </div>
  </div>
  <div class="input-group">
    <label>Radios <span class="form-required" title="This field is required.">*</span></label>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
    <div class="radio disabled">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option three is disabled
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-red">Submit</button>
</form>

Buttons

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Example

Link
 <a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Button</button>
 <input class="btn btn-default" type="button" value="Input">
 <input class="btn btn-default" type="submit" value="Submit">

Context-specific usage

While button classes can be used on <a> and <button> elements, only button elements are supported within our nav and navbar components.

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's https://bugzilla.mozilla.org/show_bug.cgi?id=697451 that prevents us from setting the line-height of <input-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Options

Use any of the available button classes to quickly create a styled button.

Example

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

<!-- reset the line-height of ua-brand-icon font in buttons -->
<button type="button" class="btn btn-success"><i class="btn-icon ua-brand-checkmark">&nbsp;</i></button>
<button type="button" class="btn btn-default"><i class="btn-icon ua-brand-x">&nbsp;</i></button>

Arrow Buttons

You can add arrows by including btn-arrow.

<!-- Large buttons -->
<a href="#" class="btn-arrow btn btn-default btn-lg">Large Button</a>
<a href="#" class="btn-arrow btn btn-primary btn-lg">Large Button</a>

<!-- Default buttons -->
<a href="#" class="btn-arrow btn btn-default">Default Button</a>
<a href="#" class="btn-arrow btn btn-primary">Default Button</a>

<!-- Small buttons -->
<a href="#" class="btn-arrow btn btn-default btn-sm">Small Button</a>
<a href="#" class="btn-arrow btn btn-primary btn-sm">Small Button</a>

Hollow Buttons

Change it up and drive action with btn-hollow-default and btn-hollow-primary.

<!-- Large buttons -->
<a href='#' class="btn btn-hollow-default btn-lg">Large Button</a>
 <a href='#' class="btn btn-hollow-primary btn-lg">Large Button</a>

<!-- Default buttons -->
<a href='#' class="btn btn-hollow-default">Default Button</a>
 <a href='#' class="btn btn-hollow-primary">Default Button</a>

<!-- Small buttons -->
<a href='#' class="btn btn-hollow-default btn-sm">Small Button</a>
 <a href='#' class="btn btn-hollow-primary btn-sm">Small Button</a>

Use btn-hollow-reverse on a dark background.

 <a href='#' class="btn btn-hollow-reverse btn-lg">Large Button</a>
 <a href='#' class="btn btn-hollow-reverse">Default Button</a>
 <a href='#' class="btn btn-hollow-reverse btn-sm">Small Button</a>

Mix and match!

 <div class="btn-group">
    <button type="button" class="btn btn-hollow-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Visit <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
 </div>
 <a href='#' class="btn btn-hollow-default btn-lg">REQUEST INFO</a>
 <a href='#' class="btn btn-default btn-lg">APPLY</a>

Conveying meaning to assistive technologies

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Example

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Anchor element

Add the .active class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Disabled state

Make buttons look unclickable by fading them back with opacity.

Button element

Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

Link functionality caveat

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.

If you would like to style all external links on a webpage, we provide a simple solution. Add class='external-links ua-brand-icons' to the document <html> element. Then just make sure that all external links open up in a new tab using target='_blank'.

Example

Navigation

Body

H2 Link with text

External Link Button

  <html class="external-links ua-brand-icons">
  ...
    <ul class="nav navbar-nav">
      <li><a href="https://www.uanews.arizona.edu" target="_blank"><span>External link</a></li>
      <li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="https://uanews.arizona.edu" target="_blank">External link</a></li>
        </ul>
      </li>
    </ul>
  ...
    <h2><a href="https://uadigital.arizona.edu/ua-bootstrap/" target="_blank">H2 Link</a> with text</h2>
    <ul class="triangle">
      <li><a href="https://uadigital.arizona.edu/ua-bootstrap/">Link</a></li>
      <li><a href="https://uanews.arizona.edu" target="_blank">UA News External Link</a></li>
    </ul>
    <div class="btn btn-default" target="_blank">External Link Button</div>
  ...
  </html>

UA-brand-icons class for external links

External links icon is provided by the ua-brand-icons class on the html element of the document. If for any reason you do not wish to use ua-brand-icons and remove the class, there is a fallback in css that will still place the external links triangle icon.

External Link Without ua-brand-icons class

This is what your external links will look like without the ua-brand-icons class

Note the difference with the colored text and the external link icon

Example in an iframe without .ua-brand-icons

  <html class="external-links">
  ...
  <a class="card card-landing-grid remove-external-link-icon" href="https://www.arizona.edu" target="_blank">
    <h2 class="h3 text-uppercase text-blue30w">Ipsum Corporate</h2>
    <p class="card-text">Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
    <p class="margin-align-bottom text-cactus pseudo-link"><strong><span>How to Apply</span></strong></p>
  </a>

External links icon within a linked area

In order to display the external link icon for a link within a clickable area for example a clickable card, you have to:

  1. Add this class to your <a> element: class='remove-external-link-icon'

    This is for removing an extra external links icon that shows up due to the card being a link as well as a link inside the card.

  2. Add this class to your element that wraps the <span> element for the external link: class='pseudo-link'

    This is to target the specific element that will have the external links icon. For the external links icon color to be inherited by the font color, you must have a parent and child relationship present in your markup. For example, <p class="pseudo-link"><span>pseudo link text</span></p> where the <p> tag is the parent and the <span> tag is the child.

Example in an iframe without .ua-brand-icons

  <a class="card card-landing-grid remove-external-link-icon" href="https://www.arizona.edu" target="_blank">
    <h2 class="h3 text-uppercase text-blue30w">Ipsum Corporate</h2>
    <p class="card-text">Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
    <p class="card-link margin-align-bottom pseudo-link"><span>Ipsum Corporate</span></p>
  </a>
  ...
  <a class="card card-landing-grid remove-external-link-icon" href="https://www.arizona.edu" target="_blank">
    <h2 class="h3 text-uppercase text-blue30w">Ipsum Corporate</h2>
    <p class="card-text">Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
    <p class="margin-align-bottom text-cactus pseudo-link"><strong><span>How to Apply</span></strong></p>
  </a>

External Link Utility Class

If you would like to only use a single class for specific external links, you can add an external-link icon by using .external.

You can add .external-blue for a blue version.

.ext class has been replaced with .external

The .ext class was replaced in UA Bootstrap in order to not compete with the external link module in Drupal which adds the .ext class and the ability to style all external links with an icon.

    <a href="#" class="external">External link with the default icon.</a>
    <a href="#" class="external external-blue">External link with an alternate blue icon.</a>