css · bootstrap

63
CSS CSS Global CSS settings, fundamental HTML elements styled and Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. enhanced with extensible classes, and an advanced grid system. Overview Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. HTML5 doctype Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. <!DOCTYPE html> <html lang="en"> ... </html> Mobile first With Bootstrap 2, w e added optional mobile friendly styles for key aspects of the framew ork. With Bootstrap 3, w e've rew ritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first . Mobile first styles can be found throughout the entire library instead of in separate files. To ensure proper rendering and touch zooming, add the viewport meta tag to your <head> . <meta name="viewport" content="width=device‐width, initial‐scale=1"> You can disable zooming capabilities on mobile devices by adding user‐scalable=no to the view port meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, w e don't recommend this on every site, so use caution! <meta name="viewport" content="width=device‐width, initial‐scale=1, maximum‐scale=1, user‐scalable=no"> Typography and links Bootstrap sets basic global display, typography, and link styles. Specifically, w e: Set background‐color: #fff; on the body Use the @font‐family‐base , @font‐size‐base , and @line‐height‐base attributes as our typographic base Set the global link color via @link‐color and apply link underlines only on :hover These styles can be f ound w ithin scaffolding.less . Normalize.css Copy Copy Copy 1 of 63 1 of 63

Upload: coklat

Post on 01-Oct-2015

27 views

Category:

Documents


1 download

DESCRIPTION

CSS · Bootstrap

TRANSCRIPT

  • CSSCSSGlobal CSS settings, fundamental HTML elements styled andGlobal CSS settings, fundamental HTML elements styled andenhanced with extensible classes, and an advanced grid system.enhanced with extensible classes, and an advanced grid system.

    OverviewGet the lowdown on the key pieces of Bootstrap's infrastructure, including ourapproach to better, faster, stronger web development.HTML5 doctypeBootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype.Include it at the beginning of all your projects.

    ...

    Mobile firstWith Bootstrap 2, w e added optional mobile friendly styles for key aspects of the framew ork. With Bootstrap 3,w e've rew ritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles,they're baked right into the core. In fact, Bootstrap is mobile first. Mobile f irst styles can be found throughoutthe entire library instead of in separate f iles.To ensure proper rendering and touch zooming, add the viewport meta tag to your .

    You can disable zooming capabilities on mobile devices by adding userscalable=no to the view port meta tag.This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like anative application. Overall, w e don't recommend this on every site, so use caution!

    Typography and linksBootstrap sets basic global display, typography, and link styles. Specif ically, w e:

    Set backgroundcolor: #fff; on the bodyUse the @fontfamilybase , @fontsizebase , and @lineheightbase attributes as our typographic baseSet the global link color via @linkcolor and apply link underlines only on :hover

    These styles can be found w ithin scaffolding.less .

    Normalize.css

    Copy

    Copy

    Copy

    1 of 63 1 of 63

  • For improved cross-brow ser rendering, w e use Normalize.css, a project by Nicolas Gallagher and JonathanNeal.

    ContainersBootstrap requires a containing element to w rap site contents and house our grid system. You may choose oneof tw o containers to use in your projects. Note that, due to padding and more, neither container is nestable.Use .container for a responsive f ixed w idth container.

    ...

    Use .containerfluid for a full w idth container, spanning the entire w idth of your view port.

    ...

    Grid systemBootstrap includes a responsive, mobile first fluid grid system thatappropriately scales up to 12 columns as the device or viewport sizeincreases. It includes predefined classes for easy layout options, as well aspowerful mixins for generating more semantic layouts.IntroductionGrid systems are used for creating page layouts through a series of row s and columns that house yourcontent. Here's how the Bootstrap grid system w orks:

    Row s must be placed w ithin a .container (f ixed-w idth) or .containerfluid (full-w idth) for properalignment and padding.Use row s to create horizontal groups of columns.Content should be placed w ithin columns, and only columns may be immediate children of row s.Predefined grid classes like .row and .colxs4 are available for quickly making grid layouts. Lessmixins can also be used for more semantic layouts.Columns create gutters (gaps betw een column content) via padding . That padding is offset in row s forthe f irst and last column via negative margin on .row s.The negative margin is w hy the examples below are outdented. It's so that content w ithin grid columns islined up w ith non-grid content.Grid columns are created by specifying the number of tw elve available columns you w ish to span. Forexample, three equal columns w ould use three .colxs4 .If more than 12 columns are placed w ithin a single row , each group of extra columns w ill, as one unit,w rap onto a new line.Grid classes apply to devices w ith screen w idths greater than or equal to the breakpoint sizes, andoverride grid classes targeted at smaller devices. Therefore, applying any .colmd class to an element

    Copy

    Copy

    2 of 63 2 of 63

  • w ill not only affect its styling on medium devices but also on large devices if a .collg class is notpresent.

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

    Media queriesWe use the follow ing media queries in our Less f iles to create the key breakpoints in our grid system.

    /* Extra small devices (phones, less than 768px) *//* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */@media (minwidth: @screensmmin) { ... }

    /* Medium devices (desktops, 992px and up) */@media (minwidth: @screenmdmin) { ... }

    /* Large devices (large desktops, 1200px and up) */@media (minwidth: @screenlgmin) { ... }

    We occasionally expand on these media queries to include a maxwidth to limit CSS to a narrow er set ofdevices.

    @media (maxwidth: @screenxsmax) { ... }@media (minwidth: @screensmmin) and (maxwidth: @screensmmax) { ... }@media (minwidth: @screenmdmin) and (maxwidth: @screenmdmax) { ... }@media (minwidth: @screenlgmin) { ... }

    Grid optionsSee how aspects of the Bootstrap grid system w ork across multiple devices w ith a handy table.

    Extra smalldevices Phones(

  • Example: Stacked-to-horizontalUsing a single set of .colmd* grid classes, you can create a basic grid system that starts out stacked onmobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop(medium) devices. Place grid columns in any .row .

    .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

    Copy

    4 of 63 4 of 63

  • .colmd1 .colmd1 .colmd1 .colmd1 .colmd1 .colmd1 .colmd1 .colmd1 .colmd1 .colmd1 .colmd1 .colmd1

    .colmd8 .colmd4

    .colmd4 .colmd4 .colmd4

    .colmd6 .colmd6

    Example: Fluid containerTurn any f ixed-w idth grid layout into a full-w idth layout by changing your outermost .container to .containerfluid .

    ...

    Example: Mobile and desktopDon't w ant your columns to simply stack in smaller devices? Use the extra small and medium device gridclasses by adding .colxs* .colmd* to your columns. See the example below for a better idea of how it allw orks.

    .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

    Copy

    5 of 63 5 of 63

  • .colxs12 .colmd8 .colxs6 .colmd4

    .colxs6 .colmd4 .colxs6 .colmd4 .colxs6 .colmd4

    .colxs6 .colxs6

    Example: Mobile, tablet, desktopsBuild on the previous example by creating even more dynamic and pow erful layouts w ith tablet .colsm*classes.

    .colxs12 .colsm6 .colmd8 .colxs6 .colmd4

    .colxs6 .colsm4 .colxs6 .colsm4

  • .colxs9 .colxs4Since 9 + 4 = 13 > 12, this 4columnwide div gets wrapped onto a new line as one contiguous unit. .colxs6Subsequent columns continue along the new line.

    Responsive column resetsWith the four tiers of grids available you're bound to run into issues w here, at certain breakpoints, your columnsdon't clear quite right as one is taller than the other. To f ix that, use a combination of a .clearfix and ourresponsive utility classes.

    .colxs6 .colsm3 .colxs6 .colsm3

    .colxs6 .colsm3 .colxs6 .colsm3

    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.

    .colsm5 .colmd6 .colsm5 .colsmoffset2 .colmd6 .colmdoffset0

    .colsm6 .colmd5 .collg6 .colsm6 .colmd5 .colmdoffset2 .collg6 .collgoffset0

    Offsetting columnsMove columns to the right using .colmdoffset* classes. These classes increase the left margin of a columnby * columns. For example, .colmdoffset4 moves .colmd4 over four columns.

    4-column-w ide div gets w rappedonto a new line as onecontiguous unit.

    .col-xs-6 .col-sm-3Resize your view portor check it out on yourphone for an example.

    .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3

    Copy

    Copy

    Copy

    7 of 63 7 of 63

  • .colmd4 .colmd4 .colmdoffset4

    .colmd3 .colmdoffset3 .colmd3 .colmdoffset3

    .colmd6 .colmdoffset3

    Nesting columnsTo nest your content w ith the default grid, add a new .row and set of .colsm* columns w ithin an existing.colsm* column. Nested row s should include a set of columns that add up to 12 or less (it is not required thatyou use all 12 available columns).

    Level 1: .colsm9 Level 2: .colxs8 .colsm6 Level 2: .colxs4 .colsm6

    Column orderingEasily change the order of our built-in grid columns w ith .colmdpush* and .colmdpull* modif ier classes.

    .col-md-4

    .col-md-4 .col-md-offset-4

    .col-md-3 .col-md-offset-3

    .col-md-3 .col-md-offset-3

    .col-md-6 .col-md-offset-3

    Level 1: .col-sm-9Level 2: .col-xs-8 .col-sm-6 Level 2: .col-xs-4 .col-sm-6

    Copy

    Copy

    8 of 63 8 of 63

  • .colmd9 .colmdpush3 .colmd3 .colmdpull9

    Less mixins and variablesIn addition to prebuilt grid classes for fast layouts, Bootstrap includes Less variables and mixins for quicklygenerating your ow n simple, semantic layouts.VariablesVariables determine the number of columns, the gutter w idth, and the media query point at w hich to beginfloating columns. We use these to generate the predefined grid classes documented above, as w ell as for thecustom mixins listed below .

    @gridcolumns: 12;@gridgutterwidth: 30px;@gridfloatbreakpoint: 768px;

    MixinsMixins are used in conjunction w ith the grid variables to generate semantic CSS for individual grid columns.

    .col-md-9 .col-md-push-3

    .col-md-3 .col-md-pull-9

    Copy

    Copy

    Copy

    9 of 63 9 of 63

  • // Creates a wrapper for a series of columns.makerow(@gutter: @gridgutterwidth) { // Then clear the floated columns .clearfix();

    @media (minwidth: @screensmmin) { marginleft: (@gutter / 2); marginright: (@gutter / 2); }

    // Negative margin nested rows out to align the content of columns .row { marginleft: (@gutter / 2); marginright: (@gutter / 2); }}

    // Generate the extra small columns.makexscolumn(@columns; @gutter: @gridgutterwidth) { position: relative; // Prevent columns from collapsing when empty minheight: 1px; // Inner gutter via padding paddingleft: (@gutter / 2); paddingright: (@gutter / 2);

    // Calculate width based on number of columns available @media (minwidth: @gridfloatbreakpoint) { float: left; width: percentage((@columns / @gridcolumns)); }}

    // Generate the small columns.makesmcolumn(@columns; @gutter: @gridgutterwidth) { position: relative; // Prevent columns from collapsing when empty minheight: 1px; // Inner gutter via padding paddingleft: (@gutter / 2); paddingright: (@gutter / 2);

    // Calculate width based on number of columns available @media (minwidth: @screensmmin) { float: left; width: percentage((@columns / @gridcolumns)); }}

    // Generate the small column offsets.makesmcolumnoffset(@columns) { @media (minwidth: @screensmmin) { marginleft: percentage((@columns / @gridcolumns)); }}.makesmcolumnpush(@columns) { @media (minwidth: @screensmmin) { left: percentage((@columns / @gridcolumns));

    10 of 63 10 of 63

  • Example usageYou can modify the variables to your ow n custom values, or just use the mixins w ith their default values. Here'san example of using the default settings to create a tw o-column layout w ith a gap betw een.

    .wrapper { .makerow();}.contentmain { .makelgcolumn(8);}.contentsecondary { .makelgcolumn(3); .makelgcolumnoffset(1);}

    ... ...

    TypographyHeadingsAll HTML headings, through , are available. .h1 through .h6 classes are also available, for w henyou w ant to match the font styling of a heading but still w ant your text to be displayed inline.

    h1. Bootstrap heading Semibold 36pxh2. Bootstrap heading Semibold 30pxh3. Bootstrap heading Semibold 24pxh4. Bootstrap heading Semibold 18px

    h5. Bootstrap heading Semibold 14px

    h6. Bootstrap heading Semibold 12px

    EXAMPLE

    Copy

    Copy

    Copy

    11 of 63 11 of 63

  • h1. Bootstrap headingh2. Bootstrap headingh3. Bootstrap headingh4. Bootstrap headingh5. Bootstrap headingh6. Bootstrap heading

    Create lighter, secondary text in any heading w ith a generic tag or the .small class.

    h1. Bootstrap heading Secondary texth2. Bootstrap heading Secondary texth3. Bootstrap heading Secondary texth4. Bootstrap heading Secondary texth5. Bootstrap heading Secondary texth6. Bootstrap heading Secondary text

    Body copyBootstrap's global default fontsize is 14px, w ith a lineheight of 1.428. This is applied to the and allparagraphs. In addition, (paragraphs) receive a bottom margin of half their computed line-height (10px bydefault).

    h1. Bootstrap heading Secondary texth2. Bootstrap heading Secondary texth3. Bootstrap heading Secondary texth4. Bootstrap heading Secondary text

    h5. Bootstrap heading Secondary text

    h6. Bootstrap heading Secondary text

    EXAMPLE

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorpernulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget laciniaodio 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 egetmetus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

    EXAMPLE

    Copy

    Copy12 of 63 12 of 63

  • ...

    Lead body copyMake a paragraph stand out by adding .lead .

    ...

    Built with LessThe typographic scale is based on tw o Less variables in variables.less: @fontsizebase and @lineheightbase . The f irst is the base font-size used throughout and the second is the base line-height. We usethose variables and some simple math to create the margins, paddings, and line-heights of all our type and more.Customize them and Bootstrap adapts.

    Inline text elementsMarked textFor highlighting a run of text due to its relevance in another context, use the tag.

    You can use the mark tag to highlight text.

    Deleted textFor indicating blocks of text that have been deleted use the tag.

    This line of text is meant to be treated as deleted text.

    Strikethrough textFor indicating blocks of text that are no longer relevant use the tag.

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

    EXAMPLE

    You can use the mark tag to highlight text.EXAMPLE

    This line of text is meant to be treated as deleted text.EXAMPLE

    This line of text is meant to be treated as no longer accurate.EXAMPLE

    Copy

    Copy

    Copy

    Copy13 of 63 13 of 63

  • This line of text is meant to be treated as no longer accurate.

    Inserted textFor indicating additions to the document use the tag.

    This line of text is meant to be treated as an addition to the document.

    Underlined textTo underline text use the tag.

    This line of text will render as underlined

    Make use of HTML's default emphasis tags w ith lightw eight styles.

    Small textFor de-emphasizing inline or blocks of text, use the tag to set text at 85% the size of the parent.Heading elements receive their ow n fontsize for nested elements.You may alternatively use an inline element w ith .small in place of any .

    This line of text is meant to be treated as fine print.

    BoldFor emphasizing a snippet of text w ith a heavier font-w eight.

    rendered as bold text

    ItalicsFor emphasizing a snippet of text w ith italics.

    This line of text is meant to be treated as an addition to the document.EXAMPLE

    This line of text w ill render as underlinedEXAMPLE

    This line of text is meant to be treated as f ine print.

    EXAMPLE

    The follow ing snippet of text is rendered as bold text.EXAMPLE

    Copy

    Copy

    Copy

    Copy

    14 of 63 14 of 63

  • rendered as italicized text

    Alternate elementsFeel free to use and in HTML5. is meant to highlight w ords or phrases w ithout conveyingadditional importance w hile is mostly for voice, technical terms, etc.

    Alignment classesEasily realign text to components w ith text alignment classes.

    Left aligned text.Center aligned text.Right aligned text.Justified text.No wrap text.

    Transformation classesTransform text in components w ith text capitalization classes.

    Lowercased text.Uppercased text.Capitalized text.

    AbbreviationsStylized implementation of HTML's element for abbreviations and acronyms to show the expandedversion on hover. Abbreviations w ith a title attribute have a light dotted bottom border and a help cursor on

    The follow ing snippet of text is rendered as italicized text.EXAMPLE

    Left aligned text.Center aligned text.

    Right aligned text.Justif ied text.No w rap text.

    EXAMPLE

    low ercased text.UPPERCASED TEXT.Capitalized Text.

    EXAMPLE

    Copy

    Copy

    Copy

    15 of 63 15 of 63

  • hover, providing additional context on hover.

    Basic abbreviationFor expanded text on long hover of an abbreviation, include the title attribute w ith the element.

    attr

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

    HTML

    AddressesPresent contact information for the nearest ancestor or the entire body of w ork. Preserve formatting by endingall lines w ith .

    Twitter, Inc. 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P: (123) 4567890

    Full Name [email protected]

    BlockquotesFor quoting blocks of content from another source w ithin your document.

    An abbreviation of the w ord attribute is attr.EXAMPLE

    HTML is the best thing since sliced bread.EXAMPLE

    Twitter, Inc.795 Folsom Ave, Suite 600San Francisco, CA 94107P: (123) 456-7890

    Full Namef [email protected]

    EXAMPLE

    Copy

    Copy

    Copy

    16 of 63 16 of 63

  • Default blockquoteWrap around any HTML as the quote. For straight quotes, w e recommend a .

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

    Blockquote optionsStyle and content changes for simple variations on a standard .Naming a sourceAdd a for identifying the source. Wrap the name of the source w ork in .

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title

    Alternate displaysAdd .blockquotereverse for a blockquote w ith right-aligned content.

    ...

    ListsUnordered

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

    EXAMPLE

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat aante. Someone famous in Source Title

    EXAMPLE

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Someone famous in Source Title

    EXAMPLE

    Copy

    Copy

    Copy

    17 of 63 17 of 63

  • A list of items in w hich the order does not explicitly matter.

    ...

    OrderedA list of items in w hich the order does explicitly matter.

    ...

    UnstyledRemove the default liststyle and left margin on list items (immediate children only). This only applies toimmediate children list items, meaning you w ill need to add the class for any nested lists as w ell.

    Lorem ipsum dolor sit ametConsectetur adipiscing elitInteger molestie lorem at massaFacilisis in pretium nisl aliquetNulla volutpat aliquam velit

    Phasellus iaculis nequePurus sodales ultriciesVestibulum laoreet porttitor semAc tristique libero volutpat at

    Faucibus porta lacus fringilla velAenean sit amet erat nuncEget porttitor lorem

    EXAMPLE

    Lorem ipsum dolor sit amet1.Consectetur adipiscing elit2.Integer molestie lorem at massa3.Facilisis in pretium nisl aliquet4.Nulla volutpat aliquam velit5.Faucibus porta lacus fringilla vel6.Aenean sit amet erat nunc7.Eget porttitor lorem8.

    EXAMPLE

    Lorem ipsum dolor sit ametConsectetur adipiscing elitInteger molestie lorem at massaFacilisis in pretium nisl aliquetNulla volutpat aliquam velit

    Phasellus iaculis nequePurus sodales ultricies

    Copy

    Copy

    EXAMPLE

    18 of 63 18 of 63

  • ...

    InlinePlace all list items on a single line w ith display: inlineblock; and some light padding.

    ...

    DescriptionA list of terms w ith their associated descriptions.

    ... ...

    Horizontal descriptionMake terms and descriptions in line up side-by-side. Starts off stacked like default s, but w hen thenavbar expands, so do these.

    Vestibulum laoreet porttitor semAc tristique libero volutpat at

    Faucibus porta lacus fringilla velAenean sit amet erat nuncEget porttitor lorem

    Lorem ipsum Phasellus iaculis Nulla volutpatEXAMPLE

    Description listsA description list is perfect for defining terms.EuismodVestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget metus.Malesuada portaEtiam porta sem malesuada magna mollis euismod.

    EXAMPLE

    Description listsEuismod

    Malesuada portaFelis euismod sem

    A description list is perfect for defining terms.Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.Donec id elit non mi porta gravida at eget metus.Etiam porta sem malesuada magna mollis euismod.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut...

    Copy

    Copy

    Copy

    EXAMPLE

    19 of 63 19 of 63

  • ... ...

    Auto-truncatingHorizontal description lists w ill truncate terms that are too long to f it in the left column w ithtextoverflow . In narrow er view ports, they w ill change to the default stacked layout.

    CodeInlineWrap inline snippets of code w ith .

    For example, should be wrapped as inline.

    User inputUse the to indicate input that is typically entered via keyboard.

    To switch directories, type cd followed by the name of the directory.To edit settings, press ctrl + ,

    Basic blockUse for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

    fermentum massa justo sit amet risus.

    For example, should be w rapped as inline.EXAMPLE

    To sw itch directories, type cd follow ed by the name of the directory.To edit settings, press ctrl + ,

    EXAMPLE

    Sample text here...

    EXAMPLE

    Copy

    Copy

    Copy

    20 of 63 20 of 63

  • Sample text here...

    You may optionally add the .prescrollable class, w hich w ill set a max-height of 350px and provide a y-axisscrollbar.

    VariablesFor indicating variables use the tag.

    y = mx + b

    Sample outputFor indicating blocks sample output from a program use the tag.

    This text is meant to be treated as sample output from a computer program.

    TablesBasic exampleFor basic stylinglight padding and only horizontal dividersadd the base class .table to any . It mayseem super redundant, but given the w idespread use of tables for other plugins like calendars and datepickers, w e've opted to isolate our custom table styles.

    y = mx + bEXAMPLE

    This text is meant to be treated as sample output from a computer program.EXAMPLE

    Optional table caption.# First Name Last Name Username1 Mark Otto @mdo

    2 Jacob Thornton @fat

    3 Larry the Bird @tw itter

    EXAMPLE

    Copy

    Copy

    Copy

    Copy

    21 of 63 21 of 63

  • ...

    Striped rowsUse .tablestriped to add zebra-striping to any table row w ithin the .

    Cross-browser compatibilityStriped tables are styled via the :nthchild CSS selector, w hich is not available in Internet Explorer 8.

    ...

    Bordered tableAdd .tablebordered for borders on all sides of the table and cells.

    ...

    Hover rowsAdd .tablehover to enable a hover state on table row s w ithin a .

    # First Name Last Name Username1 Mark Otto @mdo

    2 Jacob Thornton @fat

    3 Larry the Bird @tw itter

    EXAMPLE

    # First Name Last Name Username1 Mark Otto @mdo

    Mark Otto @Tw Bootstrap

    2 Jacob Thornton @fat

    3 Larry the Bird @tw itter

    EXAMPLE

    Copy

    Copy

    22 of 63 22 of 63

  • ...

    Condensed tableAdd .tablecondensed to make tables more compact by cutting cell padding in half.

    ...

    Contextual classesUse contextual classes to color table row s or individual cells.

    Class Description.active Applies the hover color to a particular row or cell

    .success Indicates a successful or positive action

    .info Indicates a neutral informative change or action

    .warning Indicates a w arning that might need attention

    .danger Indicates a dangerous or potentially negative action

    # First Name Last Name Username1 Mark Otto @mdo

    2 Jacob Thornton @fat

    3 Larry the Bird @tw itter

    EXAMPLE

    # First Name Last Name Username1 Mark Otto @mdo2 Jacob Thornton @fat3 Larry the Bird @tw itter

    EXAMPLE

    # Column heading Column heading Column heading

    Copy

    Copy

    EXAMPLE

    23 of 63 23 of 63

  • ...............

    ... ... ... ... ...

    Responsive tablesCreate responsive tables by w rapping any .table in .tableresponsive to make them scroll horizontally onsmall devices (under 768px). When view ing on anything larger than 768px w ide, you w ill not see anydifference in these tables.

    Firefox and fieldsetsFirefox has some aw kw ard f ieldset styling involving width that interferes w ith the responsive table.This cannot be overriden w ithout a Firefox-specif ic hack that w e don't provide in Bootstrap:

    @mozdocument urlprefix() { fieldset { display: tablecell; }}

    For more information, read this Stack Overflow answ er.

    # Column heading Column heading Column heading1 Column content Column content Column content

    2 Column content Column content Column content

    3 Column content Column content Column content

    4 Column content Column content Column content

    5 Column content Column content Column content

    6 Column content Column content Column content

    7 Column content Column content Column content

    8 Column content Column content Column content

    9 Column content Column content Column content

    Copy

    Copy

    24 of 63 24 of 63

  • ...

    FormsBasic exampleIndividual form controls automatically receive some global styling. All textual , , and elements w ith .formcontrol are set to width: 100%; by default. Wrap labels and controls in.formgroup for optimum spacing.

    #Tableheading

    Tableheading

    Tableheading

    Tableheading

    Tableheading

    Tableheading

    1 Table cell Table cell Table cell Table cell Table cell Table cell

    2 Table cell Table cell Table cell Table cell Table cell Table cell

    3 Table cell Table cell Table cell Table cell Table cell Table cell

    #Tableheading

    Tableheading

    Tableheading

    Tableheading

    Tableheading

    Tableheading

    1 Table cell Table cell Table cell Table cell Table cell Table cell

    2 Table cell Table cell Table cell Table cell Table cell Table cell

    3 Table cell Table cell Table cell Table cell Table cell Table cell

    EXAMPLE

    Email addressEnter email

    PasswordPassw ord

    File inputBrowse No file selected.

    Example block-level help text here.

    Copy

    EXAMPLE

    25 of 63 25 of 63

  • Email address Password File input Example blocklevel help text here. Check me out Submit

    Don't mix form groups with input groupsDo not mix form groups directly w ith input groups. Instead, nest the input group inside of the form group.

    Inline formAdd .forminline to your for left-aligned and inline-block controls. This only applies to formswithin viewports that are at least 768px wide.

    Requires custom widthsInputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, w e reset thatto width: auto; so multiple controls can reside on the same line. Depending on your layout, additionalcustom w idths may be required.

    Always add labelsScreen readers w ill have trouble w ith your forms if you don't include a label for every input. For theseinline forms, you can hide the labels using the .sronly class.

    Submit

    Check me out

    Copy

    26 of 63 26 of 63

  • Email address @ Password Remember me Sign in

    Horizontal formUse Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout byadding .formhorizontal to the form. Doing so changes .formgroup s to behave as grid row s, so no need for.row .

    Enter email Passw ord Sign in

    @

    Remember me

    EXAMPLE

    Email Email

    Password Passw ord

    Remember me

    Sign in

    EXAMPLE

    Enter email

    Copy

    Copy

    27 of 63 27 of 63

  • Email Password Remember me Sign in

    Supported controlsExamples of standard form controls supported in an example form layout.

    InputsMost common form control, text-based input f ields. Includes support for all HTML5 types: text , password ,datetime , datetimelocal , date , month , time , week , number , email , url , search , tel , and color .

    Type declaration requiredInputs w ill only be fully styled if their type is properly declared.

    Input groupsTo add integrated text or buttons before and/or after any text-based , check out the input group

    Text input

    EXAMPLE

    Copy

    28 of 63 28 of 63

  • component.

    TextareaForm control w hich supports multiple lines of text. Change rows attribute as necessary.

    Checkboxes and radiosCheckboxes are for selecting one or several options in a list, w hile radios are for selecting one option frommany.A checkbox or radio w ith the disabled attribute w ill be styled appropriately. To have the for thecheckbox or radio also display a "not-allow ed" cursor w hen the user hovers over the label, add the .disabledclass to your .radio , .radioinline , .checkbox , .checkboxinline , or .Default (stacked)

    EXAMPLE

    Option one is this and thatbe sure to include w hy it's greatOption tw o is disabled

    Option one is this and thatbe sure to include w hy it's greatOption tw o can be something else and selecting it w ill deselect option oneOption three is disabled

    EXAMPLE

    Copy

    Copy

    29 of 63 29 of 63

  • Option one is this and thatbe sure to include why it's great

    Option two is disabled

    Option one is this and thatbe sure to include why it's great

    Option two can be something else and selecting it will deselect option one

    Option three is disabled

    Inline checkboxes and radiosUse the .checkboxinline or .radioinline classes on a series of checkboxes or radios for controls thatappear on the same line.

    1 2 3

    1 2 3

    EXAMPLE

    Copy

    30 of 63 30 of 63

  • 1

    2

    3

    1

    2

    3

    Checkboxes and radios without labelsShould you have no text w ithin the , the input is positioned as you'd expect. Currently only workson non-inline checkboxes and radios.

    SelectsUse the default option, or add multiple to show multiple options at once.

    EXAMPLE

    1

    Copy

    EXAMPLE

    31 of 63 31 of 63

  • 1 2 3 4 5

    1 2 3 4 5

    Static controlWhen you need to place plain text next to a form label w ithin a form, use the .formcontrolstatic class on a .

    Email [email protected] Password

    12345

    Email [email protected]

    Password Passw ord

    EXAMPLE

    [email protected] Passw ord Confirm identity

    EXAMPLE

    Copy

    Copy

    Copy32 of 63 32 of 63

  • Email [email protected] Password Confirm identity

    Input focusWe remove the default outline styles on some form controls and apply a boxshadow in its place for :focus .

    Demo :focus stateThe above example input uses custom styles in our documentation to demonstrate the :focus state on a.formcontrol .

    Disabled inputsAdd the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.

    Disabled fieldsetsAdd the disabled attribute to a to disable all the controls w ithin the at once.

    Caveat about link functionality of Our styles use pointerevents: none to try to disable the link functionality of buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18and below , or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

    Cross-browser compatibility

    Demonstrative focus state

    EXAMPLE

    Disabled input here

    EXAMPLE

    Copy

    33 of 63 33 of 63

  • While Bootstrap w ill apply these styles in all brow sers, Internet Explorer 11 and below don't fully supportthe disabled attribute on a . Use custom JavaScript to disable the f ieldset in these brow sers.

    Disabled input Disabled select menu Disabled select Can't check this Submit

    Readonly inputsAdd the readonly boolean attribute on an input to prevent user input and style the input as disabled.

    Validation statesBootstrap includes validation styles for error, w arning, and success states on form controls. To use, add

    Disabled inputDisabled input

    Disabled select menuDisabled select

    Can't check this

    EXAMPLE

    Readonly input here

    EXAMPLE

    Copy

    Copy

    34 of 63 34 of 63

  • .haswarning , .haserror , or .hassuccess to the parent element. Any .controllabel , .formcontrol , and

    .helpblock w ithin that element w ill receive the validation styles.

    Input w ith success

    Input w ith warning

    Input w ith error

    Checkbox w ith successCheckbox w ith w arningCheckbox w ith error

    EXAMPLE

    Copy

    35 of 63 35 of 63

  • Input with success

    Input with warning

    Input with error

    Checkbox with success

    Checkbox with warning

    Checkbox with error

    With optional iconsYou can also add optional feedback icons w ith the addition of .hasfeedback and the right icon.Feedback icons only work w ith textual elements.

    Icons, labels, and input groupsManual positioning of feedback icons is required for inputs w ithout a label and for input groups w ith anadd-on on the right. You are strongly encouraged to provide labels for all inputs for accessibilityreasons. If you w ish to prevent labels from being displayed, hide them w ith the sronly class. If youmust do w ithout labels, adjust the top value of the feedback icon. For input groups, adjust the rightvalue to an appropriate pixel value depending on the w idth of your addon.

    Input w ith successEXAMPLE

    36 of 63 36 of 63

  • Input with success

    Input with warning

    Input with error

    Optional icons in horizontal and inline forms

    Input with success

    Input w ith warning

    Input w ith error

    Input w ith success

    EXAMPLE

    Input w ith success

    EXAMPLE

    Copy

    Copy

    Copy

    37 of 63 37 of 63

  • Input with success

    Optional icons with hidden .sronly labelsFor form controls w ith no visible label, add the .sronly class on the label. Bootstrap w ill automatically adjustthe position of the icon once it's been added.

    Hidden label

    Control sizingSet heights using classes like .inputlg , and set w idths using grid column classes like .collg* .

    Height sizingCreate taller or shorter form controls that match button sizes.

    EXAMPLE

    .input-lg

    Default input

    .input-sm

    .input-lg

    Default select

    .input-sm

    EXAMPLE

    Copy

    Copy

    38 of 63 38 of 63

  • .........

    Horizontal form group sizesQuickly size labels and form controls w ithin .formhorizontal by adding .formgrouplg or .formgroupsm .

    Large label Small label

    Column sizingWrap inputs in grid columns, or any custom parent element, to easily enforce desired w idths.

    Large label Large input

    Small label Small input

    EXAMPLE

    .col-xs-2 .col-xs-3 .col-xs-4

    EXAMPLE

    Copy

    Copy

    39 of 63 39 of 63

  • Help textBlock level help text for form controls.

    A block of help text that breaks onto a new line and may extend beyond one line.

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

    A block of help text that breaks onto a new line and may extend beyond one line.

    EXAMPLE

    Default Primary Success Info Warning Danger Link

    EXAMPLE

    Copy

    Copy

    40 of 63 40 of 63

  • Default

    Primary

    Success

    Info

    Warning

    Danger

    Link

    SizesFancy larger or smaller buttons? Add .btnlg , .btnsm , or .btnxs for additional sizes.

    Large button Large button

    Default button Default button

    Small button Small button

    Extra small button Extra small button

    Create block level buttonsthose that span the full w idth of a parent by adding .btnblock .

    Large button Large button

    Default button Default button

    Small button Small button

    Extra small button Extra small button

    EXAMPLE

    Copy

    41 of 63 41 of 63

  • Block level buttonBlock level button

    Active stateButtons w ill appear pressed (w ith a darker background, darker border, and inset shadow ) w hen active. For elements, this is done via :active . For elements, it's done w ith .active . How ever, you may use.active on s should you need to replicate the active state programmatically.

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

    Primary buttonButton

    Anchor elementAdd the .active class to buttons.

    Primary linkLink

    Disabled stateMake buttons look unclickable by fading them back w ith opacity .

    Button element

    Block level button

    Block level button

    EXAMPLE

    Primary button Button

    EXAMPLE

    Primary link Link

    EXAMPLE

    Copy

    Copy

    Copy

    42 of 63 42 of 63

  • Add the disabled attribute to buttons.

    Primary buttonButton

    Cross-browser compatibilityIf you add the disabled attribute to a , Internet Explorer 9 and below w ill render text gray w itha nasty text-shadow that w e cannot f ix.

    Anchor elementAdd the .disabled class to buttons.

    Primary linkLink

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

    Link functionality caveatThis class uses pointerevents: none to try to disable the link functionality of s, but that CSSproperty is not yet standardized and isn't fully supported in Opera 18 and below , or in Internet Explorer11. So to be safe, use custom JavaScript to disable such links.

    Context-specific usageWhile button classes can be used on and elements, only elements aresupported w ithin our nav and navbar components.

    Button tagsUse the button classes on an , , or element.

    EXAMPLE

    EXAMPLE

    Copy

    Copy

    43 of 63 43 of 63

  • LinkButton

    Cross-browser renderingAs a best practice, we highly recommend using the element whenever possible toensure matching cross-brow ser rendering.Among other things, there's a bug in Firefox

  • Helper classesContextual colorsConvey meaning through color w ith a handful of emphasis utility classes. These may also be applied to links andw ill darken on hover just like our default link styles.

    ..................

    Dealing with specificitySometimes emphasis classes cannot be applied due to the specif icity of another selector. In most cases,a suff icient w orkaround is to w rap your text in a w ith the class.

    Contextual backgrounds

    EXAMPLE

    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.Nullam id dolor id nibh ultricies vehicula ut id elit.Duis mollis, est non commodo luctus, nisi erat porttitor ligula.Maecenas sed diam eget risus varius blandit sit amet non magna.Etiam porta sem malesuada magna mollis euismod.Donec ullamcorper nulla non metus auctor fringilla.

    EXAMPLE

    Copy

    Copy

    45 of 63 45 of 63

  • Similar to the contextual text color classes, easily set the background of an element to any contextual class.Anchor components w ill darken on hover, just like the text classes.

    ...............

    Dealing with specificitySometimes contextual background classes cannot be applied due to the specif icity of another selector. Insome cases, a suff icient w orkaround is to w rap your element's content in a w ith the class.

    Close iconUse the generic close icon for dismissing content like modals and alerts.

    Close

    CaretsUse carets to indicate dropdow n functionality and direction. Note that the default caret w ill reverse automaticallyin dropup menus.

    Nullam id dolor id nibh ultricies vehicula ut id elit.

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

    Maecenas sed diam eget risus varius blandit sit amet non magna.

    Etiam porta sem malesuada magna mollis euismod.

    Donec ullamcorper nulla non metus auctor fringilla.

    EXAMPLE

    EXAMPLE

    EXAMPLE

    Copy

    Copy

    Copy46 of 63 46 of 63

  • Quick floatsFloat an element to the left or right w ith a class. !important is included to avoid specif icity issues. Classes canalso be used as mixins.

    ......

    // Classes.pullleft { float: left !important;}.pullright { float: right !important;}

    // Usage as mixins.element { .pullleft();}.anotherelement { .pullright();}

    Not for use in navbarsTo align components in navbars w ith utility classes, use .navbarleft or .navbarright instead. See thenavbar docs for details.

    Center content blocksSet an element to display: block and center via margin . Available as a mixin and class.

    ...

    // Classes.centerblock { display: block; marginleft: auto; marginright: auto;}

    // Usage as mixins.element { .centerblock();}

    ClearfixEasily clear float s by adding .clearfix to the parent element. Utilizes the micro clearf ix as popularized by

    Copy

    Copy

    Copy

    Copy

    47 of 63 47 of 63

  • Nicolas Gallagher. Can also be used as a mixin.

    ...

    // Mixin itself.clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; }}

    // Usage as a Mixin.element { .clearfix();}

    Showing and hiding contentForce an element to be show n or hidden (including for screen readers) w ith the use of .show and .hiddenclasses. These classes use !important to avoid specif icity conflicts, just like the quick f loats. They are onlyavailable for block level toggling. They can also be used as mixins..hide is available, but it does not alw ays affect screen readers and is deprecated as of v3.0.1. Use .hiddenor .sronly instead.Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is notmodif ied and the element can still affect the f low of the document.

    ......

    Copy

    Copy

    Copy

    Copy

    48 of 63 48 of 63

  • // Classes.show { display: block !important;}.hidden { display: none !important; visibility: hidden !important;}.invisible { visibility: hidden;}

    // Usage as mixins.element { .show();}.anotherelement { .hidden();}

    Screen reader and keyboard navigation contentHide an element to all devices except screen readers w ith .sronly . Combine .sronly w ith .sronlyfocusable to show the element again w hen it's focused (e.g. by a keyboard-only user). Necessary forfollow ing accessibility best practices. Can also be used as mixins.

    Skip to main content

    // Usage as a Mixin.skipnavigation { .sronly(); .sronlyfocusable();}

    Image replacementUtilize the .texthide class or mixin to help replace an element's text content w ith a background image.

    Custom heading

    // Usage as a Mixin.heading { .texthide();}

    Responsive utilitiesFor faster mobile-friendly development, use these utility classes for showing

    Copy

    Copy

    Copy

    Copy

    49 of 63 49 of 63

  • and hiding content by device via media query. Also included are utility classesfor toggling content when printed.Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, usethem to complement each device's presentation.

    Available classesUse a single or combination of the available classes for toggling content across view port breakpoints.

    Extra small devicesPhones (

  • Classes Browser Print.visibleprintblock.visibleprintinline.visibleprintinlineblock

    Hidden Visible

    .hiddenprint Visible Hidden

    The class .visibleprint also exists but is deprecated as of v3.2.0. It is approximately equivalent to.visibleprintblock , except w ith additional special cases for -related elements.

    Test casesResize your brow ser or load on different devices to test the responsive utility classes.

    Visible on...Green checkmarks indicate the element is visible in your current view port.

    Hidden on...Here, green checkmarks also indicate the element is hidden in your current view port.

    Using Less

    Extra small Visible on small Medium Large

    Visible on x-small and small Medium and large

    Extra small and medium Visible on small and large

    Extra small and large Visible on small and medium

    Extra small Hidden on small Medium Large

    Hidden on x-small and small Medium and large

    Extra small and medium Hidden on small and large

    Extra small and large Hidden on small and medium

    51 of 63 51 of 63

  • Bootstrap's CSS is built on Less, a preprocessor with additional functionalitylike variables, mixins, and functions for compiling CSS. Those looking to usethe source Less files instead of our compiled CSS files can make use of thenumerous variables and mixins we use throughout the framework.Grid variables and mixins are covered w ithin the Grid system section.

    Compiling BootstrapBootstrap can be used in at least tw o w ays: w ith the compiled CSS or w ith the source Less f iles. To compilethe Less f iles, consult the Getting Started section for how to setup your development environment to run thenecessary commands.Third party compilation tools may w ork w ith Bootstrap, but they are not supported by our core team.

    VariablesVariables are used throughout the entire project as a w ay to centralize and share commonly used values likecolors, spacing, or font stacks. For a complete breakdow n, please see the Customizer.

    ColorsEasily make use of tw o color schemes: grayscale and semantic. Grayscale colors provide quick access tocommonly used shades of black w hile semantic include various colors assigned to meaningful contextualvalues.

    @graydarker: lighten(#000, 13.5%); // #222@graydark: lighten(#000, 20%); // #333@gray: lighten(#000, 33.5%); // #555@graylight: lighten(#000, 46.7%); // #777@graylighter: lighten(#000, 93.5%); // #eee

    EXAMPLE

    EXAMPLE

    Copy

    Copy

    52 of 63 52 of 63

  • @brandprimary: #428bca;@brandsuccess: #5cb85c;@brandinfo: #5bc0de;@brandwarning: #f0ad4e;@branddanger: #d9534f;

    Use any of these color variables as they are or reassign them to more meaningful variables for your project.

    // Use asis.masthead { backgroundcolor: @brandprimary;}

    // Reassigned variables in Less@alertmessagebackground: @brandinfo;.alert { backgroundcolor: @alertmessagebackground;}

    ScaffoldingA handful of variables for quickly customizing key elements of your site's skeleton.

    // Scaffolding@bodybg: #fff;@textcolor: @black50;

    LinksEasily style your links w ith the right color w ith only one value.

    // Variables@linkcolor: @brandprimary;@linkhovercolor: darken(@linkcolor, 15%);

    // Usagea { color: @linkcolor; textdecoration: none;

    &:hover { color: @linkhovercolor; textdecoration: underline; }}

    Note that the @linkhovercolor uses a function, another aw esome tool from Less, to automagically create theright hover color. You can use darken , lighten , saturate , and desaturate .

    TypographyEasily set your type face, text size, leading, and more w ith a few quick variables. Bootstrap makes use of theseas w ell to provide easy typographic mixins.

    Copy

    Copy

    Copy

    Copy53 of 63 53 of 63

  • @fontfamilysansserif: "Helvetica Neue", Helvetica, Arial, sansserif;@fontfamilyserif: Georgia, "Times New Roman", Times, serif;@fontfamilymonospace: Menlo, Monaco, Consolas, "Courier New", monospace;@fontfamilybase: @fontfamilysansserif;

    @fontsizebase: 14px;@fontsizelarge: ceil((@fontsizebase * 1.25)); // ~18px@fontsizesmall: ceil((@fontsizebase * 0.85)); // ~12px

    @fontsizeh1: floor((@fontsizebase * 2.6)); // ~36px@fontsizeh2: floor((@fontsizebase * 2.15)); // ~30px@fontsizeh3: ceil((@fontsizebase * 1.7)); // ~24px@fontsizeh4: ceil((@fontsizebase * 1.25)); // ~18px@fontsizeh5: @fontsizebase;@fontsizeh6: ceil((@fontsizebase * 0.85)); // ~12px

    @lineheightbase: 1.428571429; // 20/14@lineheightcomputed: floor((@fontsizebase * @lineheightbase)); // ~20px

    @headingsfontfamily: inherit;@headingsfontweight: 500;@headingslineheight: 1.1;@headingscolor: inherit;

    IconsTw o quick variables for customizing the location and f ilename of your icons.

    @iconfontpath: "../fonts/";@iconfontname: "glyphiconshalflingsregular";

    ComponentsComponents throughout Bootstrap make use of some default variables for setting common values. Here are themost commonly used.

    Copy

    Copy

    54 of 63 54 of 63

  • @paddingbasevertical: 6px;@paddingbasehorizontal: 12px;

    @paddinglargevertical: 10px;@paddinglargehorizontal: 16px;

    @paddingsmallvertical: 5px;@paddingsmallhorizontal: 10px;

    @paddingxsvertical: 1px;@paddingxshorizontal: 5px;

    @lineheightlarge: 1.33;@lineheightsmall: 1.5;

    @borderradiusbase: 4px;@borderradiuslarge: 6px;@borderradiussmall: 3px;

    @componentactivecolor: #fff;@componentactivebg: @brandprimary;

    @caretwidthbase: 4px;@caretwidthlarge: 5px;

    Vendor mixinsVendor mixins are mixins to help support multiple brow sers by including all relevant vendor prefixes in yourcompiled CSS.

    Box-sizingReset your components' box model w ith a single mixin. For context, see this helpful article from Mozilla.The mixin is deprecated as of v3.2.0, w ith the introduction of autoprefixer. To preserve backw ards-compatibility, Bootstrap w ill continue to use the mixin internally until Bootstrap v4.

    .boxsizing(@boxmodel) { webkitboxsizing: @boxmodel; // Safari

  • .bordertopradius(@radius) { bordertoprightradius: @radius; bordertopleftradius: @radius;}.borderrightradius(@radius) { borderbottomrightradius: @radius; bordertoprightradius: @radius;}.borderbottomradius(@radius) { borderbottomrightradius: @radius; borderbottomleftradius: @radius;}.borderleftradius(@radius) { borderbottomleftradius: @radius; bordertopleftradius: @radius;}

    Box (Drop) shadowsIf your target audience is using the latest and greatest brow sers and devices, be sure to just use theboxshadow property on its ow n. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5),use the deprecated mixin to pick up the required webkit prefix.The mixin is deprecated as of v3.1.0, since Bootstrap doesn't off icially support the outdated platforms thatdon't support the standard property. To preserve backw ards-compatibility, Bootstrap w ill continue to use themixin internally until Bootstrap v4.Be sure to use rgba() colors in your box shadow s so they blend as seamlessly as possible w ith backgrounds.

    .boxshadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { webkitboxshadow: @shadow; // iOS

  • .transition(@transition) { webkittransition: @transition; transition: @transition;}.transitionproperty(@transitionproperty) { webkittransitionproperty: @transitionproperty; transitionproperty: @transitionproperty;}.transitiondelay(@transitiondelay) { webkittransitiondelay: @transitiondelay; transitiondelay: @transitiondelay;}.transitionduration(@transitionduration) { webkittransitionduration: @transitionduration; transitionduration: @transitionduration;}.transitiontimingfunction(@timingfunction) { webkittransitiontimingfunction: @timingfunction; transitiontimingfunction: @timingfunction;}.transitiontransform(@transition) { webkittransition: webkittransform @transition; moztransition: moztransform @transition; otransition: otransform @transition; transition: transform @transition;}

    TransformationsRotate, scale, translate (move), or skew any object.The mixins are deprecated as of v3.2.0, w ith the introduction of autoprefixer. To preserve backw ards-compatibility, Bootstrap w ill continue to use the mixins internally until Bootstrap v4.

    Copy

    57 of 63 57 of 63

  • .rotate(@degrees) { webkittransform: rotate(@degrees); mstransform: rotate(@degrees); // IE9 only transform: rotate(@degrees);}.scale(@ratio; @ratioy...) { webkittransform: scale(@ratio, @ratioy); mstransform: scale(@ratio, @ratioy); // IE9 only transform: scale(@ratio, @ratioy);}.translate(@x; @y) { webkittransform: translate(@x, @y); mstransform: translate(@x, @y); // IE9 only transform: translate(@x, @y);}.skew(@x; @y) { webkittransform: skew(@x, @y); mstransform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ transform: skew(@x, @y);}.translate3d(@x; @y; @z) { webkittransform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z);}

    .rotateX(@degrees) { webkittransform: rotateX(@degrees); mstransform: rotateX(@degrees); // IE9 only transform: rotateX(@degrees);}.rotateY(@degrees) { webkittransform: rotateY(@degrees); mstransform: rotateY(@degrees); // IE9 only transform: rotateY(@degrees);}.perspective(@perspective) { webkitperspective: @perspective; mozperspective: @perspective; perspective: @perspective;}.perspectiveorigin(@perspective) { webkitperspectiveorigin: @perspective; mozperspectiveorigin: @perspective; perspectiveorigin: @perspective;}.transformorigin(@origin) { webkittransformorigin: @origin; moztransformorigin: @origin; mstransformorigin: @origin; // IE9 only transformorigin: @origin;}

    AnimationsA single mixin for using all of CSS3's animation properties in one declaration and other mixins for individualproperties.

    58 of 63 58 of 63

  • The mixins are deprecated as of v3.2.0, w ith the introduction of autoprefixer. To preserve backw ards-compatibility, Bootstrap w ill continue to use the mixins internally until Bootstrap v4.

    .animation(@animation) { webkitanimation: @animation; animation: @animation;}.animationname(@name) { webkitanimationname: @name; animationname: @name;}.animationduration(@duration) { webkitanimationduration: @duration; animationduration: @duration;}.animationtimingfunction(@timingfunction) { webkitanimationtimingfunction: @timingfunction; animationtimingfunction: @timingfunction;}.animationdelay(@delay) { webkitanimationdelay: @delay; animationdelay: @delay;}.animationiterationcount(@iterationcount) { webkitanimationiterationcount: @iterationcount; animationiterationcount: @iterationcount;}.animationdirection(@direction) { webkitanimationdirection: @direction; animationdirection: @direction;}

    OpacitySet the opacity for all brow sers and provide a filter fallback for IE8.

    .opacity(@opacity) { opacity: @opacity; // IE8 filter @opacityie: (@opacity * 100); filter: ~"alpha(opacity=@{opacityie})";}

    Placeholder textProvide context for form controls w ithin each f ield.

    .placeholder(@color: @inputcolorplaceholder) { &::mozplaceholder { color: @color; } // Firefox &:msinputplaceholder { color: @color; } // Internet Explorer 10+ &::webkitinputplaceholder { color: @color; } // Safari and Chrome}

    ColumnsGenerate columns via CSS w ithin a single element.

    Copy

    Copy

    Copy

    59 of 63 59 of 63

  • .contentcolumns(@width; @count; @gap) { webkitcolumnwidth: @width; mozcolumnwidth: @width; columnwidth: @width; webkitcolumncount: @count; mozcolumncount: @count; columncount: @count; webkitcolumngap: @gap; mozcolumngap: @gap; columngap: @gap;}

    GradientsEasily turn any tw o colors into a background gradient. Get more advanced and set a direction, use three colors,or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.

    #gradient > .vertical(#333; #000);#gradient > .horizontal(#333; #000);#gradient > .radial(#333; #000);

    You can also specify the angle of a standard tw o-color, linear gradient:

    #gradient > .directional(#333; #000; 45deg);

    If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and w e'll overlay atranslucent w hite stripe.

    #gradient > .striped(#333; 45deg);

    Up the ante and use three colors instead. Set the f irst color, the second color, the second color's color stop (apercentage value like 25%), and the third color w ith these mixins:

    #gradient > .verticalthreecolors(#777; #333; 25%; #000);#gradient > .horizontalthreecolors(#777; #333; 25%; #000);

    Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specif ic filter you mayhave added. You can do that by using the .resetfilter() mixin alongside backgroundimage: none; .

    Utility mixinsUtility mixins are mixins that combine otherw ise unrelated CSS properties to achieve a specif ic goal or task.

    ClearfixForget adding class="clearfix" to any element and instead add the .clearfix() mixin w here appropriate.Uses the micro clearfix from Nicolas Gallager.

    Copy

    Copy

    Copy

    Copy

    Copy

    60 of 63 60 of 63

  • // Mixin.clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; }}

    // Usage.container { .clearfix();}

    Horizontal centeringQuickly center any element w ithin its parent. Requires width or maxwidth to be set.

    // Mixin.centerblock() { display: block; marginleft: auto; marginright: auto;}

    // Usage.container { width: 940px; .centerblock();}

    Sizing helpersSpecify the dimensions of an object more easily.

    // Mixins.size(@width; @height) { width: @width; height: @height;}.square(@size) { .size(@size; @size);}

    // Usage.image { .size(400px; 300px); }.avatar { .square(48px); }

    Resizable textareasEasily configure the resize options for any textarea, or any other element. Defaults to normal brow ser behavior( both ).

    Copy

    Copy

    61 of 63 61 of 63

  • .resizable(@direction: both) { // Options: horizontal, vertical, both resize: @direction; // Safari fix overflow: auto;}

    Truncating textEasily truncate text w ith an ellipsis w ith a single mixin. Requires element to be block or inlineblocklevel.

    // Mixin.textoverflow() { overflow: hidden; textoverflow: ellipsis; whitespace: nowrap;}

    // Usage.branchname { display: inlineblock; maxwidth: 200px; .textoverflow();}

    Retina imagesSpecify tw o image paths and the @1x image dimensions, and Bootstrap w ill provide an @2x media query. Ifyou have many images to serve, consider writing your retina image CSS manually in a singlemedia query.

    .imgretina(@file1x; @file2x; @width1x; @height1x) { backgroundimage: url("@{file1x}");

    @media only screen and (webkitmindevicepixelratio: 2), only screen and ( minmozdevicepixelratio: 2), only screen and ( omindevicepixelratio: 2/1), only screen and ( mindevicepixelratio: 2), only screen and ( minresolution: 192dpi), only screen and ( minresolution: 2dppx) { backgroundimage: url("@{file2x}"); backgroundsize: @width1x @height1x; }}

    // Usage.jumbotron { .imgretina("/img/bg1x.png", "/img/bg2x.png", 100px, 100px);}

    Copy

    Copy

    62 of 63 62 of 63

  • Using SassWhile Bootstrap is built on Less, it also has an official Sass port. We maintainit in a separate GitHub repository and handle updates with a conversion script.

    What's includedSince the Sass port has a separate repo and serves a slightly different audience, the contents of the projectdiffer greatly from the main Bootstrap project. This ensures the Sass port is as compatible w ith as manySass-based systems as possible.

    Path Descriptionlib/ Ruby gem code (Sass configuration, Rails and Compass integrations)

    tasks/ Converter scripts (turning upstream Less to Sass)

    test/ Compilation tests

    templates/ Compass package manifest

    vendor/assets/ Sass, JavaScript, and font f iles

    Rakefile Internal tasks, such as rake and convert

    Visit the Sass port's GitHub repository to see these f iles in action.

    InstallationFor information on how to install and use Bootstrap for Sass, consult the GitHub repository readme. It's the mostup to date source and includes information for use w ith Rails, Compass, and standard Sass projects.

    Bootstrap for Sass

    63 of 63 63 of 63