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

.col-md-4

.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

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

<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

<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)
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 row with both top and bottom margins set to 16px

Padding

This is a row with both top and bottom padding set to 16px

<h5>Margins</h5>
<div class="row show-grid my-4">
  <div class="col-xs-12 text-center">This is a row with both top and bottom margins set to 16px</div>
</div>
<div class="row show-grid my-4">
  <div class="col-xs-12 text-center">This is a row with both top and bottom margins set to 16px</div>
</div>
<h5>Padding</h5>
<div class="row show-grid py-4">
  <div class="col-xs-12 text-center">This is a row with both top and bottom padding set to 16px</div>
</div>
<div class="row show-grid py-4">
  <div class="col-xs-12 text-center">This is a row with both top and bottom padding set to 16px</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

Example

Centered Element

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

Example

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

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 UA's brand colors you can use one of the predefined .text-color classes. Text color classes are available for: red, blue, cactus, sky, river, sand, mesa, brick, sage, silver, dark silver, and ash. It is not advised to use text color classes without first checking their accessibility score.

Example

Red text example.

Red 30% black text example.

Blue text example.

Blue 30% white text example.

Blue 60% black text example.

Cactus text example.

Sky text example.

River text example.

Sand text example.

Mesa text example.

Brick text example.

Sage text example.

Silver text example.

Dark silver text example.

Ash text example.

White text example.

<span class="text-red">Red text example.</span>
<span class="text-red30b">Red 30% black text example.</span>
<span class="text-blue">Blue text example.</span>
<span class="text-blue30w">Blue 30% white text example.</span>
<span class="text-blue60b">Blue 60% black text example.</span>
<span class="text-cactus">Cactus text example.</span>
<span class="text-sky">Sky text example.</span>
<span class="text-river">River text example.</span>
<span class="text-sand">Sand text example.</span>
<span class="text-mesa">Mesa text example.</span>
<span class="text-brick">Brick text example.</span>
<span class="text-sage">Sage text example.</span>
<span class="text-silver">Silver text example.</span>
<span class="text-silver-dark">Dark silver text example.</span>
<span class="text-ash">Ash text example.</span>
 <div class="bg-red card-block">
    <span class="text-white">White text example.</span>
 </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. 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-blue30w or .text-blue60b. 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-blue60b sans">How to Apply</h1>
 <h2 class="text-uppercase text-blue60b sans">More than 100 Majors</h2>
 <h3 class="text-uppercase text-blue30w">Freshmen</h3>
 <h4 class="text-uppercase text-blue30w">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-blue60b sans">Cost & Aid</p>
 <p class="h2 text-uppercase text-blue60b sans">More than 86% of Wildcats receive aid</p>
 <h2 class="h3 text-uppercase text-blue30w">International</h2>
 <p class="h4 text-uppercase text-blue30w">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>

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 will render as underlined.</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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
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>

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

<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

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

Links acting as buttons

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.

Example

Large Button Large Button

Default Button Default Button

Small Button Small Button

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

Example

Large Button Large Button

Default Button Default Button

Small Button Small Button

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

Example

Large Button Default Button Small Button

Example

Large Button Default Button Small Button

Example

Large Button Default Button Small Button

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

Example

REQUEST INFO APPLY

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

External 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

Ipsum Corporate

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.

Ipsum Corporate

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

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

Ipsum Corporate

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.

Ipsum Corporate

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.

How to Apply

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

Example

External link with the default icon.

External link with an alternate blue 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>

CSS

Grid system

Introduction

Grid options

Example: Stacked-to-horizontal

Example: Fluid container

Example: Mobile and desktop

Example: Mobile, tablet, desktop

Example: Column wrapping

Responsive column resets

Offsetting columns

Nesting columns

Column ordering

Spacing

Margins

Padding

Usage

Horizontal Centering

Row buffer

Deprecation Warning

Additional bottom buffer classes added

Top Buffer

Bottom Buffer

Column buffer

Deprecation Warning

Typography

Text Colors

Headings

Heading one example

Heading two example

Heading three example

Heading four example

Heading five example

Heading six example

Heading Options

How to Apply

More than 100 Majors

Freshmen

A complete application includes

International

Margin Vertical Align

Font Size

Body Copy

Lead Body Copy

Inline Text Elements

Marked Text

Deleted Text

Strikethrough Text

Inserted Text

Underlined Text

Small Text

Bold

Italic

Alignment Classes

Responsive Alignment Classes

Transformation Classes

Lists

Unordered

Triangle

Ordered

Utility Classes

Tables

Basic

Hover Rows

Responsive Tables

Forms

Basic Example

Buttons

Button tags

Context-specific usage

Links acting as buttons

Cross-browser rendering

Options

Arrow Buttons

Hollow Buttons

Conveying meaning to assistive technologies

Sizes

Active state

Button element

Anchor element

External Link Without `ua-brand-icons` class

`.ext` class has been replaced with `.external`