Tried redoing this in flexbox, but it falls apart really quickly. Any changes in height of the cells throws it all off since the rows become columns (and thus, content across columns cannot be equally sized). Rather than implement something with such glaring flaws, I'm nuking it outright.
- Renames .pos-f-t to .fixed-top, adds .fixed-bottom and .sticky-top
- Updates utilities Sass to be split across more files (one for position, sizing, and spacing)
* Update ie10-viewport-bug-workaround.js year
* Update narrow-jumbotron copyright year to 2017
* Update carousel/index.html copyright year to 2017
* Update browsers-devices.md copyright year to 2017
* Update change-version.js copyright year to 2017
* Remove IE compatibility mode meta tag from docs, examples, and JS tests as we no longer support IE9 and IE8
* update and remove some IE bits from our supported browser page
* update introduction.md to match
* reword starter template intro
- <progress> element didn't allow animation, labels overlaid, multiple bars, etc.
- Revamps CSS to use something more similar to v3's implementation
- Ditches variant mixin for `bg-` utils
- Rebuilds docs to match, including adding a new Height section for customizing that.
Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
- since we're column to start, need to set row.
- note that flex-direction cannot be inherited, so we have to set it twice.
- apply the horizontal padding again to .nav-link.
- remove the .nav-item styles (un-needed).
- remove previous .nav-link styles as they were un-nested and potentially problematic in old placement should someone mix more navs in here.
since we're no longer using the .nav as a base class, we need to bring over some base styles for redoing browser list styles and setting flex in motion.
also brings with it some .nav-link styling. we're still using this global class, but with this small modification for alignment of content in responsive modes.
- Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states.
- Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding.
- Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary.
- Added support for :active states on the .list-group-item-action variant (for the current click state).
- Removed the heading and text classes and variables since we can accomplish the same thing with utilities.
- Added support for :disabled on the .list-group-item-action as well since we can use those with button elements.
- Rearranged docs to reflect all the above changes.
- Reformatted some Sass variables.
- Removes the plain-hover-focus mixin from active and disabled states; no need for them.
- Adds :active and :disabled since we can use button elements here, too.
- Wrap the disabled background-image override in an -gradients condition.
- No need to set hover and focus on disabled or active elements. Disabled has no interactivity and active will inherit the focus.
- Also removes two now unused vars.
- removes original outline removal (hah)
- replaces it with an explicit `outline: 0` on `.btn`
- instead of replicating `:hover` for `:focus`, uses custom and themed `box-shadow` for an "outline"
- not mapped to the `$enable-shadows` variable because accessibility
Trying to simplify our output here by revamping these selectors. We overcomplicated things by setting hover styles for nearly every state (disabled and active included), and we set them in the wrong order.
This commit does the following:
- Reorders states so disabled comes before active, thereby removing the need to set disabled-active styles.
- Removes all focus and hover styles from disabled states as those will naturally inherit from the default button state.
- Renamed `.open` to `.show` to fix dropdown toggle highlighting.
- Tweaked some indendation in the Sass.
Fixes#21135.
There's a height mismatch here because we're setting padding on the labels, while inputs get padding *and* a top+bottom border. This now uses calc to determine the exact height needed to match labels to inputs.
This also fixes#21280. Previously, we were using float and clear on the individual controls, but that meant a computer height of `0` for the parent `.custom-controls-stacked`. No more problem after using flexbox though.
- we need to set margin for space between footer buttons as flexbox doesn't render HTML spaces like inline-block does
- flexbox doesn't have collapsing margins or anything, so we hack it with some :not(:first-child) and :not(:last-child) action
- Adds new flexbox.md file to utilities docs
- Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon.
- Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
- Reorganize things, leading with the base nav first instead of an accessibility note, and then moving the rest to a new available styles section.
- Add horizontal alignment options thanks to new flex utils (these new utils will be documented later in another commit).
- Dropped `.nav-stacked` for a flex util and added additional alignment options, so document those, too.
Given move to flexbox, we can make this available for everyone and clean it up some.
- Simplifies the `.nav-justified` styles to build on the flex-powered `.nav` base class.
- Adds the `.nav-fill` to make nav links fill available horizontal space, but not equal width.
- Set an explicit `display: flex` on the base `.nav` class and remove the floats/clearfixes from our navs.
- Set some global styles for `.nav-link`, a departure from the previous solution that featured no predefined padding.
- Move `.nav-link` from `inline-block` to `block` given this setting was added for our tabs and pills anyway.
- Remove horizontal margin from nav tabs; let folks set that on their own from now on.
Turns out we did have the correct height calculation with our custom selects. The problem was we lacked a shared line-height with our buttons and inputs.
This restores the previous `calc` math and adds a line-height that reuses the input line-height.
Fixes 2 bugs:
1. All keydowns were being prevented. Because of that the user wasn't able to navigate in the whole page using ARROW_UP/ARROW_DOWN.
2. Even when is an input or textarea the keydowns were being prevented. Because of that the user wasn't able to type any text on these elements.
- better copy and examples throughout
- callout on flexbug #12 for inline elements like links and images (which is the problem in #20408)
- add order section
Sets minimum required flex styles (including an explicit starting alignment) and removes everything else.
- no need for .media-left and .media-right, we have padding utils
- no need for a .media-heading, we have margin
- no need for .media-object, we have display utils
- no need for .media-list, we have .list-unstyled util
- Instead of negative left/right margins, we selectively apply margins to the cards as needed. This way the first and last child never receive a left and right margin (respectively), so we don't need to negative indent those at the .card-deck level.
- Drops the margin-bottom override on the .card because there's no more default margin there.
- Drop the margin-bottom from the .card-deck to match our lack of margins on the card.
This and the previous commit fixes#19883.
- Drops the absolute positioning of the icons within the left/right controls. We have to keep the controls themselves positioned though since we're overlapping HTML elements here.
- No more position, left, right, or margins involved; just some justify-content and align-items.
- Add some comments for explaining which flex property-value pair does what.
- Remove the unapplied font and line-height stuff now that we're all SVGs and flexbox here.
This revamps the indicators to use flexbox instead of inline-block for added flexbility (hah). Indicators now automatically scale based on the number of elements present, and max out at the `$carousel-indicator-width` instead of always being that wide.
- Require inner element for the icon for improved customization (e.g., drop the element to replace it with your own icon font or SVG)
- Tighten up padding
- Better comments
- drop the table styles, use flex
- remove commented out code
- consolidate styles a bit
- add a huge flex-grow to the nav, making the assumption you want nav to take up most space
* remove the $enable-flex variable option
* remove bootstrap-flex.css dist file and it's grunt task
* remove the separate flex css file for docs; it's all the same now
* remove flexbox docs (porting some to the main grid docs in next commit)
* clean up few grid docs bits to simplify copy, start to mention flexbox
* port relevant flexbox-grid.md content to grid.md
- clean up mixins
- update how it works section
- bring over sizing and alignment sections
* remove the $enable-flex from the options.md page
* update lead paragraph to mention flexbox
* update migration to mention loss of ie9 support
* remove mention of flexbox dist file
* clarify IE support
* making a note
* remove flexbox variant mentions from component docs
- updates docs for media object, navs, list group, and cards to consolidate docs
- no more need to callout flexbox variants since it's now the default
* remove $enable-flex if/else from sass files
* remove flex dist files
* update scss lint property order to account for flex properties
* linting
* change to numberless classes for autosizing, wrap in highlighting div
* bump gruntfile and postcss to ie10
* redo intro sections
* rearrange
* phew, redo hella grid docs
- rearrange all the things
- consolidate some bits
* remove reference to flexbox mode
* more border action for demo
* Make some changes to the .card's in .card-deck's to ensure footers align to the bottom
This pulls in some changes from #18462 to include a set of generic color variables. It doesn't include a Sass map for generating the theme colors yet, since we can't easily do that for all components, but does give a few more color choices to folks and an easier way to customize.
* Overwrite margin-bottom on form-control-static
In the documentation the form-control-static class has been used on a p element.
On the regular vertical form the margin bottom of the p element gets overwritten by a mb-0 class.
In the inline form example this class hasn't been applied, therefore the p element gets a margin-bottom.
To prevent this behavior we can add a margin-bottom of 0.
* Update _forms.scss
- fix naming of left/right controls
- drop the absolute positioning of things and rely on only 3d transforms
- remove img styles and require classes to avoid inline-block line-height stuff
Remove the border-bottom from abbr elements since that's covered with an underline in Normalize.css. Updates the docs to match and tweaks some code comments, too.
* Remove comment that duplicated some code
* Use transition mixin whenever possible
* Create a new function to reduce duplication
* Use the new `breakpoint-infix` method
* Fixed incorrect instruction: "Press ⌘ to copy"
It needed to be "Press ⌘C to copy"
* Updated to concatenate copy string
Updated copy command to concatenated string to prevent potential issues
* Updated the way the copy string concatenates
As per excellent suggestion by @tomlutzenberger
* Removed semicolon line endings
;P
* var not const or let
Add padding to dismiss button for alerts and use position to place it. Removes extra padding on .alert-dismissible's right side, too. We could probably further simplify these things in the future as well.
* Clean up some utilities
- Align CSS properties
- In `_spacing.scss`, we had a comment saying what 'a' was for, but we removed that so this comment no longer applies
* Remove '-xs' from `.navbar-toggleable-xs` and remove duplication
* Fix outdated classes to use newer ones
* Update clearfix to use block instead of table display (also reorder properties for linting)
* update docs snippet for clearfix mixin—was apparently still using Less syntax and had old clearfix hack (even before the block change in this PR)
When the rubberband effect causes Safari to scroll past the top of the
page, the value of scrollTop becomes negative. If the offset of the first
ScrollSpy target is 0 - essentially if the target is at the top of the
page - then ScrollSpy should not clear the active item. Conceptually, the
first item should remain active when rubberbanding past the top of the
page.
This commit fixes issue #21055 by verifying the first scrollspy target is
not at the top of the page before clearing the active nav-item.
* Clean up _flex.scss a little
This commit just cleans up the formating of _flex.scss by changing
it so that it uses a single `@include media-breakpoint-up` instead
of multiple. It also aligns all of the CSS properties so it looks
a bit nicer.
* Remove `-xs` from flex classes
* fix form-inline with flex enabled
* grunt
* fix alignment of labels
* shorter if syntax
* add new form example to docs for now
* update inline form docs usage guidelines
* responsive margins
* better margin utils
* fix sizing of .form-check
* flexbox alignment of .form-check
* no need to change direction
* support custom controls in inline form, for default and flex modes
* add example of custom select and checks to docs
* remove hidden and visible label variants since we cover that in the usage guidelines at the start and include hidden labels everywhere
* use property value instead of layout name
* apply to all labels
* add a visible label, space it out
* add id
* Add some flexbox nav components
- Includes .nav-justified for inline, tab, and pill nav components
- Includes example of using the flex utils (.d- and .flex-items-) for centered nav
* redo heading hierarchy a bit
* Darken dismiss icon opacity
* Darken text on active list group items
* Darken light gray for accessibility/contrast, then update gray and dark gray to match
The new breakpiont-limited class pattern is to omit the breakpoint size when using the lowest size eg. col-xs-12 to col-12. This commit implements this pattern to the grid system.
* Explore responsive display utils, but with a twist: lowest breakpoint has no breakpoint modifier in the class name
* make floats use the same format, add float-none mixin
* make spacer utils responsive by grid tier
* update scale to add two levels, document them
* change responsive spacing utils to avoid the xs abbreviation in the class name for that tier
* update code snippet to match source
* update usage in our docs
* linter
* docs updates
* Fix#17964
Some browsers are lazy when updating dom elements after transition effects. This can be fixed by reading element properties such as offsetHeight or offsetWidth. However, creating a function using the Function constructor just to access such element, results in a violation of Content Security Policy (where applied), which in turn crashes the application. This fix actually reverts to the way this was handled in v3 and should work as intended.
Firefox requires a width and flex-basis value to size the input field correctly. Despite the width being 1%, the input will size correctly at all parent widths.
http://codepen.io/zalog/pen/bpMJmv
floated content has to come first in the DOM, otherwise you can get alignment bugs. in flexbox though, that's not the case. as such, i'm adding this example code to guide folks to the changes needed to move between default and flex modes.
Fixes#21023.
Uses some math functions to determine what the offset should be. This is helpful for those who customize the size of their indicators and still want them vertically centered.
Fixes#20730.
This change computes the minimum needed height of what a single line of text would be for the custom checkboxes/radios. This is required because our custom control indicators are positioned absolutely, meaning they cannot be clearfixed or anything like that. Using a computed value means it should scale nicely in case of customization
It was only available for anchor elements and not button elements, so it was super weird to support. Might be bringing it back with flexbox though in v4 as an option.
- Remove margin-bottom override in favor of .mb-0 utility class
- Apply the input line-height styles to match
- Remove the min-height to match the input
Creating max-width images is not dependent on the display, so setting it is redundant. Cleans up the comments and implementation of the mixin as well.
Fixes#20767
Makes it so that the container is no longer wider than the breakpoint used in the media query. This was never really an issue in rendering as the max-width handled it appropriately, but the mismatch was still incorrect.
Fixes#18054
- Fixes issues between float and flex grid systems where container wouldn't fill the available width in Chrome & FF (but would in Safari)
- Fixes#20681
- Fixes#17621 (basically same issue as above issue)
Originally -font-size was added in v3 to set the font-size of the <small> element. Now that we have newer, global type variables, we can use those instead for these kind of things.
Fixes#20859
With apologies, copy/paste error following on from trying to fix conflicting Hound/Travis checks for https://github.com/twbs/bootstrap/pull/20821/ slipped through before I noticed them.
* Fixes#20775 without adding extra width and an important flag
* Since we're now getting the extend, we don't need the extra position relative
* rerrange
* getting min-height from the extend already
- Fixes#20298 for vertical button group spacing
- Fixes#20784 for horizontal (default) button group spacing
- Alternate fix to #20823 which only applied a fix for vertical button groups
* descriptions for getting started pages
* descriptions for layout
* add content page descriptions
* more descriptions, updates to some existing ones
* correct site url
* add social stuff to config for twitter cards
* add twitter meta tags; use large image for homepage and regular card for all others
* add the assets
* more site config
* more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements
* Have same margin for <hN> as a <div> on .card-headers
Related #18726
When you use a `<hN>` as `.card-header` there is `margin-bottom: .5rem` added. The changes set the margin-bottom to 0
* Removed space
- Move and rename .img-rounded to .rounded, .img-circle to .rounded-circle
- Add new .rounded-{direction} utils
- New docs pages for border utils with TBD comments for the border property
- Removes most image examples for rounding from the content/images docs in favor of new docs page
- Rather than mix multiple properties in our color utilities, this splits all color and all background utils into separate classes.
- Adds new .text-white class to help lighten text color for darker backgrounds
* Allow text of custom form labels to wrap like the default ones
* Switch from using after to force line breaks to float/clear combo in stacked custom forms
* Add .img-fluid to card images in columns to ensure proper resizing
* change that variable from regular value to variable
* use calc to figure out a tighter border for card images
I updated the doc with an example of a flex layout of 3 columns where the center column is specified as a `.col-xs-5` to show that other columns will resize no matter what the width of the center column.
Experienced bootstrap developers will expect to have to use an even number for the center column width when in reality any size will work.
I believe this is quite useful information and doesn't add too much to the docs.
Another option would be to make that initial example a `.col-xs-5` instead of a `.col-xs-6` to highlight this fact in the first place.
- Creates new flexbox grid Sass file in our docs assets
- Updates the Gruntfile to compile said new Sass file and minify the output
- Update notice on flexbox docs page for how it works
- Only enable compiled flexbox grid CSS in hosted docs site, not in dev (for easier and specific debugging of all flexbox features)
- Restores two-mixin approach to generating semantic grid columns (now with 'make-col-ready' and 'make-col')
- Removes need for .col-xs-12 by restoring the mass list of all grid tier classes to set position, min-height, and padding
- Adds an initial 'width: 100%' to flexbox grid column prep (later overridden by the column sizing in 'flex' shorthand or 'width') to prevent flexbox columns from collapsing in lower viewports
SCSS-Lint 0.49.0 modifies Shorthand linter to report lint if a shorthand
of a length not specified in the allowed_shorthands option is used.
New defaults include "4" in the list of allowed shorthands, so we are changing our configuration accordingly.
Ref: https://github.com/brigade/scss-lint/commit/e283d1689699f581561fea344df3168128c46d7b
* bower.json, package.json: Extend jQuery version ranges to include v3
* NuGet: Bump jQuery to v3.0.0.1
* Docs+Examples: Update jQuery to v3.0.0
* Use jQuery v3.0.0 for JS unit tests
* Update jqueryVersionCheck to allow jQuery v3.x.x
Previously, when running the docs locally, the site, rooted at:
http://localhost:9001/
would reference docs assets using relative URLs such as:
/../assets/js/vendor/anchor.min.js
which is equivalent to:
http://localhost:9001/../assets/js/vendor/anchor.min.js
which is nonsense, since the root directory has no parent directory.
Apparently browsers silently ignore this extra '..', hence why this wasn't noticed until now.
But if you adjust Jekyll's `baseurl` setting, this mistake causes incorrect URLs to get generated.
This commit corrects the problem by removing the extra '../' from the paths.
These paths are also referenced in the Gruntfile, where the fix actually allows us to simplify the code.
Previously, in the Gruntfile, we were doing, e.g.:
path.join('./docs/assets', '../assets/js/vendor/anchor.min.js')
which calculates to:
./docs/assets/../assets/js/vendor/anchor.min.js
which can be simplified to:
./docs/assets/js/vendor/anchor.min.js
So we can remove the '/assets' suffix from the left argument
and the '../' prefix from the right argument
and still obtain the same result.
Refs #19990
Continues the degruntification process.
Also removes mq4-hover-shim for now,
since it doesn't yet implement the standard PostCSS plugin interface.
* Use $.one() instead of $.on() since there are no $.off()s in the code.
* Remove unnecessary namespacing of listeners for the `scroll` & `load` events.
These are vanilla DOM events (not custom jQuery namespaced events)
and we're not using jQuery namespacing to manage these event listeners either (e.g. `$.off()`).
[skip validator]
Here we're doing some margin swapping, so it looks a little funky. All this does is match the margin implementation and rendering across our table and flex versions of card decks.
- Remove background-color from header and footer in inverse cards (fixes#19841)
- Update border override for header and footer in cards; only need to declare a new color
- Update the selector for targetting blockquote footers in cards
- Remove the box-shadow and switch back to border to match .card basics
- Update the header nav margin override--since we restored the border, we need that default negative margin at the bottom
- Really we didn't need to do any of that strip units stuff to generate six new variables, two for each button size
- Using sibling selectors, we can target those split button dropdown toggles using the .dropdown-toggle-split class, and adjust padding and margin as needed
- Now, we nuke the margin-left from the ::after generated caret and tighten up the padding so that those split toggles don't look huge next to their main button
This avoids applying the reset to named anchors/placeholder links (links
without an `href`) that have explicitly been made keyboard-focusable
(using `tabindex`). This is not fool-proof - it's not
easy/straightforward to check for the actual `tabindex` value itself, to
ensure it's positive, not will this apply if a link has been "blessed"
with `tabindex` via JS. However, this should catch most common uses (and
gives a reasonably valid way around the issue for developers who, for
whatever reason, DO want to use links without `href` - as side effect,
it forces best practice of at least ensuring these links can also be
focused with the keyboard)
- Move disabled radio and checkbox styles to Reboot
- Collapse .radio and .checkbox into single class, .form-check
- Collapse .radio-inline and .checkbox-inline into single class, .form-check-inline
- Require classes for sub-elements in both new classes
- Drops the experiment I had going for `box-shadow`-powered borders
- Reinstates regular `border` using existing variables
Fixes #19097 and #19143. Nullifies #19828.
- Rather than use CSS hacks, let's avoid needing to hack anything
- Creates a new Reboot entry to simply reset the appear of the temporal inputs, thereby avoiding the problem entirely
- Less than ideal for conveying affordance on iOS, but given bugginess of the input itself, seems a decent tradeoff
Don't reference `Tether` via attachment to `window`, with the update one can import bootstrap providing the dependencies in webpack with:
```
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether',
});
```
Then inside one's own bootstrap/globals, `import 'bootstrap';` will simply work, and $/jQuery can be used from there.
I had wanted to do this, but also expose jQuery, Tether, etc when in development build in my code, but if I provide `window.Tether`, I can't then expose it to the outside...
Sounds like IE11 isn't getting non-critical fixes anymore, so there's no point in mentioning it (just like there's no point in mentioning IE10).
Help us, Edge-Wan Kenobi! You're our only hope.
[ci skip]
The modal backdrop positioning bug related to iOS' virtual keyboard doesn't seem to reproduce in iOS 8.0+.
(Possibly as a side-effect of https://bugs.webkit.org/show_bug.cgi?id=153224 )
Refs #9023
[skip sauce]
/fyi @mdo
Note: The selector in dashboard.css that used .page-header was superfluous
because the margin that it zeroed was already zero even without that declaration.
[skip sauce]
- Give some guidance on when someone might use any of the three
validation states. Fixes#18702.
- Improve the examples to provide examples of supporting validation
text with the new `.form-control-feedback`, as well as always-present
help text. Nullifies #18704.
- Moves from no set line-height (inherited of 1.5) to declared 1.25 for
all inputs and buttons (regardless of size modifier).
- Updates padding to be `.5rem` instead of `.375rem` so that padding is
more likely to be whole numbers based on the root font-size.
- Whole numbers will be beneficial in avoiding odd fractional pixels
that can lead to misalignment as shown in #18607.
- Large buttons and inputs are now a tad wider, and smaller
buttons/inputs a tad shorter and narrower, too.
- Switch from width to max-width for all widths to avoid scaling outside viewport bounds
- Rejigger the media queries for a more logical breakpoint for the large and small modal sizes
- Avoids changing the width of the default modal (nullifying #17794 and fixing #17581)
- Make it an explicit class instead of qualifying with elements (.list-group-item-action)
- Rearrange the entire file for more straightforward flow
- Fix text-decoration bug as a result of the reorder
- Switch from h4's to h5's in docs
- Update docs to merge anchors and buttons sections; clearify usage guidelines there, too
- Nullify #17479 in the process
- Both classes do about the same thing, but with different names
- Clarifies docs for .m-x-auto requiring a fixed width block element for it to work
- Add missing heading for clearfix section in docs (unrelated)
- Flexbox responsive behavior fixed with specific .col-{breakpoint} classes now added
- Dropped the make-col mixin in favor of a column-basics placeholder that we can extend across our grid infrastructure
- Updated docs to use required .col-xs-12 (as a safeguard for when folks enable flexbox mode--this isn't necessary in default grid mode)
- Update flexbox grid docs to include responsive docs, tweak some other bits too
Capture the slug once before applying it and add a slash to it to so we get a unique string to match against instead of a fuzzy partial 'contains'. Helps avoid 'grid' highlighting 'flexbox-grid', for example.
- Rename -height to -height-base to match other vars
- Drop use of -height across the board and rely on it to be inherited
- Adjust padding of .dropdown-header to account for different line-height of h6 heading element (this needs refactoring for variables and rems also)
When using a <label> as an .input-group-addon, there will be a default margin-bottom of .5rem via Reboot.
This will lead to undesirable whitespace below the label and the <input> will become taller than needed. By removing the margin, it will play nice with <label> elements.
Closes#19012
Bootstrap’s .button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling.
When the checkbox or radio state is changed, there should be triggered the change event. Currently, the change event is triggered on the Button, which is not correct. Only input fields do support the change event.
Currently, there is no actual accessibility page, so this avoids a 404
in the docs. More fundamentally, though, it makes more sense for
accessibility advice to be directly integrated in the docs (which we're
doing, for the most part - though we should ensure that we do
cover/mention everything where appropriate), so there's no need for a
separate accessibility page.
- New vars
- New function for stripping units so we can combine rems and ems in math functions
- Add new classes for sizing and spacing around the split dropdown toggle so that the caret isn't misaligned
- Moves styles up the document a bit to nest them
- Drops the static 1px for $navbar-tabs-border-width so once again it’s
all tied together should folks customize that
- Renames old and unused $nav-pills-active-link-hover-* for
$nav-pills-active-link-* ones
- Puts those vars to use in place of defaults $component-* vars on nav
pills
- Add new $nav-tabs-border-width for the bottom border on the .nav-tabs
parent class
- Use that new variable for the negative margin on nav-items within it
for consistent customization
- Drop the $nav-tabs-link-border-width for the new variable so it’s all
tied together
- add more details on custom checkboxes and radios for how we handle the states and how the css works
- create a disabled custom checkboxes and radios example
- Less nesting with more specific classes
- New class names for most elements to avoid unnecessary and potentially confusing shorthand
- Require new class and markup for the description (though it's only necessary for disable states, it's now part of the entire component's markup for all states just in case)
- Change up colors and variables for regular and disabled states
As per our browser compat policy, we only claim support for latest
versions of Opera on desktop. Current Opera is version 34. From testing, IE11 does support `pointer-events:none` just fine now.
"Go somewhere" is more descriptive of an example link, rather than a
button that triggers in-page functionality. Also makes it consistent
with all other examples in this page
In SCSS, the quotes were included verbatim in the resulting CSS, which isn't valid syntax for the `font` property.
Removing the quotes fixes the syntax error and does not cause any SCSS compiler error.
[skip sauce]
[skip validator]
It's unclear why the example currently has the content that's
shown/hidden BEFORE the toggle. Generally, this is not a recommended
content order, as after toggling, the newly shown content precedes the
toggle and requires keyboard users, and particularly assistive
technology users, to then navigate in reverse to reach it.
Use new `.breadcrumb-item` class instead of child selectors and `li` tag selectors,
so as to no longer require the usage of `<ol>`-based markup.
Rename variables to follow naming conventions:
* $breadcrumb-padding-vertical => $breadcrumb-padding-y
* $breadcrumb-padding-horizontal => $breadcrumb-padding-x
Introduce new variable: $breadcrumb-item-padding
[skip sauce]
If these are supported, why bother mentioning them in a section that's about communicating what's not supported?
These rows made sense when the section also covered IE8 (http://getbootstrap.com/getting-started/#support-ie8-ie9 ),
which doesn't support these features, but we no longer care about IE8 in v4.
[skip sauce]
1. Invert `:first-child` into `:not(:last-child)` and vice versa
2. Remove double border at the left of `.form-control`
3. Shifts negative margins of `.btn` and `.btn-group` to retain
rightmost border when using at the left of `.form-control`.
/fyi @mdo There might be prettier/better ways of explaining these,
but for the sake of having accurate docs for tomorrow,
this should do in a pinch.
[skip sauce]
Both widgets need to use the same border width because of input groups.
Thus:
$btn-border-width => $input-btn-border-width
$input-border-width => $input-btn-border-width
[skip sauce]
* `.font-normal` is too generic. Rename it to `.font-weight-normal` for clarity.
* Rename `.font-bold` to `.font-weight-bold` so as to parallel `.font-weight-normal`.
* In docs, gloss "weight" term in relation to fonts for the benefit of non-typographiles.
Refs #18433
[skip sauce]
* only loop through `html_pages`
* skip pages without a title
* stop double escaping the title; use Jekyll's `jsonify` filter to output valid JSON
* remove `date` since we don't use it
[skip sauce]
The latest OS X Safari version is 9.0.1
Our prefixing policy dictates that we prefix 1 version back from the latest version.
9.0.1 - 1_major_version = 8.0
[skip validator]
Previously, this read "Bootstrap doesn’t apply this automatically as it causes complications to other image formats."
In this sentence, the number of the subject and the verb don't agree, and the word "this" is unclear.
The latest iOS version is 9.1
Our prefixing policy dictates that we prefix 1 version back from the latest version.
9.1 - 1_major_version = 8.0
[skip validator]
I'm aware that currently cards are a lot simpler than buttons right now
but this may change in future and it feels cleaner to be able to create
new card styles without needing to know the internals of how they're
implemented.
These can be replaced by their `.text-xs-*` parallels.
This also avoids any complications from interactions between the responsive and non-responsive classes.
(e.g. `<div class="text-left text-md-right">`)
Refs #18300
[skip sauce]
We can't include it in docs.min.js because docs.min.js includes application.js,
application.js depends on bootstrap.js,
and the tooltip portion of bootstrap.js depends on Tether.
So instead, we need to load Tether separately before bootstrap.js
[skip sauce]
Change d6b6a20a0d missed two doc mentions
of the previous names when changing to new:
.navbar-default --> .navbar-light
.navbar-inverse --> .navbar-dark
This change uses Bootstrap's existing `scss/.scss-lint.yml` file
to configure Hound's hosted SCSS-Lint instance.
On each pull request to Bootstrap,
Hound will comment on any SCSS style violations in-line, like this:
If you update the pull request to adopt a suggestion,
the comment will be hidden.
It leaves the existing linting done by Grunt + Travis.
Hound is free for open source projects
and is open source itself:
https://github.com/thoughtbot/hound
Changes grid and container sizes to `px`, as the
viewport pixel size does not depend on the font size.
The actual em values were inconsistent with the docs,
while the docs were not the same as the comments:
* `sm` breakpoint was 34em (544px) not 480px.
* `lg` container max-width was 60rem (960px), less gutter than `md`.
Changed to 940px, same as Bootstrap 3.
* `xl` container max-width was 72.25rem which is 1140px not 1156px.
Changed to 1140px matching the comment but not the docs.
Addresses #17070 and #17388.
This adjusts the load path for the ``configBridge.json`` file from one
that's relative to the user running the command (eg ``jekyll serve``),
to one that's relative to the ``source`` configuration setting for
Jekyll.
The result is that the user can now have a (customised) ``_config.yml``
for Jekyll anywhere on her filesystem and point to Bootstrap's
``docs`` directory to use as the ``source``. Previously, in order to
customise it, the original ``_config.yml`` needed to be modified inside
(a forked) Bootstrap, and the ``jekyll`` command could only be run at
the root of the Bootstrap package as the original file path to
``configBridge.json`` was only valid there.
The existing behaviour is not affected.
In Bootstrap 3, the menu collapsed on the -sm- breakpoint, I believe the equivalent of this breakpoint in Bootstrap 4 is actually the -md- breakpoint. The navbar currently has no option to collapse at the -md- breakpoint and I'd like to add this.
When a DOM node is passed to an HTML tooltip, the `title` node is only
moved if it is not already in the tooltip. Otherwise, `empty()` is used
instead of `detach()` before appending the `title` to avoid memory
leaks. If a DOM node is passed to a plain text tooltip, its text is
copied via jQuery `.text()`.
Replaces `.detach()` with `.empty()`, as `.detach()` is almost never
useful but instead leaks memory. The difference between `empty` and
`detach` is that the latter keeps all the attached jQuery events/data.
However, since we do not return the previous children, the user would
have to keep these themselves, thus they can `detach()` if necessary.
This is a port of https://github.com/twbs/bootstrap/pull/14552 to v4.
If we want to support namespaced import:
```scss
.twbs {
@import 'bootstrap';
}
```
We cannot use `selector &`, see sass/sass#1817.
`fieldset[disabled] &` is not needed as we no longer support IE8.
After v4.0.0 stable gets released, as existing translations get updated or completely new v4 translations get created, we can start adding entries back to the list.
- Simpler main nav on all pages
- Back to purple masthead on homepage instead of dark graphite
- Active link styles on the main nav
- Cleaned up sidebar nav
- New docs layout name
- Homepage copy edits
- Updated bright purple docs color
- Simplifies variables usage
- Makes components and brand variable usage more consistent (dark bg and white text throughout instead of some mixed light and dark bgs)
- Very likely means lower contrast and thus no more AA compliance (we'll want to fix that eventually obviously)
- new vars for .lead size and weight (previously had none)
- new var for default margin-bottom on h1-h6 elements (previously had none)
- rearranged vars to combine two typography sections into one in variables.scss
- reassigned border-width var to hr-border-width
- made hr-border more specific as hr-border-color
- no real need for everything to be 100% shared
- padding looked and felt too large for inputs but not for buttons
- tying forms and buttons seems fine, but throwing in pagination feels wrong
- Fixes#13267 somewhat.
- Instead of a single, block-level class, let's use a combination of existing elements and classes.
- For block-level help text, use p.text-muted.
- For inline-level help text, use span.text-muted or small.text-muted.
To the middle of nowhere
To the middle of my frustrated fears
And I swear you're just like a pill
Instead of makin' me better,
You keep makin' me ill
You keep makin' me ill
adds .label-pill to replace .badge
Because we use `position: absolute` on our inputs, when there’s no
label the `.checkbox` ends up having no computed height. To avoid
rendering errors when there’s no label text, we reset the `position` to
`static` for normal rendering.
We have it set to `1` right now just to avoid compilation errors, but
it’s been replaced everywhere with our new spacer classes anywho. We’ll
likely want to remap that var to custom component vars though (e.g.,
`$pagination-margin` instead of `$spacer-y`).
- Replaces manual use of .bd-callout with {% callout [type] %}
- Rearranged some callouts for proximity to others
- Turned long lists of callouts--like those on tooltips, plugings, etc--into a list because holy shit that's overwhelming
* Relative URLs were output as-is, which is suboptimal or even confusing for end-users
* Ditto for fragment identifiers
* Outputting long URLs inline with prose isn't good UX
JavaScript could potentially help with this (e.g. http://alistapart.com/article/improvingprint).
However, we're not currently interested in trying to tackle the hard problem of fancy print stylesheets/views
(particularly given the level of cross-browser inconsistency when it comes to printing).
So let's just keep things simple, vanilla, and unsurprising,
which should also make it easy for others to add their own print fanciness on top of Bootstrap.
Forcing black-and-white text & backgrounds is too harsh. Printing speed isn't everything.
Users or authors can easily enable grayscale themselves if need be.
This reverts commit d29f851e82.
Making <img>s responsive by-default without opt-in can severely break
third-party widgets such as Google Maps.
This was an acknowledged problem in Bootstrap v2
(see https://github.com/twbs/bootstrap/issues/1506 ) and was fixed in v3
by requiring the .img-responsive class for explicit opt-in
(see 09cdee2f03).
The situation hasn't really changed since then. The responsive-by-default
approach hasn't become any more suitable in the intervening time.
So let's avoid having this regress in v4. :-)
* Separate configs for libsass and sass.
* Sass compiler selected based on `process.env.TWBS_SASS`.
* Travis:
* Use Gemfile to manage ruby dependencies.
* Run core tests with both Sass compilers.
* Only install/cache ruby gems required by the test subset.
* Grunt: `update-gemfile-lock` task a la `update-shrinkwrap`.
A more idiomatic refactoring of the grid framework
* Use %-placeholder instead of generating a class name list
* Use if expression
* Remove loop-grid-columns
- Drops all the `.make-**-column` mixins for a single set to be used
within (or outside) media queries.
- Renames `.container-fixed` to `.make-container` for consistency.
- Updates built-in grid system to use new setup.
See http://jsbin.com/qiqet/2/ for an example of it in action.
Bootstrap uses [GitHub's Releases feature](https://blog.github.com/2013-07-02-release-your-software/) for its changelogs.
Bootstrap uses [GitHub's Releases feature](https://github.com/blog/1547-release-your-software) for its changelogs.
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap.
Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.
Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
[Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](README.md#community) are better places to get help.
* Please **do not** use the issue tracker for personal support requests. Stack
Overflow ([`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4) tag), [Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](README.md#community) are better places to get help.
* Please **do not** derail or troll issues. Keep the discussion on topic and
respect the opinions of others.
* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
Use [GitHub's "reactions" feature](https://blog.github.com/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/)
Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)
instead. We reserve the right to delete comments which violate this rule.
* Please **do not** open issues or pull requests regarding the code in
[`Normalize`](https://github.com/necolas/normalize.css) (open them in
their respective repositories).
its repository).
* Please **do not** open issues regarding the official themes offered on <https://themes.getbootstrap.com/>.
Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
@@ -43,8 +42,7 @@ Our bug tracker utilizes several labels to help organize and identify issues. He
-`browser bug` - Issues that are reported to us, but actually are the result of a browser-specific bug. These are diagnosed with reduced test cases and result in an issue opened on that browser's own bug tracker.
-`confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap.
-`css` - Issues stemming from our compiled CSS or source Less/Sass files.
-`customizer` - Issues with our web-based Customizer.
-`css` - Issues stemming from our compiled CSS or source Sass files.
-`docs` - Issues for improving or updating our documentation.
-`examples` - Issues involving the example templates included in our docs.
-`feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
@@ -63,7 +61,7 @@ Good bug reports are extremely helpful, so thanks!
Guidelines for bug reports:
0.**Validate and lint your code** — [validate your HTML](https://html5.validator.nu/)
0.**Validate and lint your code** — [validate your HTML](https://html5.validator.nu)
and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
problem isn't caused by a simple error in your own code.
@@ -71,11 +69,11 @@ Guidelines for bug reports:
reported.
2.**Check if the issue has been fixed** — try to reproduce it using the
latest `v3-dev` or development branch in the repository.
latest `master` or development branch in the repository.
3.**Isolate the problem** — ideally create a [reduced test
case](https://css-tricks.com/reduced-test-cases/) and a live example.
[This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
[This JS Bin](https://jsbin.com/lolome/edit?html,output) is a helpful template.
A good bug report shouldn't leave others needing to chase you up for more
@@ -106,7 +104,7 @@ Example:
### Reporting upstream browser bugs
Sometimes bugs reported to us are actually caused by bugs in the browser(s) themselves, not bugs in Bootstrap per se.
When feasible, we aim to report such upstream bugs to the relevant browser vendor(s), and then list them on our [Wall of Browser Bugs](https://getbootstrap.com/docs/3.4/browser-bugs/) and [document them in MDN](https://developer.mozilla.org/en-US/docs/Web).
When feasible, we aim to report such upstream bugs to the relevant browser vendor(s), and then list them on our [Wall of Browser Bugs](https://getbootstrap.com/browser-bugs/) and [document them in MDN](https://developer.mozilla.org/en-US/docs/Web).
@@ -115,15 +113,14 @@ When feasible, we aim to report such upstream bugs to the relevant browser vendo
| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://code.google.com/p/chromium/issues/list | Click the "New issue" button. |
| Microsoft | Edge | EdgeHTML | https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/ | |
### Issues bots
[@twbs-lmvtfy](https://github.com/twbs-lmvtfy) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks for HTML validation errors in live examples (e.g. jsFiddles, JS Bins, Bootplys, Plunks, CodePens, etc.) posted in issue comments. If it finds any errors, it will post a follow-up comment on the issue and point out the errors. If this happens with an example you've posted, please fix the errors and post an updated live example. If you opened a bug report, please check whether the bug still occurs with your revised, valid live example. If the bug no longer occurs, it was probably due to your invalid HTML rather than something in Bootstrap and we'd appreciate it if you could close out the GitHub issue.
## Feature requests
Feature requests are welcome, but please note that they **must target
[Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev),** because
Bootstrap v3 is now in maintenance mode and is closed off to new features.
This is so that we can focus our efforts on Bootstrap v4, the future of the
framework.
Before opening a feature request, please take a moment to find out whether your idea
Feature requests are welcome. But take a moment to find out whether your idea
fits with the scope and aims of the project. It's up to *you* to make a strong
case to convince the project's developers of the merits of this feature. Please
provide as much detail and context as possible.
@@ -140,26 +137,18 @@ implementing features, refactoring code, porting to a different language),
otherwise you risk spending a lot of time working on something that the
project's developers might not want to merge into the project.
In particular, **pull requests that add new features to Bootstrap v3 will be
rejected.** Bootstrap v3 is now in maintenance mode and is therefore closed
off to new features, so that we can focus our efforts on Bootstrap v4, the
future of the framework. Pull requests that add new features should target
[Bootstrap v4 (the `v4-dev` git branch)](https://github.com/twbs/bootstrap/tree/v4-dev)
instead, where they will be welcomed and duly considered.
Please adhere to the [coding guidelines](#code-guidelines) used throughout the
project (indentation, accurate comments, etc.) and any other requirements
(such as test coverage).
**Do not edit `bootstrap.css`,`bootstrap-theme.css`, or `bootstrap.js`
**Do not edit `bootstrap.css`, or `bootstrap.js`
directly!** Those files are automatically generated. You should edit the
source files in [`/bootstrap/less/`](https://github.com/twbs/bootstrap/tree/v3-dev/less),
[@twbs-rorschach](https://github.com/twbs-rorschach) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks all pull requests for a few simple common mistakes. It's possible that Rorschach might leave a comment on your pull request and then close it. If that happens, simply fix the problem(s) mentioned in the comment (there should be link(s) in the comment explaining the problem(s) in detail) and then either:
* Push the revised version to your pull request's branch and post a comment on the pull request saying that you've fixed the problem(s). One of the Bootstrap Core Team members will then come along and reopen your pull request.
* Or you can just open a new pull request for your revised version.
[@twbs-savage](https://github.com/twbs-savage) is a Bootstrap bot that automatically runs cross-browser tests (via [Sauce](https://saucelabs.com) and Travis CI) on JavaScript pull requests. Savage will leave a comment on pull requests stating whether cross-browser JS tests passed or failed, with a link to the full Travis build details. If your pull request fails, check the Travis log to see which browser + OS combinations failed. Each browser test in the Travis log includes a link to a Sauce page with details about the test. On those details pages, you can watch a screencast of the test run to see exactly which unit tests failed.
## Code guidelines
### HTML
@@ -234,7 +233,7 @@ includes code changes) and under the terms of the
[Adhere to the Code Guide.](http://codeguide.co/#css)
- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast).
- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://a11yproject.com/posts/never-remove-css-outlines/) for more details.
- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines/) for more details.
@@ -289,11 +155,6 @@ module.exports = function (grunt) {
incremental:false
},
docs:{},
netlify:{
options:{
raw:'github: true\nbaseurl: ""\nnetlify: true'
}
},
github:{
options:{
raw:'github: true'
@@ -301,135 +162,194 @@ module.exports = function (grunt) {
}
},
pug:{
options:{
pretty:true,
data:getLessVarsData
},
customizerVars:{
src:'docs/_pug/customizer-variables.pug',
dest:'docs/_includes/customizer-variables.html'
},
customizerNav:{
src:'docs/_pug/customizer-nav.pug',
dest:'docs/_includes/nav/customize.html'
}
},
htmllint:{
options:{
ignore:[
'Element "img" is missing required attribute "src".'
],
noLangDetect:true
'Attribute “autocomplete” is only allowed when the input type is “color”, “date”, “datetime”, “datetime-local”, “email”, “hidden”, “month”, “number”, “password”, “range”, “search”, “tel”, “text”, “time”, “url”, or “week”.',
'Attribute “autocomplete” not allowed on element “button” at this point.',
'Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).',
'Element “div” not allowed as child of element “progress” in this context. (Suppressing further errors from this subtree.)',
'Element “img” is missing required attribute “src”.',
'The “color” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
'The “date” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
'The “datetime” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
'The “datetime-local” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
'The “month” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
'The “time” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
'The “week” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.'
[](https://saucelabs.com/u/bootstrap)
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/orgs/twbs/people) with the massive support and involvement of the community.
To get started, check out <https://getbootstrap.com/>!
To get started, check out <https://getbootstrap.com>!
## Table of contents
* [Quick start](#quick-start)
* [Bugs and feature requests](#bugs-and-feature-requests)
* [Documentation](#documentation)
* [Contributing](#contributing)
* [Community](#community)
* [Versioning](#versioning)
* [Creators](#creators)
* [Thanks](#thanks)
* [Copyright and license](#copyright-and-license)
- [Quick start](#quick-start)
- [Bugs and feature requests](#bugs-and-feature-requests)
- [Documentation](#documentation)
- [Contributing](#contributing)
- [Community](#community)
- [Versioning](#versioning)
- [Creators](#creators)
- [Copyright and license](#copyright-and-license)
## Quick start
Several quick start options are available:
* [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.4.1.zip).
* Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
* Install with [Bower](https://bower.io/): `bower install bootstrap`.
* Install with [npm](https://www.npmjs.com/): `npm install bootstrap@3`.
* Install with [Meteor](https://www.meteor.com/): `meteor add twbs:bootstrap`.
* Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap`.
- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.6.zip)
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-alpha.6`
- Install with [yarn](https://github.com/yarnpkg/yarn): `yarn add bootstrap@4.0.0-alpha.6`
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap:4.0.0-alpha.6`
- Install with [Bower](https://bower.io): `bower install bootstrap#v4.0.0-alpha.6`
- Install with [NuGet](https://www.nuget.org): CSS: `Install-Package bootstrap -Pre` Sass: `Install-Package bootstrap.sass -Pre` (`-Pre` is only required until Bootstrap v4 has a stable release).
Read the [Getting started page](https://getbootstrap.com/docs/3.4/getting-started/) for information on the framework contents, templates and examples, and more.
Read the [Getting started page](https://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
### What's included
@@ -48,44 +51,32 @@ bootstrap/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.js
└── bootstrap.min.js
```
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
## Bugs and feature requests
Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/v3-dev/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
Note that **feature requests must target [Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev),** because Bootstrap v3 is now in maintenance mode and is closed off to new features. This is so that we can focus our efforts on Bootstrap v4.
Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
## Documentation
Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages at <https://getbootstrap.com/>. The docs may also be run locally.
Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com) and publicly hosted on GitHub Pages at <https://getbootstrap.com>. The docs may also be run locally.
### Running documentation locally
1.If necessary, [install Jekyll](https://jekyllrb.com/docs/installation/) and other Ruby dependencies with `bundle install`.
**Note for Windows users:** Read [this guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
4. Open `http://localhost:9001` in your browser, and voilà.
1.Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
2. Run `grunt` (or a specific set of Grunt tasks) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
3. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
4. Open <http://localhost:9001> in your browser, and voilà.
Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/).
Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).
### Documentation for previous releases
@@ -94,56 +85,51 @@ Documentation for v2.3.2 has been made available for the time being at <https://
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
## Contributing
Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/v3-dev/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
Moreover, if your pull request contains JavaScript patches or features, you must include [relevant unit tests](https://github.com/twbs/bootstrap/tree/v3-dev/js/tests). All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).
Moreover, if your pull request contains JavaScript patches or features, you must include [relevant unit tests](https://github.com/twbs/bootstrap/tree/master/js/tests). All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).
**Bootstrap v3 is now closed off to new features.** It has gone into maintenance mode so that we can focus our efforts on [Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev), the future of the framework. Pull requests which add new features (rather than fix bugs) should target [Bootstrap v4 (the `v4-dev` git branch)](https://github.com/twbs/bootstrap/tree/v4-dev) instead.
Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/v3-dev/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
## Community
Get updates on Bootstrap's development and chat with the project maintainers and community members.
* Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
* Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).
* Join [the official Slack room](https://bootstrap-slack.herokuapp.com/).
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
* Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
* Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.
- Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
- Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com).
- Join [the official Slack room](https://bootstrap-slack.herokuapp.com).
- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)).
- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
## Versioning
For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](https://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.
Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
## Creators
**Mark Otto**
* <https://twitter.com/mdo>
* <https://github.com/mdo>
- <https://twitter.com/mdo>
- <https://github.com/mdo>
**Jacob Thornton**
* <https://twitter.com/fat>
* <https://github.com/fat>
- <https://twitter.com/fat>
- <https://github.com/fat>
## Copyright and license
Code and documentation copyright 2011-2019 Twitter, Inc. Code released under [the MIT license](https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/v3-dev/docs/LICENSE).
Code and documentation copyright 2011-2017 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/docs/LICENSE).
Using color to add meaning 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 (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
<pclass="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<h2id="alerts-examples">Examples</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
<pclass="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <ahref="{{ site.baseurl }}/javascript/#buttons">our buttons plugin</a>.</p>
<h4>Tooltips & popovers in button groups require special setting</h4>
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
<h4>Ensure correct <code>role</code> and provide a label</h4>
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
<p>One exception are groups which only contain a single control (for instance the <ahref="#btn-groups-justified">justified button groups</a> with <code><button></code> elements) or a dropdown.</p>
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
</div>
<h2id="btn-groups-single">Basic example</h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including when nesting multiple groups.</p>
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strongclass="text-danger">Split button dropdowns are not supported here.</strong></p>
<p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
<p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
<p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code><a></code> or <code><button></code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
<p>See <ahref="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
</div>
<h4>With <code><a></code> elements</h4>
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
<p>If the <code><a></code> 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 <code>role="button"</code>.</p>
<p>To use justified button groups with <code><button></code> elements, <strongclass="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can work around that.</p>
<pclass="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <ahref="{{ site.baseurl }}/javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
<h2id="dropdowns-example">Example</h2>
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
<p>As of v3.1.0, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
<p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <ahref="https://www.glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <ahref="https://www.glyphicons.com/">Glyphicons</a> whenever possible.</p>
<p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
<p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p>
<p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
<ul>
<li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li>
<li>Utilize the <ahref="http://lesscss.org/usage/#less-options-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
<li>Change the <code>url()</code> paths in the compiled CSS.</li>
</ul>
<p>Use whatever option best suits your specific development setup.</p>
<p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p>
<p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p>
<p>If you're creating controls with no other text (such as a <code><button></code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p>
<spanclass="glyphicon glyphicon-star"aria-hidden="true"></span> Star
</button>
{% endhighlight %}
<p>An icon used in an <ahref="#alerts">alert</a> to convey that it's an error message, with additional <code>.sr-only</code> text to convey this hint to users of assistive technologies.</p>
<pclass="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code><input></code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> or <code>.input-group-btn</code> to prepend or append elements to a single <code>.form-control</code>.</p>
<h4>Tooltips & popovers in input groups require special setting</h4>
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
<p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.</p>
<p>The exact technique to be used (visible <code><label></code> elements, <code><label></code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.</p>
</div>
<h2id="input-groups-basic">Basic example</h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
<p><strongclass="text-danger">We do not support multiple add-ons (<code>.input-group-addon</code> or <code>.input-group-btn</code>) on a single side.</strong></p>
<p><strongclass="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<p>To make the jumbotron full width, and without rounded corners, place it outside all <code>.container</code>s and instead add a <code>.container</code> within.</p>
<p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <ahref="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
<pclass="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
<h2id="list-group-basic">Basic example</h2>
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code><div></code> instead of an <code><ul></code>). No need for individual parents around each element.</p>
<ahref="#"class="list-group-item">Dapibus ac facilisis in</a>
<ahref="#"class="list-group-item">Morbi leo risus</a>
<ahref="#"class="list-group-item">Porta ac consectetur ac</a>
<ahref="#"class="list-group-item">Vestibulum at eros</a>
</div>
</div>
{% highlight html %}
<divclass="list-group">
<ahref="#"class="list-group-item active">
Cras justo odio
</a>
<ahref="#"class="list-group-item">Dapibus ac facilisis in</a>
<ahref="#"class="list-group-item">Morbi leo risus</a>
<ahref="#"class="list-group-item">Porta ac consectetur ac</a>
<ahref="#"class="list-group-item">Vestibulum at eros</a>
</div>
{% endhighlight %}
<h2id="list-group-buttons">Button items</h2>
<p>List group items may be buttons instead of list items (that also means a parent <code><div></code> instead of an <code><ul></code>). No need for individual parents around each element. <strongclass="text-danger">Don't use the standard <code>.btn</code> classes here.</strong></p>
<pclass="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
<h2id="media-default">Default media</h2>
<p>The default media displays a media object (images, video, audio) to the left or right of a content block.</p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<h4class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
<divclass="media">
<divclass="media-body">
<h4class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<p>The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.</p>
<h2id="media-alignment">Media alignment</h2>
<p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
<h4class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<h4class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<h4class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
<p><strongclass="text-danger">Justified navbar nav links are currently not supported.</strong></p>
<p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
<oltype="a">
<li>Reduce the amount or width of navbar items.</li>
<li>Hide certain navbar items at certain screen sizes using <ahref="{{ site.baseurl }}/css/#responsive-utilities">responsive utility classes</a>.</li>
<li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
<p>The responsive navbar requires the <ahref="{{ site.baseurl }}/javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
<h4>Changing the collapsed mobile navbar breakpoint</h4>
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
<p>Be sure to use a <code><nav></code> element or, if using a more generic element such as a <code><div></code>, add a <code>role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</p>
<p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strongclass="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
<p>There are some caveats regarding using form controls within fixed elements on mobile devices. <ahref="{{ site.baseurl }}/getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
</div>
<h2id="navbar-buttons">Buttons</h2>
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
<p>Like the standard <ahref="{{ site.baseurl }}/css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p>
</div>
<h2id="navbar-text">Text</h2>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p>
<p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
<p>Navbars currently have a limitation with multiple <code>.navbar-right</code> classes. To properly space content, we use negative margin on the last <code>.navbar-right</code> element. When there are multiple elements using that class, these margins don't work as intended.</p>
<p>We'll revisit this when we can rewrite that component in v4.</p>
</div>
<h2id="navbar-fixed-top">Fixed to top</h2>
<p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight scss %}
body { padding-top: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
<h2id="navbar-fixed-bottom">Fixed to bottom</h2>
<p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight scss %}
body { padding-bottom: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div>
<h2id="navbar-static-top">Static top</h2>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
<p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<pclass="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
<h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <ahref="{{ site.baseurl }}/javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <ahref="{{ site.baseurl }}/javascript/#tabs-usage">example markup</a> for further details.</p>
<p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code><ul></code>, or wrap a <code><nav></code> element around the whole navigation. Do not add the role to the <code><ul></code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
</div>
<h2id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
<p><strongclass="text-danger">Justified navbar nav links are currently not supported.</strong></p>
<p>As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <ahref="{{ site.baseurl }}/examples/justified-nav/">justified nav example</a>.</p>
<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>
<pclass="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <ahref="#pagination-pager">pager alternative</a>.</p>
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
<p>The pagination component should be wrapped in a <code><nav></code> element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive <code>aria-label</code> for the <code><nav></code> which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label="Search results pages"</code>.</p>
</div>
<h3>Disabled and active states</h3>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<p>We recommend that you swap out active or disabled anchors for <code><span></code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code><h1></code>-<code><h6></code> with a <code>.panel-title</code> class to add a pre-styled heading. However, the font sizes of <code><h1></code>-<code><h6></code> are overridden by <code>.panel-heading</code>.</p>
<p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
<divclass="panel-heading">Panel heading without title</div>
<divclass="panel-body">
Panel content
</div>
</div>
<divclass="panel panel-default">
<divclass="panel-heading">
<h3class="panel-title">Panel title</h3>
</div>
<divclass="panel-body">
Panel content
</div>
</div>
</div>
{% highlight html %}
<divclass="panel panel-default">
<divclass="panel-heading">Panel heading without title</div>
<divclass="panel-body">
Panel content
</div>
</div>
<divclass="panel panel-default">
<divclass="panel-heading">
<h3class="panel-title">Panel title</h3>
</div>
<divclass="panel-body">
Panel content
</div>
</div>
{% endhighlight %}
<h2id="panels-footer">Panel with footer</h2>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
<p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- Table -->
<tableclass="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<thscope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<thscope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<thscope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
{% highlight html %}
<divclass="panel panel-default">
<!-- Default panel contents -->
<divclass="panel-heading">Panel heading</div>
<divclass="panel-body">
<p>...</p>
</div>
<!-- Table -->
<tableclass="table">
...
</table>
</div>
{% endhighlight %}
<p>If there is no panel body, the component moves from panel header to table without interruption.</p>
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- List group -->
<ulclass="list-group">
<liclass="list-group-item">Cras justo odio</li>
<liclass="list-group-item">Dapibus ac facilisis in</li>
<liclass="list-group-item">Morbi leo risus</li>
<liclass="list-group-item">Porta ac consectetur ac</li>
<liclass="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
{% highlight html %}
<divclass="panel panel-default">
<!-- Default panel contents -->
<divclass="panel-heading">Panel heading</div>
<divclass="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ulclass="list-group">
<liclass="list-group-item">Cras justo odio</li>
<liclass="list-group-item">Dapibus ac facilisis in</li>
<liclass="list-group-item">Morbi leo risus</li>
<liclass="list-group-item">Porta ac consectetur ac</li>
<liclass="list-group-item">Vestibulum at eros</li>
<p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
<p>If your website has a <ahref="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a> which doesn't allow <code>style-src 'unsafe-inline'</code>, then you won't be able to use inline <code>style</code> attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets <code>element.style.width</code>) or using custom CSS classes.</p>
<p>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.</p>
<p>Rules are directly applied to <code><iframe></code>, <code><embed></code>, <code><video></code>, and <code><object></code> elements; optionally use an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
<p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code><iframe></code>s as we override that for you.</p>
<pclass="lead">Extend Bootstrap's <ahref="{{ site.baseurl }}/css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
<p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <ahref="https://masonry.desandro.com/">Masonry</a>, <ahref="https://isotope.metafizzy.co/">Isotope</a>, or <ahref="https://salvattore.js.org/">Salvattore</a>.</p>
<h2id="thumbnails-default">Default example</h2>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p>
<p>If the <code><a></code> 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 <code>role="button"</code>.</p>
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
<p>Among other things, there's <ahref="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox <30</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
</div>
<h2id="buttons-options">Options</h2>
<p>Use any of the available button classes to quickly create a styled button.</p>
<h4>Conveying meaning to assistive technologies</h4>
<p>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 <code>.sr-only</code> class.</p>
</div>
<h2id="buttons-sizes">Sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the active state programmatically.</p>
<h3>Button element</h3>
<p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
<p>If you add the <code>disabled</code> attribute to a <code><button></code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
</div>
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p>
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>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 <code>pointer-events: none</code>, 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.</p>
<pclass="lead">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 <ahref="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <ahref="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h2id="grid-intro">Introduction</h2>
<p>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:</p>
<ul>
<li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding.</li>
<li>Use rows to create horizontal groups of columns.</li>
<li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.</li>
<li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
<li>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.</li>
<li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
<li>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.</li>
<li>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 <code>.col-md-*</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-*</code> class is not present.</li>
</ul>
<p>Look to the examples for applying these principles to your code.</p>
<h2id="grid-media-queries">Media queries</h2>
<p>We use the following media queries in our Less files to create the key breakpoints in our grid system.</p>
{% highlight scss %}
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
{% endhighlight %}
<p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
{% highlight scss %}
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
{% endhighlight %}
<h2id="grid-options">Grid options</h2>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts 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 <code>.row</code>.</p>
<p>Turn any fixed-width grid layout into a full-width layout by changing your outermost <code>.container</code> to <code>.container-fluid</code>.</p>
{% highlight html %}
<divclass="container-fluid">
<divclass="row">
...
</div>
</div>
{% endhighlight %}
<h2id="grid-example-mixed">Example: Mobile and desktop</h2>
<p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code><code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
<p>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 <code>.clearfix</code> and our <ahref="#responsive-utilities">responsive utility classes</a>.</p>
<divclass="row show-grid">
<divclass="col-xs-6 col-sm-3">
.col-xs-6 .col-sm-3
<br>
Resize your viewport or check it out on your phone for an example.
<p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <ahref="{{ site.baseurl }}/examples/grid/">the grid example</a>.</p>
<p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> 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).</p>
<divclass="row show-grid">
<divclass="col-sm-9">
Level 1: .col-sm-9
<divclass="row show-grid">
<divclass="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<divclass="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
{% highlight html %}
<divclass="row">
<divclass="col-sm-9">
Level 1: .col-sm-9
<divclass="row">
<divclass="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<divclass="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
{% endhighlight %}
<h2id="grid-column-ordering">Column ordering</h2>
<p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
<p>In addition to <ahref="#grid-example-basic">prebuilt grid classes</a> for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.</p>
<h3>Variables</h3>
<p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
{% highlight scss %}
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
{% endhighlight %}
<h3>Mixins</h3>
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
{% highlight scss %}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
<p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
<p>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.</p>
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
<h4>Conveying meaning to assistive technologies</h4>
<p>Using color to add meaning 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 contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
<p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code><div></code> with the class.</p>
<h4>Conveying meaning to assistive technologies</h4>
<p>As with <ahref="#helper-classes-colors">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
</div>
<h3id="helper-classes-close">Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <ahref="{{ site.baseurl }}/components/#btn-dropdowns-dropup">dropup menus</a>.</p>
<divclass="bs-example"data-example-id="caret">
<spanclass="caret"></span>
</div>
{% highlight html %}
<spanclass="caret"></span>
{% endhighlight %}
<h3id="helper-classes-floats">Quick floats</h3>
<p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p>
<p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <ahref="{{ site.baseurl }}/components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
<p>Set an element to <code>display: block</code> and center via <code>margin</code>. Available as a mixin and class.</p>
{% highlight html %}
<divclass="center-block">...</div>
{% endhighlight %}
{% highlight scss %}
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
{% endhighlight %}
<h3id="helper-classes-clearfix">Clearfix</h3>
<p>Easily clear <code>float</code>s by adding <code>.clearfix</code><strong>to the parent element</strong>. Utilizes <ahref="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
{% highlight html %}
<!-- Usage as a class -->
<divclass="clearfix">...</div>
{% endhighlight %}
{% highlight scss %}
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}
{% endhighlight %}
<h3id="helper-classes-show-hide">Showing and hiding content</h3>
<p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <ahref="#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
<p><code>.hide</code> is available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p>
<p>Furthermore, <code>.invisible</code> can be used to toggle only the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document.</p>
{% highlight html %}
<divclass="show">...</div>
<divclass="hidden">...</div>
{% endhighlight %}
{% highlight scss %}
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
{% endhighlight %}
<h3id="helper-classes-screen-readers">Screen reader and keyboard navigation content</h3>
<p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <ahref="{{ site.baseurl }}/getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
{% highlight html %}
<aclass="sr-only sr-only-focusable"href="#content">Skip to main content</a>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code>, <code>height: auto;</code> and <code>display: block;</code> to the image so that it scales nicely to the parent element.</p>
<p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <ahref="{{ site.baseurl }}/css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
<p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
<imgdata-src="holder.js/140x140"class="img-rounded"alt="A generic square placeholder image with rounded corners">
<imgdata-src="holder.js/140x140"class="img-circle"alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
<imgdata-src="holder.js/140x140"class="img-thumbnail"alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
<pclass="lead">Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
<p>Grid variables and mixins are covered <ahref="#grid-less">within the Grid system section</a>.</p>
<h2id="less-bootstrap">Compiling Bootstrap</h2>
<p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <ahref="{{ site.baseurl }}/getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
<p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
<h2id="less-variables">Variables</h2>
<p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <ahref="{{ site.baseurl }}/customize/#less-variables-section">the Customizer</a>.</p>
<h3id="less-variables-colors">Colors</h3>
<p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
<divclass="bs-example">
<divclass="color-swatches">
<divclass="color-swatch gray-darker"></div>
<divclass="color-swatch gray-dark"></div>
<divclass="color-swatch gray"></div>
<divclass="color-swatch gray-light"></div>
<divclass="color-swatch gray-lighter"></div>
</div>
</div>
{% highlight scss %}
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
{% endhighlight %}
<divclass="bs-example">
<divclass="color-swatches">
<divclass="color-swatch brand-primary"></div>
<divclass="color-swatch brand-success"></div>
<divclass="color-swatch brand-info"></div>
<divclass="color-swatch brand-warning"></div>
<divclass="color-swatch brand-danger"></div>
</div>
</div>
{% highlight scss %}
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
{% endhighlight %}
<p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
<p>A handful of variables for quickly customizing key elements of your site's skeleton.</p>
{% highlight scss %}
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
{% endhighlight %}
<h3id="less-variables-links">Links</h3>
<p>Easily style your links with the right color with only one value.</p>
{% highlight scss %}
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
{% endhighlight %}
<p>Note that the <code>@link-hover-color</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
<h3id="less-variables-typography">Typography</h3>
<p>Easily set your typeface, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p>
<p>Two quick variables for customizing the location and filename of your icons.</p>
{% highlight scss %}
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
{% endhighlight %}
<h3id="less-variables-components">Components</h3>
<p>Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.</p>
{% highlight scss %}
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
{% endhighlight %}
<h2id="less-mixins-vendor">Vendor mixins</h2>
<p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.</p>
<h3id="less-mixins-box-sizing">Box-sizing</h3>
<p>Reset your components' box model with a single mixin. For context, see this <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing"rel="noopener"target="_blank">helpful article from Mozilla</a>.</p>
<p>The mixin is <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
<p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
<p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the <strong>deprecated</strong> mixin to pick up the required <code>-webkit</code> prefix.</p>
<p>The mixin is <strong>deprecated</strong> as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
<p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
<p>Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
<p>Rotate, scale, translate (move), or skew any object.</p>
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
{% highlight scss %}
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
{% endhighlight %}
<h3id="less-mixins-animations">Animations</h3>
<p>A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.</p>
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
<p>Provide context for form controls within each field.</p>
{% highlight scss %}
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
{% endhighlight %}
<h3id="less-mixins-columns">Columns</h3>
<p>Generate columns via CSS within a single element.</p>
{% highlight scss %}
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
{% endhighlight %}
<h3id="less-mixins-gradients">Gradients</h3>
<p>Easily turn any two 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.</p>
{% highlight scss %}
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
{% endhighlight %}
<p>You can also specify the angle of a standard two-color, linear gradient:</p>
{% highlight scss %}
#gradient > .directional(#333; #000; 45deg);
{% endhighlight %}
<p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
{% highlight scss %}
#gradient > .striped(#333; 45deg);
{% endhighlight %}
<p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:</p>
<p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using the <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p>
<h2id="less-mixins-utility">Utility mixins</h2>
<p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
<h3id="less-mixins-clearfix">Clearfix</h3>
<p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <ahref="http://nicolasgallagher.com/micro-clearfix-hack/"rel="noopener"target="_blank">micro clearfix</a> from <ahref="https://twitter.com/necolas"rel="noopener"target="_blank">Nicolas Gallagher</a>.</p>
<p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
<p>Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
<pclass="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h2id="overview-doctype">HTML5 doctype</h2>
<p>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.</p>
{% highlight html %}
<!doctype html>
<htmllang="en">
...
</html>
{% endhighlight %}
<h2id="overview-mobile">Mobile first</h2>
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten 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, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
<p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport 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, we don't recommend this on every site, so use caution!</p>
<h2id="overview-type-links">Typography and links</h2>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
<li>Set <code>background-color: #fff;</code> on the <code>body</code></li>
<li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
<li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
</ul>
<p>These styles can be found within <code>scaffolding.less</code>.</p>
<h2id="overview-normalize">Normalize.css</h2>
<p>For improved cross-browser rendering, we use <ahref="https://necolas.github.io/normalize.css/"rel="noopener"target="_blank">Normalize.css</a>, a project by <ahref="https://twitter.com/necolas"rel="noopener"target="_blank">Nicolas Gallagher</a> and <ahref="https://twitter.com/jon_neal"rel="noopener"target="_blank">Jonathan Neal</a>.</p>
<h2id="overview-container">Containers</h2>
<p>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 <code>padding</code> and more, neither container is nestable.</p>
<p>Use <code>.container</code> for a responsive fixed width container.</p>
{% highlight html %}
<divclass="container">
...
</div>
{% endhighlight %}
<p>Use <code>.container-fluid</code> for a full width container, spanning the entire width of your viewport.</p>
<pclass="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
<p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
<p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2.0</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code><table></code>-related elements.</p>
<p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.2.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code><table></code>-related elements.</p>
<pclass="lead">While Bootstrap is built on Less, it also has an <ahref="{{ site.sass_repo }}">official Sass port</a>. We maintain it in a separate GitHub repository and handle updates with a conversion script.</p>
<h2id="sass-contents">What's included</h2>
<p>Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.</p>
<divclass="table-responsive">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<th>Path</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<thscope="row"><code>lib/</code></th>
<td>Ruby gem code (Sass configuration, Rails and Compass integrations)</td>
</tr>
<tr>
<thscope="row"><code>tasks/</code></th>
<td>Converter scripts (turning upstream Less to Sass)</td>
</tr>
<tr>
<thscope="row"><code>test/</code></th>
<td>Compilation tests</td>
</tr>
<tr>
<thscope="row"><code>templates/</code></th>
<td>Compass package manifest</td>
</tr>
<tr>
<thscope="row"><code>vendor/assets/</code></th>
<td>Sass, JavaScript, and font files</td>
</tr>
<tr>
<thscope="row"><code>Rakefile</code></th>
<td>Internal tasks, such as rake and convert</td>
</tr>
</tbody>
</table>
</div>
<p>Visit the <ahref="{{ site.sass_repo }}">Sass port's GitHub repository</a> to see these files in action.</p>
<h2id="sass-installation">Installation</h2>
<p>For information on how to install and use Bootstrap for Sass, consult the <ahref="{{ site.sass_repo }}">GitHub repository readme</a>. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.</p>
<p>
<aclass="btn btn-lg btn-outline"href="{{ site.sass_repo }}">Bootstrap for Sass</a>
<p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
<h4>Conveying meaning to assistive technologies</h4>
<p>Using 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 <code>.sr-only</code> class.</p>
</div>
<h2id="tables-responsive">Responsive tables</h2>
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> 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.</p>
<p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
<p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
{% highlight css %}
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
{% endhighlight %}
<p>For more information, read <ahref="https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
<p>All HTML headings, <code><h1></code> through <code><h6></code>, are available. <code>.h1</code> through <code>.h6</code> 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.</p>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>
<p>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.</p>
<p>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.</p>
<p>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>
</div>
{% highlight html %}
<p>...</p>
{% endhighlight %}
<!-- Body copy .lead -->
<h3>Lead body copy</h3>
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
<pclass="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>
{% highlight html %}
<pclass="lead">...</p>
{% endhighlight %}
<!-- Using Less -->
<h3>Built with Less</h3>
<p>The typographic scale is based on two Less variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
<!-- Inline text elements -->
<h2id="type-inline-text">Inline text elements</h2>
<h3>Marked text</h3>
<p>For highlighting a run of text due to its relevance in another context, use the <code><mark></code> tag.</p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
</div>
{% highlight html %}
<ins>This line of text is meant to be treated as an addition to the document.</ins>
{% endhighlight %}
<h3>Underlined text</h3>
<p>To underline text use the <code><u></code> tag.</p>
<divclass="bs-example"data-example-id="simple-u">
<p><u>This line of text will render as underlined</u></p>
</div>
{% highlight html %}
<u>This line of text will render as underlined</u>
{% endhighlight %}
<p>Make use of HTML's default emphasis tags with lightweight styles.</p>
<h3>Small text</h3>
<p>For de-emphasizing inline or blocks of text, use the <code><small></code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code><small></code> elements.</p>
<p>You may alternatively use an inline element with <code>.small</code> in place of any <code><small></code>.</p>
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
</div>
<h2id="type-alignment">Alignment classes</h2>
<p>Easily realign text to components with text alignment classes.</p>
<p>Stylized implementation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.</p>
<p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code><br></code>.</p>
<p>For quoting blocks of content from another source within your document.</p>
<h3>Default blockquote</h3>
<p>Wrap <code><blockquote></code> around any <abbrtitle="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code><p></code>.</p>
<p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
{% highlight html %}
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
{% endhighlight %}
<h4>Horizontal description</h4>
<p>Make terms and descriptions in <code><dl></code> line up side-by-side. Starts off stacked like default <code><dl></code>s, but when the navbar expands, so do these.</p>
<p>Horizontal description lists will truncate terms that are too long to fit in the left column with <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.</p>
<p>Designed and built with all the love in the world by<ahref="https://twitter.com/mdo"rel="noopener"target="_blank">@mdo</a> and <ahref="https://twitter.com/fat"rel="noopener"target="_blank">@fat</a>. Maintained by the<ahref="https://github.com/orgs/twbs/people">core team</a> with the help of <ahref="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Code licensed <ahref="https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE"rel="license noopener"target="_blank">MIT</a>, docs <ahref="https://creativecommons.org/licenses/by/3.0/"rel="license noopener"target="_blank">CC BY 3.0</a>.</p>
<p>Designed and built with all the love in the world by <ahref="https://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="https://twitter.com/fat"target="_blank">@fat</a>. Maintained by the <ahref="https://github.com/orgs/twbs/people">core team</a> with the help of <ahref="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Currently v{{ site.current_version }}. Code licensed<arel="license"href="https://github.com/twbs/bootstrap/blob/master/LICENSE"target="_blank">MIT</a>, docs<arel="license"href="https://creativecommons.org/licenses/by/3.0/"target="_blank">CC BY 3.0</a>.</p>
<pclass="lead">Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbrtitle="Assistive Technology"class="initialism">AT</abbr>.</p>
<h2>Skip navigation</h2>
<p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link before the navigation (for a simple explanation, see this <ahref="https://a11yproject.com/posts/skip-nav-links/">A11Y Project article on skip navigation links</a>). Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
<p>Due to long-standing shortcomings/bugs in Chrome (see <ahref="https://bugs.chromium.org/p/chromium/issues/detail?id=262171"title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) and Internet Explorer (see this article on <ahref="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p>
<p>In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with <code>tabindex="-1"</code> when they are clicked with the mouse) with <code>#content:focus { outline: none; }</code>.</p>
<p>Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.</p>
</div>
{% highlight html %}
<body>
<ahref="#content"class="sr-only sr-only-focusable">Skip to main content</a>
...
<divclass="container"id="content"tabindex="-1">
<!-- The main page content -->
</div>
</body>
{% endhighlight %}
<h2>Nested headings</h2>
<p>When nesting headings (<code><h1></code> - <code><h6></code>), your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2></code> - <code><h6></code> such that screen readers can construct a table of contents for your pages.</p>
<p>Learn more at <ahref="https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <ahref="http://accessibility.psu.edu/headings/">Penn State's AccessAbility</a>.</p>
<h2>Color contrast</h2>
<p>Currently, some of the default color combinations available in Bootstrap (such as the various <ahref="{{ site.baseurl }}/css/#buttons">styled button</a> classes, some of the code highlighting colors used for <ahref="{{ site.baseurl }}/css/#code-block">basic code blocks</a>, the <code>.bg-primary</code><ahref="{{ site.baseurl }}/css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <ahref="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p>
<h2>Additional resources</h2>
<ul>
<li><ahref="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
<h1id="support"class="page-header">Browser and device support</h1>
<pclass="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
<h2id="support-browsers">Supported browsers</h2>
<p>Specifically, we support the <strong>latest versions</strong> of the following browsers and platforms.</p>
<p>Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.</p>
<h3id="mobile-devices">Mobile devices</h3>
<p>Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.</p>
<tdclass="text-danger"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span> Not supported</td>
</tr>
</tbody>
</table>
</div>
<p>On Windows, <strong>we support Internet Explorer 8-11</strong>.</p>
<p>For Firefox, in addition to the latest normal stable release, we also support the latest <ahref="https://www.mozilla.org/en-US/firefox/organizations/">Extended Support Release (ESR)</a> version of Firefox.</p>
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.</p>
<p>For a list of some of the browser bugs that Bootstrap has to grapple with, see our <ahref="{{ site.baseurl }}/browser-bugs/">Wall of browser bugs</a>.</p>
<h2id="support-ie8-ie9">Internet Explorer 8 and 9</h2>
<p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <ahref="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
<divclass="table-responsive">
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thclass="col-xs-4">Feature</th>
<thclass="col-xs-4">Internet Explorer 8</th>
<thclass="col-xs-4">Internet Explorer 9</th>
</tr>
</thead>
<tbody>
<tr>
<thscope="row"><code>border-radius</code></th>
<tdclass="text-danger"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span> Not supported</td>
<tdclass="text-danger"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span> Not supported</td>
<tdclass="text-success"><spanclass="glyphicon glyphicon-ok"aria-hidden="true"></span> Supported, with <code>-ms</code> prefix</td>
</tr>
<tr>
<thscope="row"><code>transition</code></th>
<tdcolspan="2"class="text-danger"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span> Not supported</td>
</tr>
<tr>
<thscope="row"><code>placeholder</code></th>
<tdcolspan="2"class="text-danger"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span> Not supported</td>
</tr>
</tbody>
</table>
</div>
<p>Visit <ahref="https://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
<h2id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h2>
<p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
<h3id="respond-js-x-domain">Respond.js and cross-domain CSS</h3>
<p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <ahref="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
<h3id="respond-file-proto">Respond.js and <code>file://</code></h3>
<p>Due to browser security rules, Respond.js doesn't work with pages viewed via the <code>file://</code> protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). <ahref="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
<h3id="respond-import">Respond.js and <code>@import</code></h3>
<p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <ahref="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
<h2id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h2>
<p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
<h2id="support-ie8-font-face">Internet Explorer 8 and @font-face</h2>
<p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <ahref="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code><meta></code> tag in your pages:</p>
<p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
<p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
<p>See <ahref="https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do">this StackOverflow question</a> for more information.</p>
<h2id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h2>
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
{% highlight scss %}
@-ms-viewport { width: device-width; }
{% endhighlight %}
<p>However, this doesn't work for devices running Windows Phone 8 versions older than <ahref="https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
{% highlight scss %}
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
{% endhighlight %}
{% highlight js %}
// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
<p>For more information and usage guidelines, read <ahref="https://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
<p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p>
<p>The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:</p>
<ul>
<li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
<li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
</ul>
<h2id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</h2>
<h3>Overflow and scrolling</h3>
<p>Support for <code>overflow: hidden</code> on the <code><body></code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code><body></code> content will begin to scroll. See <ahref="https://bugs.chromium.org/p/chromium/issues/detail?id=175502">Chrome bug #175502</a> (fixed in Chrome v40) and <ahref="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a>.</p>
<h3>iOS text fields and scrolling</h3>
<p>As of iOS 9.3, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual <code><input></code> or a <code><textarea></code>, the <code><body></code> content underneath the modal will be scrolled instead of the modal itself. See <ahref="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a>.</p>
<h3>Virtual keyboards</h3>
<p>Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
<h3>Navbar Dropdowns</h3>
<p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or <ahref="https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile">any other element which will fire a click event in iOS</a>).</p>
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
<h2id="support-sticky-hover-mobile">Sticky <code>:hover</code>/<code>:focus</code> on mobile</h2>
<p>Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make <code>:hover</code> "sticky". In other words, <code>:hover</code> styles start applying after tapping an element and only stop applying after the user taps some other element. This can cause Bootstrap's <code>:hover</code> states to become undesirably "stuck" on such browsers. Some mobile browsers also make <code>:focus</code> similarly sticky. There is currently no simple workaround for these issues other than removing such styles entirely.</p>
<h2id="support-printing">Printing</h2>
<p>Even in some modern browsers, printing can be quirky.</p>
<p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <ahref="https://github.com/twbs/bootstrap/issues/12078">See issue #12078</a> and <ahref="https://bugs.chromium.org/p/chromium/issues/detail?id=273306">Chrome bug #273306</a> for some details. Suggested workarounds:</p>
<ul>
<li>Embrace the extra-small grid and make sure your page looks acceptable under it.</li>
<li>Customize the values of the <code>@screen-*</code> Less variables so that your printer paper is considered larger than extra-small.</li>
<li>Add custom media queries to change the grid size breakpoints for print media only.</li>
</ul>
<p>Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <ahref="https://github.com/twbs/bootstrap/issues/14868">#14868</a> and <ahref="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a> for more details. One potential workaround for this is adding the following CSS:</p>
<p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
<h3>Select menus</h3>
<p>On <code><select></code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <ahref="https://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code><select></code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
<p>Want to see an example? <ahref="http://output.jsbin.com/kuvoz/1">Check out this JS Bin demo.</a></p>
<h2id="support-validators">Validators</h2>
<p>In order to provide the best possible experience to old and buggy browsers, Bootstrap uses <ahref="http://browserhacks.com">CSS browser hacks</a> in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.</p>
<p>These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.</p>
<p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for <ahref="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p>
<pclass="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
<ul>
<li>Read and subscribe to <ahref="https://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
<li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <ahref="irc://irc.freenode.net/%23bootstrap">##bootstrap channel</a>.</li>
<li>For help using Bootstrap, ask on <ahref="https://stackoverflow.com/questions/tagged/twitter-bootstrap-3">StackOverflow using the tag <code>twitter-bootstrap-3</code></a>.</li>
<li>Developers should use the keyword <code>bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <ahref="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
<li>Find inspiring examples of people building with Bootstrap at the <ahref="https://expo.getbootstrap.com/">Bootstrap Expo</a>.</li>
</ul>
<p>You can also follow <ahref="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
<pclass="lead">Bootstrap automatically adapts your pages for various screen sizes.
Here's how to disable this feature so your page works like <ahref="{{ site.baseurl }}/examples/non-responsive/">this non-responsive example</a>.</p>
<h2>Steps to disable page responsiveness</h2>
<ol>
<li>Omit the viewport <code><meta></code> mentioned in <ahref="{{ site.baseurl }}/css/#overview-mobile">the CSS docs</a></li>
<li>Override the <code>width</code> on the <code>.container</code> for each grid tier with a single width, for example <code>width: 970px !important;</code> Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
<li>If using navbars, remove all navbar collapsing and expanding behavior.</li>
<li>For grid layouts, use <code>.col-xs-*</code> classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.</li>
</ol>
<p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed).
This disables the "mobile site" aspects of Bootstrap.</p>
<h2>Bootstrap template with responsiveness disabled</h2>
<p>We've applied these steps to an example. Read its source code to see the specific changes implemented.</p>
<pclass="lead">Bootstrap (currently v{{ site.current_version }}) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<divclass="row bs-downloads">
<divclass="col-sm-4">
<h3id="download-bootstrap">Bootstrap</h3>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<p>The folks over at <ahref="https://www.stackpath.com/">StackPath</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <ahref="https://www.bootstrapcdn.com/">BootstrapCDN</a> links.</p>
<p><code>require('bootstrap')</code> will load all of Bootstrap's jQuery plugins onto the jQuery object. The <code>bootstrap</code> module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the <code>/js/*.js</code> files under the package's top-level directory.</p>
<p>Bootstrap's <code>package.json</code> contains some additional metadata under the following keys:</p>
<ul>
<li><code>less</code> - path to Bootstrap's main <ahref="http://lesscss.org/">Less</a> source file</li>
<li><code>style</code> - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li>
</ul>
<h2id="download-composer">Install with Composer</h2>
<p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <ahref="https://getcomposer.org/">Composer</a>:</p>
<h2id="download-autoprefixer">Autoprefixer required for Less/Sass</h2>
<p>Bootstrap uses <ahref="https://github.com/postcss/autoprefixer">Autoprefixer</a> to deal with <ahref="https://www.lifewire.com/css-vendor-prefixes-3466867">CSS vendor prefixes</a>. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.</p>
<pclass="lead">Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p>
<p>Get the source code for every example below by <ahref="{{ site.download.source }}">downloading the Bootstrap repository</a>. Examples can be found in the <code>docs/examples/</code> directory.</p>
<h2id="examples-framework">Using the framework</h2>
<h1id="grunt"class="page-header">Compiling CSS and JavaScript</h1>
<pclass="lead">Bootstrap uses <ahref="https://gruntjs.com/">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>
<h2id="grunt-installing">Installing Grunt</h2>
<p>To install Grunt, you must <strong>first <ahref="https://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <ahref="https://www.npmjs.com/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p>
Then, from the command line:
<ol>
<li>Install <code>grunt-cli</code> globally with <code>npm install -g grunt-cli</code>.</li>
<li>Navigate to the root <code>/bootstrap/</code> directory, then run <code>npm install</code>. npm will look at the <ahref="https://github.com/twbs/bootstrap/blob/v3-dev/package.json"><code>package.json</code></a> file and automatically install the necessary local dependencies listed there.</li>
</ol>
<p>When completed, you'll be able to run the various Grunt commands provided from the command line.</p>
<h3><code>grunt dist</code> (Just compile CSS and JavaScript)</h3>
<p>Regenerates the <code>/dist/</code> directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.</p>
<h3><code>grunt watch</code> (Watch)</h3>
<p>Watches the Less source files and automatically recompiles them to CSS whenever you save a change.</p>
<h3><code>grunt test</code> (Run tests)</h3>
<p>Runs <ahref="https://jshint.com/">JSHint</a> and runs the <ahref="https://qunitjs.com/">QUnit</a> tests in real browsers thanks to <ahref="https://karma-runner.github.io/2.0/index.html">Karma</a>.</p>
<h3><code>grunt docs</code> (Build & test the docs assets)</h3>
<p>Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via <code>bundle exec jekyll serve</code>.</p>
<h3><code>grunt</code> (Build absolutely everything and run tests)</h3>
<p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires <ahref="https://jekyllrb.com/docs/installation/">Jekyll</a>. Usually only necessary if you're hacking on Bootstrap itself.</p>
<p>Should you encounter problems with installing dependencies or running Grunt commands, first delete the <code>/node_modules/</code> directory generated by npm. Then, rerun <code>npm install</code>.</p>
<pclass="lead">Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<h2>It requires you to:</h2>
<ul>
<li>Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works</li>
</ul>
<h2>It permits you to:</h2>
<ul>
<li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li>
<li>Use Bootstrap in packages or distributions that you create</li>
<li>Modify the source code</li>
<li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li>
</ul>
<h2>It forbids you to:</h2>
<ul>
<li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li>
<li>Hold the creators or copyright holders of Bootstrap liable</li>
<li>Redistribute any piece of Bootstrap without proper attribution</li>
<li>Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution</li>
<li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li>
</ul>
<h2>It does not require you to:</h2>
<ul>
<li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
<li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
</ul>
<p>The full Bootstrap license is located <ahref="{{ site.repo }}/blob/v3-dev/LICENSE">in the project repository</a> for more information.</p>
</div>
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Mark Otto
Bardi Harborow
Supergibbs
Quy
Patrick H. Lauke
Pierre-Denis Vanduynslager
Sergio Pantoja
Johann-S
Phillip Marshall
Mark Otto
Jonathan
vsn4ik
Quan You
Heinrich Fenkart
Nuno Arruda
Alice Young
なつき
Max Beatty
Starsam80
Alessandro Rodi
Matheus Azzi
mr-july
Jacob Müller
Patrick Cameron
Gijs Boddeus
Geoffrey Tisserand
Tom Lutzenberger
Michal Zdrojewski
Stepan Zastupov
Christian Oliff
sophiegit
Chris Rebert
ysds
Brad Kent
Juno_okyo
Florian Schlittenbauer
Michael Cook
Stefan Staynov
Cyril Kyburz
Rodrigo Waltenberg
Rob Ruana
Stephanie Purvis
Stephen Puiszis
Ken Dale
andyexeter
Fumito Mizuno
matus
Matt Hernandez
Daniel Lo Nigro
Elliot Evans
Eric Nolte
Eddie Lau 3dd13
Rodrigo Castro
Alberto Roura
Ilias
Catalin Zalog
Valentine Abanosimov
judetucker
Einar Gangsø
tomhorvat
David Singer
Alan Mooiman
Chris Garcia
béla
Simon Bächler
JPeer264
Seth Broweleit
Rafael Corrêa Gomes
David Beitey
Patrick van Hesteren
Matt Viteri
Bardi Harborow
Beau Smith
VarelloThemes
Kovah
Nick
mkroeders
Edd Yerburgh
Chris Garcia
NicoLB
Anatoly Kamchatnov
Adam Macias
Igor Tarasov
J2TeaM
Bass Jobsen
Franco Moya
Alex Shafer
Scott Gauthreaux
Juan J. Jimenez-Anca
Allan Chau
Onoshko Dan
Patrick Yeo
Raphael Luba
XhmikosR
Alice Young
An Yang
anantoghosh
Chris Rebert
Geremia Taglialatela
morishitter
Dave Methvin
Curt Grimes
Chris Rebert
Jerad Rutnam
heath3
Heiko Jansen
akai
dumb
Ryan Burnett
Daiki Okumura
Christopher Baker
Chris Lamb
Rplus
Matthew Rayfield
Craig Martin
Teo Dell'Amico
Lionel Erard
Kay.L
Mark Topper
Ameya Pandilwar
Michael J. Ryan
David Lormor
Floris Verburg
Rakhat Jabagin
wolfy1339
Kevin P. Kucharczyk
Maarten van Elsas
Ivan Malopinsky
Charlie Wagner
Paul Rose
alberto
Jeremy Kratz
Russell Beye
Tobias
James Mosier
Jaga Santagostino
Ameya Pandilwar
cndpzc
Abdullah Alrasheed
xcatliu
Kevin Ross
ruedap
Sebastian Klatte
Kotas Vlastimil
Raphael Ackermann
Chris Purssell
ju1ius
Anders Sahlin
markau
Geremia Taglialatela
Sam A. Horvath-Hunt
Jerry Cheung
QWp6t
Vicary Archangel
sergej2705
petetnt
Justin Dorfman
Lachlan Campbell
Alexandr Kondrashov
Taylor Poulos
Leslie
Martin Beeby
Richard Kraaijenhagen
Deilv
Jacob Thornton
Zac Echola
O'meid
Jon Tewksbury
AndersMad
Almir Sarajcic
Kevin Kirsche
Matthew Conlen
Thomas Shinnick
Zeno Rocha
Henry Zhu
Risan Bagja Pradana
Peshkov, Igor
Chris Bell
Marcio Vicente
Marko Prelec
alberto
Eric Skogen
a-moses
Dan Croak
Liam Stanley
nextgenthemes
Tommy Kelly
Michael Käufl
Gleb Mazovetskiy
Andrey
Aleksey Khudyakov
Daniel Opitz
Haralan Dobrev
wolfika
Guilherme Duarte
Rolandas Barysas
David Leuliette
Corbzilla
Zearin
Maurice Wahba
Thomas McDonald
muzige2000
Luke Bonaccorsi
Xavier Gallardo
David Baughman
Andrew Smith
Kevin Kirsche
Mohamad El-Husseini
Vincent 4J
Gupocca
Caleb Land
Tom Byrer
Bernardo Gurgel Filho
Anton Vlasenko
Jelle Versele
Chris Rebert
Luca Mussi
Thomas McDonald
wangsai
Felipe
Jeremy Danyow
Matěj Kříž
Corné Dorrestijn
Max Beatty
Kevin Imig
David Richardson
Benjamin Dean
Jan Stevens
Boris Kaiser
lbryant
Manoj Kumar
James Kyle
Paul Irish
gps035
Sid Roberts
Pete Nykänen
Chris Rowe
Bram van Leur
swaincreates
Nic
Pascal Herbert
Chris Rebert
fat
Gleb Mazovetskiy
Thomas McDonald
mrmrs
Mark Otto
