Bootstrap - CSS

bootstrap

What are common CSS classes?

  • text-left: Text will be aligned to the left
  • text-center: Text will be center-aligned
  • text-right: Text will be aligned to the right
  • text-justify: Text will be justified
  • text-nowrap: Text will not be wrapped
  • text-muted
  • text-primary
  • text-success
  • text-info
  • text-warning
  • text-danger
  • text-lowercase: Text will be transformed to lowercase
  • text-uppercase: Text will be transformed to uppercase
  • text-capitalize: Text will be capitalized
  • bg-primary
  • bg-success
  • bg-info
  • bg-warning
  • bg-danger
  • pull-left: float an element to the left
  • pull-right: float an element to the right
  • navbar-left: float an navigation element to the left
  • navbar-right
  • center-block: center a block element
  • clearfix: clear floats
  • show: display the element
  • hidden: hide an element
  • invisible: toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.
  • close: add to a <button> element to make a close button / icon, a button with a little x.
  • list-unstyled: Not sure what this is (something about removing the default list style and margin)
  • list-inline: Add this to the <ul> tag and it will cause list items to be displayed inline / horizontally next to each other instead of below each other, unless there is not enough horizontal space
  • active: Applies the hover color to a particular row or cell (can be added to tr or td)
  • success: Indicates a successful or positive action (can be added to tr or td)
  • info: Indicates a neutral informative change or action (can be added to tr or td)
  • warning: Indicates a warning that might need attention (can be added to tr or td)
  • danger: Indicates a dangerous or potentially negative action (can be added to tr or td)
  • table: basic style for <table>
  • table-striped: add to the <table> element if you want the rows to have zebra-stripe. Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.
  • table-bordered: add to the <table> element if you want the cells to have borders on all sides
  • table-hover: add to the <table> element to enable a hover state on table rows
  • table-condensed: add to the <table> element if you want to make tables more compact by cutting cell padding in half.
  • table-responsive: add to the <div> element that is the parent of the <table> element to make the table responsive. Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
  • form-group: wrap labels and controls in .form-group for optimum spacing
  • form-inline: Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
  • input-group: Not sure exactly what this class is for.
  • input-group-addon: Not sure exactly what this class is for.
  • form-control: Not sure exactly what this class is for.
  • form-horizontal: Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
  • disabled: disable an element
  • radio
  • radio-inline
  • checkbox
  • checkbox-inline
  • form-control-static: When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.
  • help-block: used to style help text for form controls.
  • has-warning
  • has-error
  • has-success
  • control-label
  • input-lg: increase the height of input controls
  • input-sm: decrease the height of input controls
  • form-group-lg
  • form-group-sm
  • img-responsive: make images responsive
  • img-rounded: make the image have rounded corners
  • img-circle: clip the corner of the image so that the image is displayed inside a circle
  • img-thumbnail: size the image as a thumbnail
  • btn: identify buttons
  • btn-primary: identify primary buttons
  • btn-default
  • btn-lg
  • btn-sm
  • btn-xs
  • text-hide:
  • sr-only: Hide an element to all devices except screen readers. Convey meaning to assistive technologies. sing color to add meaning to a table row or individual cell 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 in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the .sr-only class.
  • sr-only-focusable: Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices.

What is the purpose of the .container and .container-fluid CSS classes?

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

<div class="container">
  ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

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

Can we nest either .container or .container-fluid?

No, due to padding and more, neither container is nestable.

When should we use .container and when should we use .container-fluid?

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

<div class="container">
  ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

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

When should we use h1 .. h6 and when should we use .h1 .. .h6?

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.

What is the purpose of .lead CSS class?

Make a paragraph stand out by adding .lead

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

What is the purpose of <mark>?

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

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

How can we indicate a block of text as deleted?

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

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

How can we indicate a block of text as no longer relevant?

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

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

How can we indicate that a block of text should be inserted?

For indicating additions to the document use the <ins> tag:

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

How can we underline a block of text?

To underline text use the <u> tag:

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

What is the semantic way to render a block of text as bold?

Use the <strong> tag:

<strong>rendered as bold text</strong>

What is the semantic way to render a block of text as italic?

Use the <em> tag:

<em>rendered as italicized text</em>

What is the semantic way to render a block of text as small?

For de-emphasizing inline or blocks of text, use the <small> tag:

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

When should we use <b> and <i>?

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

What is the semantic way to style abbreviation?

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.

Use the <abbr> tag:

<abbr title="attribute">...</abbr>

Add .initialism to an abbreviation for a slightly smaller font-size:

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

What is the semantic way to style an address?

Use the <address> tag:

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

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

What is the semantic way to quote a block of text?

Use the <blockquote> tag:

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

The above <blockquote> indent the entire paragraph and give it a distinctive style.

How can we site the source for a <blockquote>?

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

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

How can we right-align a <blockquote>?

Add .blockquote-reverse for a <blockquote>:

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

What is the semantic way to display a list of terms and their definition?

Use the <dl>, <dt>, and <dd> tags:

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

How can we make the terms and definitions line up horizontally?

Add class="dl-horizontal" to the <dl> tag:

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. In narrower viewports, they will change to the default stacked layout.

What is the semantic way to display a block of code?

Use the <code> tag:

<code>...</code>

What is the purpose of the <kbd> tag?

Use the <kbd> to indicate input that is typically entered via keyboard:

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

What is the purpose of the <pre> tag?

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

What is the purpose of the <var> tag?

For indicating variables use the <var> tag:

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

What is the purpose of the <samp> tag?

For indicating blocks sample output from a program use the <samp> tag:

<samp>This text is meant to be treated as sample output from a computer program.</samp>

How can we float an element?

Float an element to the left or right with a class. !important is included to avoid specificity issues.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead.

How can we center a block?

Set an element to display: block and center via margin.

<div class="center-block">...</div>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License