title: Brand guidelines
description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
group: about
+toc: true
---
Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](https://mailchimp.com/about/brand-assets/).
---
layout: docs
title: Icons
+description: Guidance and suggestions for using external icon libraries with Bootstrap.
group: extend
---
---
layout: docs
title: Borders
+description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
group: utilities
redirect_from: "/utilities/"
+toc: true
---
-Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element.
-
## Border
Add classes to an element to remove all borders or some borders.
---
layout: docs
title: Clearfix
+description: Quickly and easily clear floated content within a container by adding a clearfix utility.
group: utilities
+toc: true
---
Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
---
layout: docs
title: Close icon
+description: Use a generic close icon for dismissing content like modals and alerts.
group: utilities
+toc: true
---
-Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`.
+**Be sure to include text for screen readers**, as we've done with `aria-label`.
{% example html %}
<button type="button" class="close" aria-label="Close">
---
layout: docs
title: Colors
+description: Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
group: utilities
+toc: true
---
-Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
-
{% example html %}
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
---
layout: docs
title: Display property
+description: 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.
group: utilities
+toc: true
---
-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.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
## Common `display` values
The [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) accepts a handful of values and we support many of them with utility classes. We purposefully don't provide every value as a utility, so here's what we support:
---
layout: docs
title: Flexbox
+description: 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.
group: utilities
+toc: true
---
-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.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
## 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.
---
layout: docs
title: Image replacement
+description: Swap text for background images with the image replacement class.
group: utilities
+toc: true
---
Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
---
layout: docs
title: Position
+description: Use these shorthand utilities for quickly configuring the position of an element.
group: utilities
+toc: true
---
-Position utilities are helpful for quickly placing a component outside the normal document flow. Choose from a handful of fixed or sticky position classes as needed.
-
-### Fixed top
+## Fixed top
Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS.
<div class="fixed-top">...</div>
{% endhighlight %}
-### Fixed bottom
+## Fixed bottom
Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS.
<div class="fixed-bottom">...</div>
{% endhighlight %}
-### Sticky top
+## Sticky top
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
---
layout: docs
title: Responsive helpers
+description: Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
group: utilities
+toc: true
---
## Responsive embeds
-Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
-
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
---
layout: docs
title: Screenreaders
+description: Use screenreader utilities to hide elements on all devices execept screen readers.
group: utilities
+toc: true
---
Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
---
layout: docs
title: Sizing
+description: Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
group: utilities
+toc: true
---
-Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default.
-
-Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here.
+Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Modify those values as you need to generate different utilities here.
{% example html %}
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
---
layout: docs
title: Spacing
+description: Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
group: utilities
+toc: true
---
-Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`.
-
-## Contents
+## How it works
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
+Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`.
## Notation
---
layout: docs
title: Typography
+description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
group: utilities
+toc: true
---
-The following utilities can be used to add additional styles to texts.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
## Text alignment
Easily realign text to components with text alignment classes.
---
layout: docs
title: Vertical alignment
+description: Easily change the vertical alignment of inlie, inline-block, inline-table, and table cell elements.
group: utilities
---
---
layout: docs
title: Visibility
+description: Control the visibility, without modifying the display, of elements with visibility utilities.
group: utilities
---
projects / thirdparty / bootstrap.git / commitdiff
