Enable dismissal of an alert via JavaScript:
-{{< highlight js >}}
+```js
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
-{{< /highlight >}}
+```
Or with `data` attributes on a button **within the alert**, as demonstrated above:
-{{< highlight html >}}
+```html
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
-{{< /highlight >}}
+```
Note that closing an alert will remove it from the DOM.
You can create an alert instance with the alert constructor, for example:
-{{< highlight js >}}
+```js
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
-{{< /highlight >}}
+```
This makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.)
</tbody>
</table>
-{{< highlight js >}}
+```js
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
-{{< /highlight >}}
+```
### Events
</tbody>
</table>
-{{< highlight js >}}
+```js
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
// do something, for instance, explicitly move focus to the most appropriate element,
// so it doesn't get lost/reset to the start of the page
// document.getElementById('...').focus()
})
-{{< /highlight >}}
+```
</div>
</div>
-{{< highlight html >}}
+```html
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
-{{< /highlight >}}
+```
## Nesting
</div>
</div>
-{{< highlight html >}}
+```html
<div class="btn-group-vertical">
...
</div>
-{{< /highlight >}}
+```
You can create a button instance with the button constructor, for example:
-{{< highlight js >}}
+```js
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
-{{< /highlight >}}
+```
<table class="table">
<thead>
For example, to toggle all buttons
-{{< highlight js >}}
+```js
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
-{{< /highlight >}}
+```
Call carousel manually with:
-{{< highlight js >}}
+```js
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
-{{< /highlight >}}
+```
### Options
You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
-{{< highlight js >}}
+```js
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
-{{< /highlight >}}
+```
<table class="table">
<thead>
</tbody>
</table>
-{{< highlight js >}}
+```js
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})
-{{< /highlight >}}
+```
### Change transition duration
Enable manually with:
-{{< highlight js >}}
+```js
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
-{{< /highlight >}}
+```
### Options
You can create a collapse instance with the constructor, for example:
-{{< highlight js >}}
+```js
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
-{{< /highlight >}}
+```
<table class="table">
<thead>
</tbody>
</table>
-{{< highlight js >}}
+```js
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})
-{{< /highlight >}}
+```
</div><!-- /btn-group -->
</div>
-{{< highlight html >}}
+```html
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
-{{< /highlight >}}
+```
### Split button
</div><!-- /btn-group -->
</div>
-{{< highlight html >}}
+```html
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
-{{< /highlight >}}
+```
## Sizing
</div>
</div>
-{{< highlight html >}}
+```html
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
...
</ul>
</div>
-{{< /highlight >}}
+```
<div class="bd-example">
<div class="btn-group">
</div>
</div>
-{{< highlight html >}}
+```
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button
...
</ul>
</div>
-{{< /highlight >}}
+```
## Dark dropdowns
</div>
</div>
-{{< highlight html >}}
+```html
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<!-- Dropdown menu links -->
</ul>
</div>
-{{< /highlight >}}
+```
### Dropright
</div>
</div>
-{{< highlight html >}}
+```html
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<!-- Dropdown menu links -->
</ul>
</div>
-{{< /highlight >}}
+```
### Dropleft
</div>
</div>
-{{< highlight html >}}
+```html
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Split dropleft
</button>
</div>
-{{< /highlight >}}
+```
## Menu items
Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
-{{< highlight html >}}
+```html
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
...
</ul>
</div>
-{{< /highlight >}}
+```
### Via JavaScript
Call the dropdowns via JavaScript:
-{{< highlight js >}}
+```js
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
-{{< /highlight >}}
+```
{{< callout info >}}
##### `data-toggle="dropdown"` still required
</tbody>
</table>
-{{< highlight js >}}
+```js
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})
-{{< /highlight >}}
+```
</div>
</div>
-{{< highlight html >}}
+```html
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
</div>
</div>
</div>
-{{< /highlight >}}
+```
### Using data attributes
You can activate a list group navigation without writing any JavaScript by simply specifying `data-toggle="list"` or on an element. Use these data attributes on `.list-group-item`.
<div role="tabpanel">
-{{< highlight html >}}
+```html
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
-{{< /highlight >}}
+```
</div>
### Via JavaScript
Enable tabbable list item via JavaScript (each list item needs to be activated individually):
-{{< highlight js >}}
+```js
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
tabTrigger.show()
})
})
-{{< /highlight >}}
+```
You can activate individual list item in several ways:
-{{< highlight js >}}
+```js
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
-{{< /highlight >}}
+```
### Fade effect
To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible.
-{{< highlight html >}}
+```html
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
-{{< /highlight >}}
+```
### Methods
Activates a list item element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
-{{< highlight html >}}
+```html
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
firstTab.show()
</script>
-{{< /highlight >}}
+```
#### show
Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs).
-{{< highlight js >}}
+```js
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
-{{< /highlight >}}
+```
#### dispose
*Static* method which allows you to get the tab instance associated with a DOM element
-{{< highlight js >}}
+```js
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
-{{< /highlight >}}
+```
### Events
</tbody>
</table>
-{{< highlight js >}}
+```js
var tabEl = document.querySelector('a[data-toggle="list"]')
tabEl.addEventListener('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
-{{< /highlight >}}
+```
- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{< docsref "/getting-started/browsers-devices#modals-and-dropdowns-on-mobile" >}}) for details.
- Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
-{{< highlight js >}}
+```js
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
-{{< /highlight >}}
+```
{{< callout info >}}
{{< partial "callout-info-prefersreducedmotion.md" >}}
</div>
</div>
-{{< highlight html >}}
+```html
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
-{{< /highlight >}}
+```
### Live demo
</button>
</div>
-{{< highlight html >}}
+```html
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</div>
</div>
</div>
-{{< /highlight >}}
+```
### Static backdrop
</button>
</div>
-{{< highlight html >}}
+```html
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</div>
</div>
</div>
-{{< /highlight >}}
+```
### Scrolling long content
</button>
</div>
-{{< highlight html >}}
+```html
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
-{{< /highlight >}}
+```
### Vertically centered
</button>
</div>
-{{< highlight html >}}
+```html
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
-{{< /highlight >}}
+```
### Tooltips and popovers
</button>
</div>
-{{< highlight html >}}
+```html
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
-{{< /highlight >}}
+```
### Using the grid
</button>
</div>
-{{< highlight html >}}
+```html
<div class="modal-body">
<div class="container-fluid">
<div class="row">
</div>
</div>
</div>
-{{< /highlight >}}
+```
### Varying modal content
</div>
{{< /example >}}
-{{< highlight js >}}
+```js
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
-{{< /highlight >}}
+```
### Change animation
For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
-{{< highlight html >}}
+```html
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
-{{< /highlight >}}
+```
### Dynamic heights
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalSm">Small modal</button>
</div>
-{{< highlight html >}}
+```html
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
-{{< /highlight >}}
+```
<div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenXxl">Full screen below xxl</button>
</div>
-{{< highlight html >}}
+```html
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
-{{< /highlight >}}
+```
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
-{{< highlight html >}}
+```html
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
-{{< /highlight >}}
+```
### Via JavaScript
Create a modal with a single line of JavaScript:
-{{< highlight js >}}
+```js
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
-{{< /highlight >}}
+```
### Options
Activates your content as a modal. Accepts an optional options `object`.
-{{< highlight js >}}
+```js
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
-{{< /highlight >}}
+```
#### toggle
Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
-{{< highlight js >}}myModal.toggle(){{< /highlight >}}
+```js
+myModal.toggle()
+```
#### show
Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
-{{< highlight js >}}myModal.show(){{< /highlight >}}
+```js
+myModal.show()
+```
#### hide
Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
-{{< highlight js >}}myModal.hide(){{< /highlight >}}
+```js
+myModal.hide()
+```
#### handleUpdate
Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
-{{< highlight js >}}myModal.handleUpdate(){{< /highlight >}}
+```js
+myModal.handleUpdate()
+```
#### dispose
Destroys an element's modal. (Removes stored data on the DOM element)
-{{< highlight js >}}myModal.dispose(){{< /highlight >}}
+```js
+myModal.dispose()
+```
#### getInstance
*Static* method which allows you to get the modal instance associated with a DOM element
-{{< highlight js >}}
+```js
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
-{{< /highlight >}}
+```
### Events
</tbody>
</table>
-{{< highlight js >}}
+```js
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (e) {
// do something...
})
-{{< /highlight >}}
+```
</nav>
</div>
-{{< highlight html >}}
+```html
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
-{{< /highlight >}}
+```
## Containers
</div>
</div>
-{{< highlight html >}}
+```html
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
-{{< /highlight >}}
+```
To help fit your needs, this works with `<ul>`-based markup, as shown above, or with any arbitrary "roll your own" markup. Note that if you're using `<nav>`, you shouldn't add `role="tablist"` directly to it, as this would override the element's native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `<div>`) and wrap the `<nav>` around it.
</div>
</div>
-{{< highlight html >}}
+```html
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
-{{< /highlight >}}
+```
The tabs plugin also works with pills.
</div>
</div>
-{{< highlight html >}}
+```html
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
-{{< /highlight >}}
+```
And with vertical pills.
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills mr-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
-{{< /highlight >}}
+```
### Using data attributes
You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`.
-{{< highlight html >}}
+```html
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
-{{< /highlight >}}
+```
### Via JavaScript
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
-{{< highlight js >}}
+```js
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
tabTrigger.show()
})
})
-{{< /highlight >}}
+```
You can activate individual tabs in several ways:
-{{< highlight js >}}
+```js
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
-{{< /highlight >}}
+```
### Fade effect
To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible.
-{{< highlight html >}}
+```html
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
-{{< /highlight >}}
+```
### Methods
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
-{{< highlight html >}}
+```html
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
firstTab.show()
</script>
-{{< /highlight >}}
+```
#### show
Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs).
-{{< highlight js >}}
+```js
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
-{{< /highlight >}}
+```
#### dispose
*Static* method which allows you to get the tab instance associated with a DOM element
-{{< highlight js >}}
+```js
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
-{{< /highlight >}}
+```
### Events
</tbody>
</table>
-{{< highlight js >}}
+```js
var tabEl = document.querySelector('a[data-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
-{{< /highlight >}}
+```
One way to initialize all popovers on a page would be to select them by their `data-toggle` attribute:
-{{< highlight js >}}
+```js
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
-{{< /highlight >}}
+```
## Example: Using the `container` option
When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead.
-{{< highlight js >}}
+```js
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
-{{< /highlight >}}
+```
## Example
</div>
</div>
-{{< highlight html >}}
+```html
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
-{{< /highlight >}}
+```
### Dismiss on next click
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
{{< /example >}}
-{{< highlight js >}}
+```js
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
-{{< /highlight >}}
+```
### Disabled elements
Enable popovers via JavaScript:
-{{< highlight js >}}
+```js
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
-{{< /highlight >}}
+```
{{< callout warning >}}
### Making popovers work for keyboard and assistive technology users
Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed.
-{{< highlight js >}}myPopover.show(){{< /highlight >}}
+```js
+myPopover.show()
+```
#### hide
Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
-{{< highlight js >}}myPopover.hide(){{< /highlight >}}
+```js
+myPopover.hide()
+```
#### toggle
Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
-{{< highlight js >}}myPopover.toggle(){{< /highlight >}}
+```js
+myPopover.toggle()
+```
#### dispose
Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
-{{< highlight js >}}myPopover.dispose(){{< /highlight >}}
+```js
+myPopover.dispose()
+```
#### enable
Gives an element's popover the ability to be shown. **Popovers are enabled by default.**
-{{< highlight js >}}myPopover.enable(){{< /highlight >}}
+```js
+myPopover.enable()
+```
#### disable
Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled.
-{{< highlight js >}}myPopover.disable(){{< /highlight >}}
+```js
+myPopover.disable()
+```
#### toggleEnabled
Toggles the ability for an element's popover to be shown or hidden.
-{{< highlight js >}}myPopover.toggleEnabled(){{< /highlight >}}
+```js
+myPopover.toggleEnabled()
+```
#### update
Updates the position of an element's popover.
-{{< highlight js >}}myPopover.update(){{< /highlight >}}
+```js
+myPopover.update()
+```
#### getInstance
*Static* method which allows you to get the popover instance associated with a DOM element
-{{< highlight js >}}
+```js
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
-{{< /highlight >}}
+```
### Events
</tbody>
</table>
-{{< highlight js >}}
+```js
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})
-{{< /highlight >}}
+```
</button>
</div>
-{{< highlight html >}}
+```html
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
-{{< /highlight >}}
+```
</div>
</div>
-{{< highlight html >}}
+```html
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<h4 id="three">three</h4>
<p>...</p>
</div>
-{{< /highlight >}}
+```
## Example with nested nav
</div>
</div>
-{{< highlight html >}}
+```html
<nav id="navbar-example3" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
-{{< /highlight >}}
+```
## Example with list-group
</div>
</div>
-{{< highlight html >}}
+```html
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>
-{{< /highlight >}}
+```
## Usage
To easily add scrollspy behavior to your topbar navigation, add `data-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component.
-{{< highlight css >}}
+```css
body {
position: relative;
}
-{{< /highlight >}}
+```
-{{< highlight html >}}
+```html
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
</div>
...
</body>
-{{< /highlight >}}
+```
### Via JavaScript
After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
-{{< highlight js >}}
+```js
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
-{{< /highlight >}}
+```
{{< callout danger >}}
#### Resolvable ID targets required
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
-{{< highlight js >}}
+```js
var dataSpyList = [].slice.call(document.querySelectorAll('[data-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
-{{< /highlight >}}
+```
#### dispose
*Static* method which allows you to get the scrollspy instance associated with a DOM element
-{{< highlight js >}}
+```js
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
-{{< /highlight >}}
+```
### Options
</tbody>
</table>
-{{< highlight js >}}
+```js
var firstScrollSpyEl = document.querySelector('[data-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})
-{{< /highlight >}}
+```
As the content you're displaying changes, be sure to update the [`delay` timeout](#options) to ensure people have enough time to read the toast.
-{{< highlight html >}}
+```html
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
-{{< /highlight >}}
+```
When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
Initialize toasts via JavaScript:
-{{< highlight js >}}
+```js
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
-{{< /highlight >}}
+```
### Options
Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs).
You have to manually call this method, instead your toast won't show.
-{{< highlight js >}}toast.show(){{< /highlight >}}
+```js
+toast.show()
+```
#### hide
Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`.
-{{< highlight js >}}toast.hide(){{< /highlight >}}
+```js
+toast.hide()
+```
#### dispose
Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
-{{< highlight js >}}toast.dispose(){{< /highlight >}}
+```js
+toast.dispose()
+```
### Events
</tbody>
</table>
-{{< highlight js >}}
+```js
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})
-{{< /highlight >}}
+```
One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
-{{< highlight js >}}
+```js
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
-{{< /highlight >}}
+```
## Examples
</div>
</div>
-{{< highlight html >}}
+```html
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
-{{< /highlight >}}
+```
And with custom HTML added:
-{{< highlight html >}}
+```html
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
-{{< /highlight >}}
+```
With an SVG:
Trigger the tooltip via JavaScript:
-{{< highlight js >}}
+```js
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
-{{< /highlight >}}
+```
{{< callout warning >}}
##### Overflow `auto` and `scroll`
Tooltip position attempts to automatically change when a parent container has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`:
-{{< highlight js >}}
+```js
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: 'window'
})
-{{< /highlight >}}
+```
{{< /callout >}}
### Markup
You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.
{{< /callout >}}
-{{< highlight html >}}
+```html
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
Some tooltip text!
</div>
</div>
-{{< /highlight >}}
+```
### Disabled elements
Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
-{{< highlight js >}}tooltip.show(){{< /highlight >}}
+```js
+tooltip.show()
+```
#### hide
Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
-{{< highlight js >}}tooltip.hide(){{< /highlight >}}
+```js
+tooltip.hide()
+```
#### toggle
Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
-{{< highlight js >}}tooltip.toggle(){{< /highlight >}}
+```js
+tooltip.toggle()
+```
#### dispose
Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
-{{< highlight js >}}tooltip.dispose(){{< /highlight >}}
+```js
+tooltip.dispose()
+```
#### enable
Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.**
-{{< highlight js >}}tooltip.enable(){{< /highlight >}}
+```js
+tooltip.enable()
+```
#### disable
Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
-{{< highlight js >}}tooltip.disable(){{< /highlight >}}
+```js
+tooltip.disable()
+```
#### toggleEnabled
Toggles the ability for an element's tooltip to be shown or hidden.
-{{< highlight js >}}tooltip.toggleEnabled(){{< /highlight >}}
+```js
+tooltip.toggleEnabled()
+```
#### update
Updates the position of an element's tooltip.
-{{< highlight js >}}tooltip.update(){{< /highlight >}}
+```js
+tooltip.update()
+```
#### getInstance
*Static* method which allows you to get the tooltip instance associated with a DOM element
-{{< highlight js >}}
+```js
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
-{{< /highlight >}}
+```
### Events
</tbody>
</table>
-{{< highlight js >}}
+```js
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
})
tooltip.hide()
-{{< /highlight >}}
+```
If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
-{{< highlight html >}}
+```html
​<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
-{{< /highlight >}}
+```
Bootstrap utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
-{{< highlight scss >}}
+```scss
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-{{< /highlight >}}
+```
This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden.
-{{< highlight html >}}
+```html
<input type="text" hidden>
-{{< /highlight >}}
+```
{{< callout warning >}}
##### jQuery incompatibility
</table>
</div>
-{{< highlight html >}}
+```html
<table class="table">
<thead>
...
</tr>
</tbody>
</table>
-{{< /highlight >}}
+```
<div class="bd-example">
<table class="table table-dark">
</table>
</div>
-{{< highlight html >}}
+```html
<table class="table table-dark">
<thead>
...
</tr>
</tbody>
</table>
-{{< /highlight >}}
+```
## How do the variants and accented tables work?
</div>
</div>
-{{< highlight html >}}
+```html
<table class="table table-sm table-dark">
<div class="table-responsive">
<table class="table align-middle">
</table>
</div>
</table>
-{{< /highlight >}}
+```
## Nesting
</table>
</div>
-{{< highlight html >}}
+```html
<table class="table table-striped">
<thead>
...
...
</tbody>
</table>
-{{< /highlight >}}
+```
## How nesting works
</table>
</div>
-{{< highlight html >}}
+```html
<table class="table">
<thead class="table-light">
...
...
</tbody>
</table>
-{{< /highlight >}}
+```
<div class="bd-example">
<table class="table">
</table>
</div>
-{{< highlight html >}}
+```html
<table class="table">
<thead class="table-dark">
...
...
</tbody>
</table>
-{{< /highlight >}}
+```
### Table foot
</table>
</div>
-{{< highlight html >}}
+```html
<table class="table">
<thead>
...
...
</tfoot>
</table>
-{{< /highlight >}}
+```
### Captions
</table>
</div>
-{{< highlight html >}}
+```html
<table class="table table-sm">
<caption>List of users</caption>
<thead>
...
</tbody>
</table>
-{{< /highlight >}}
+```
You can also put the `<caption>` on the top of the table with `.caption-top`.
</div>
</div>
-{{< highlight html >}}
+```html
<div class="table-responsive">
<table class="table">
...
</table>
</div>
-{{< /highlight >}}
+```
### Breakpoint specific
</tbody>
</table>
-{{< highlight html >}}
+```html
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
-{{< /highlight >}}
+```
`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
<div class="display-6">Display 6</div>
</div>
-{{< highlight html >}}
+```html
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
-{{< /highlight >}}
+```
Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
Here's how you can use these in your Sass:
-{{< highlight scss >}}
+```scss
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
-{{< /highlight >}}
+```
[Color utility classes]({{< docsref "/utilities/colors" >}}) are also available for setting `color` and `background-color` using the `500` color values.
</div>
</div>
-{{< highlight html >}}
+```html
<div class="callout">...</div>
-{{< /highlight >}}
+```
In your CSS, you'd have something like the following where the bulk of the styling is done via `.callout`. Then, the unique styles between each variant is controlled via modifier class.
Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
-{{< highlight css >}}
+```css
{{< root.inline >}}
{{- $css := readFile "dist/css/bootstrap.css" -}}
{{- $match := findRE ":root {([^}]*)}" $css 1 -}}
{{- index $match 0 -}}
{{< /root.inline >}}
-{{< /highlight >}}
+```
## Component variables
CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables.
-{{< highlight css >}}
+```css
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
-{{< /highlight >}}
+```
Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:
-{{< highlight text >}}
+```text
your-project/
├── scss
│ └── custom.scss
└── bootstrap
├── js
└── scss
-{{< /highlight >}}
+```
If you've downloaded our source files and aren't using a package manager, you'll want to manually setup something similar to that structure, keeping Bootstrap's source files separate from your own.
-{{< highlight text >}}
+```text
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
-{{< /highlight >}}
+```
## Importing
In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
-{{< highlight scss >}}
+```scss
// Custom.scss
// Option A: Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
-{{< /highlight >}}
+```
-{{< highlight scss >}}
+```scss
// Custom.scss
// Option B: Include parts of Bootstrap
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
-{{< /highlight >}}
+```
With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.
Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm:
-{{< highlight scss >}}
+```scss
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";
-{{< /highlight >}}
+```
Repeat as necessary for any variable in Bootstrap, including the global options below.
All variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:
-{{< highlight scss >}}
+```scss
$primary: #0074d9;
$danger: #ff4136;
-{{< /highlight >}}
+```
Later on, theses variables are set in Bootstrap's `$theme-colors` map:
-{{< highlight scss >}}
+```scss
$theme-colors: (
"primary": $primary,
"danger": $danger
);
-{{< /highlight >}}
+```
### Add to map
Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`.
-{{< highlight scss >}}
+```scss
// Create your own map
$custom-colors: (
"custom-color": #900
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
-{{< /highlight >}}
+```
### Remove from map
To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options:
-{{< highlight scss >}}
+```scss
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
-{{< /highlight >}}
+```
## Required keys
Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we have, theme colors can also be used as standalone variables, like `$primary`.
-{{< highlight scss >}}
+```scss
.custom-element {
color: $gray-100;
background-color: $dark;
}
-{{< /highlight >}}
+```
You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
In practice, you'd call the function and pass in the color and weight parameters.
-{{< highlight scss >}}
+```scss
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
-{{< /highlight >}}
+```
### Color contrast
For example, to generate color swatches from our `$theme-colors` map:
-{{< highlight scss >}}
+```scss
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
-{{< /highlight >}}
+```
It can also be used for one-off contrast needs:
-{{< highlight scss >}}
+```scss
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
-{{< /highlight >}}
+```
You can also specify a base color with our color map functions:
-{{< highlight scss >}}
+```scss
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
-{{< /highlight >}}
+```
### Escape SVG
Example where the calc is valid:
-{{< highlight scss >}}
+```scss
$border-radius: .25rem;
$border-width: 1px;
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
-{{< /highlight >}}
+```
Example where the calc is invalid:
-{{< highlight scss >}}
+```scss
$border-radius: .25rem;
$border-width: 0;
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
-{{< /highlight >}}
+```
Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.
-{{< highlight html >}}
+```html
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-{{< /highlight >}}
+```
Add the `disabled` attribute to a `<fieldset>` to disable all the controls within. Browsers treat all native form controls (`<input>`, `<select>`, and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them.
Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
-{{< highlight html >}}
+```html
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
-{{< /highlight >}}
+```
For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap 5's `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.**
-{{< highlight html >}}
+```html
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
-{{< /highlight >}}
+```
### Reduced motion
<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->
-{{< highlight text >}}
+```text
bootstrap/
├── css/
│ ├── bootstrap-grid.css
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
-{{< /highlight >}}
+```
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
-{{< highlight text >}}
+```text
bootstrap/
├── dist/
│ ├── css/
│ └── examples/
├── js/
└── scss/
-{{< /highlight >}}
+```
The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `site/docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.
Skip the download with [jsDelivr](https://www.jsdelivr.com/) to deliver cached version of Bootstrap's compiled CSS and JS to your project.
-{{< highlight html >}}
+```html
<link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```
If you're using our compiled JavaScript and prefer to include Popper.js separately, add Popper.js before our JS, via a CDN preferably.
-{{< highlight html >}}
+```html
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```
## Package managers
Install Bootstrap in your Node.js powered apps with [the npm package](https://www.npmjs.com/package/bootstrap):
-{{< highlight sh >}}
+```sh
npm install bootstrap@next
-{{< /highlight >}}
+```
`const bootstrap = require('bootstrap')` or `import bootstrap from 'bootstrap'` will load all of Bootstrap's plugins onto a `bootstrap` object.
The `bootstrap` module itself exports all of our plugins. You can manually load Bootstrap's plugins individually by loading the `/js/dist/*.js` files under the package's top-level directory.
Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap):
-{{< highlight sh >}}
+```sh
yarn add bootstrap@next
-{{< /highlight >}}
+```
### RubyGems
Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):
-{{< highlight ruby >}}
+```ruby
gem 'bootstrap', '~> {{< param current_ruby_version >}}'
-{{< /highlight >}}
+```
Alternatively, if you're not using Bundler, you can install the gem by running this command:
-{{< highlight sh >}}
+```sh
gem install bootstrap -v {{< param current_ruby_version >}}
-{{< /highlight >}}
+```
[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.
You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org/):
-{{< highlight sh >}}
+```sh
composer require twbs/bootstrap:{{< param current_version >}}
-{{< /highlight >}}
+```
### NuGet
If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/):
-{{< highlight powershell >}}
+```powershell
Install-Package bootstrap
-{{< /highlight >}}
+```
-{{< highlight powershell >}}
+```powershell
Install-Package bootstrap.sass
-{{< /highlight >}}
+```
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
-{{< highlight html >}}
+```html
<link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
-{{< /highlight >}}
+```
### JS
Include everything you need in one script with our bundle. Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section.
-{{< highlight html >}}
+```html
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```
#### Separate
If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins.
-{{< highlight html >}}
+```html
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```
#### Modules
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
-{{< highlight html >}}
+```html
<!doctype html>
<html lang="en">
<head>
-->
</body>
</html>
-{{< /highlight >}}
+```
That's all you need for overall page requirements. Visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components.
Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
-{{< highlight html >}}
+```html
<!doctype html>
<html lang="en">
...
</html>
-{{< /highlight >}}
+```
### Responsive meta tag
Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta tag** to your `<head>`.
-{{< highlight html >}}
+```html
<meta name="viewport" content="width=device-width, initial-scale=1">
-{{< /highlight >}}
+```
You can see an example of this in action in the [starter template](#starter-template).
On the rare occasion you need to override it, use something like the following:
-{{< highlight css >}}
+```css
.selector-for-some-widget {
box-sizing: content-box;
}
-{{< /highlight >}}
+```
With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in your browser, if your [targeted browsers support it](https://caniuse.com/#feat=es6-module).
-{{< highlight html >}}
+```html
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
-{{< /highlight >}}
+```
{{< callout warning >}}
## Incompatible plugins
All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call `preventDefault()`.
-{{< highlight js >}}
+```js
var myModal = document.getElementById('myModal')
myModal.addEventListener('show.bs.modal', function (e) {
return e.preventDefault() // stops modal from being shown
}
})
-{{< /highlight >}}
+```
{{< callout warning >}}
## jQuery events
Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-no-jquery` attribute set on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`.
-{{< highlight js >}}
+```js
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
-{{< /highlight >}}
+```
{{< /callout >}}
## Programmatic API
All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior):
-{{< highlight js >}}
+```js
var myModalEl = document.getElementById('myModal')
var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
-{{< /highlight >}}
+```
If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. In order to retrieve it directly from an element, do this: `bootstrap.Popover.getInstance(myPopoverEl)`.
In order to execute an action once the transition is complete, you can listen to the corresponding event.
-{{< highlight js >}}
+```js
var myCollapseEl = document.getElementById('#myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (e) {
// Action to execute once the collapsible area is expanded
})
-{{< /highlight >}}
+```
In addition a method call on a **transitioning component will be ignored**.
-{{< highlight js >}}
+```js
var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
-{{< /highlight >}}
+```
### Default settings
You can change the default settings for a plugin by modifying the plugin's `Constructor.Default` object:
-{{< highlight js >}}
+```js
// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false
-{{< /highlight >}}
+```
## No conflict (only if you use jQuery)
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of.
-{{< highlight js >}}
+```js
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
-{{< /highlight >}}
+```
## Version numbers
The version of each of Bootstrap's plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:
-{{< highlight js >}}
+```js
bootstrap.Tooltip.VERSION // => "{{< param current_version >}}"
-{{< /highlight >}}
+```
## No special fallbacks when JavaScript is disabled
The default `allowList` value is the following:
-{{< highlight js >}}
+```js
var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
// Global attributes allowed on any supplied element below.
u: [],
ul: []
}
-{{< /highlight >}}
+```
If you want to add new values to this default `allowList` you can do the following:
-{{< highlight js >}}
+```js
var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
// To allow table elements
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)
-{{< /highlight >}}
+```
If you want to bypass our sanitizer because you prefer to use a dedicated library, for example [DOMPurify](https://www.npmjs.com/package/dompurify), you should do the following:
-{{< highlight js >}}
+```js
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})
-{{< /highlight >}}
+```
Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) by adding this line to your app's entry point (usually `index.js` or `app.js`):
-{{< highlight js >}}
+```js
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
-{{< /highlight >}}
+```
Alternatively, if you only need just a few of our plugins, you may **import plugins individually** as needed:
-{{< highlight js >}}
+```js
import Alert from 'bootstrap/js/dist/alert';
...
-{{< /highlight >}}
+```
Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property.
This means that you will have to make sure to add it to your `package.json` using `npm install popper.js`.
First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{< docsref "/customize/sass" >}}). Then, use your main Sass file to import your custom variables, followed by Bootstrap:
-{{< highlight scss >}}
+```scss
@import "custom";
@import "~bootstrap/scss/bootstrap";
-{{< /highlight >}}
+```
For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar:
-{{< highlight js >}}
+```js
// ...
{
test: /\.(scss)$/,
}]
}
// ...
-{{< /highlight >}}
+```
### Importing Compiled CSS
Alternatively, you may use Bootstrap's ready-to-use CSS by simply adding this line to your project's entry point:
-{{< highlight js >}}
+```js
import 'bootstrap/dist/css/bootstrap.min.css';
-{{< /highlight >}}
+```
In this case you may use your existing rule for `css` without any special modifications to webpack config, except you don't need `sass-loader` just [style-loader](https://github.com/webpack-contrib/style-loader) and [css-loader](https://github.com/webpack-contrib/css-loader).
-{{< highlight js >}}
+```js
// ...
module: {
rules: [
]
}
// ...
-{{< /highlight >}}
+```
Use in HTML:
-{{< highlight html >}}
+```html
<div class="clearfix">...</div>
-{{< /highlight >}}
+```
The mixin source code:
Use the mixin in SCSS:
-{{< highlight scss >}}
+```scss
.element {
@include clearfix;
}
-{{< /highlight >}}
+```
The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
-{{< highlight html >}}
+```html
<div class="fixed-top">...</div>
-{{< /highlight >}}
+```
## Fixed bottom
Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
-{{< highlight html >}}
+```html
<div class="fixed-bottom">...</div>
-{{< /highlight >}}
+```
## Sticky top
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
-{{< highlight html >}}
+```html
<div class="sticky-top">...</div>
-{{< /highlight >}}
+```
## Responsive sticky top
Responsive variations also exist for `.sticky-top` utility.
-{{< highlight html >}}
+```html
<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
-{{< /highlight >}}
+```
This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.
-{{< highlight scss >}}
+```scss
.ratio-4x3 {
@include media-breakpoint-up(md) {
--aspect-ratio: 50%; // 2x1
}
}
-{{< /highlight >}}
+```
{{< example class="bd-example-ratios bd-example-ratios-breakpoint" >}}
<div class="ratio ratio-4x3">
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
{{< /example >}}
-{{< highlight scss >}}
+```scss
// Usage as a mixin
.visually-hidden-title {
.skip-navigation {
@include visually-hidden-focusable;
}
-{{< /highlight >}}
+```
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
-{{< highlight scss >}}
+```scss
// Source mixins
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
display: block;
}
}
-{{< /highlight >}}
+```
These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:
-{{< highlight scss >}}
+```scss
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
-{{< /highlight >}}
+```
### Max-width
We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
-{{< highlight scss >}}
+```scss
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
display: block;
}
}
-{{< /highlight >}}
+```
These mixins take those declared breakpoints, subtract `.02px` from them, and use them as our `max-width` values. For example:
-{{< highlight scss >}}
+```scss
// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
-{{< /highlight >}}
+```
{{< callout warning >}}
{{< partial "callout-info-mediaqueries-breakpoints.md" >}}
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
-{{< highlight scss >}}
+```scss
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }
-{{< /highlight >}}
+```
For example the `@include media-breakpoint-only(md) { ... }` will result in :
-{{< highlight scss >}}
+```scss
@media (min-width: 768px) and (max-width: 991.98px) { ... }
-{{< /highlight >}}
+```
### Between breakpoints
Similarly, media queries may span multiple breakpoint widths:
-{{< highlight scss >}}
+```scss
@include media-breakpoint-between(md, xl) { ... }
-{{< /highlight >}}
+```
Which results in:
-{{< highlight scss >}}
+```scss
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
-{{< /highlight >}}
+```
Our default `.container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.
-{{< highlight html >}}
+```html
<div class="container">
<!-- Content here -->
</div>
-{{< /highlight >}}
+```
## Responsive containers
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
-{{< highlight html >}}
+```html
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
-{{< /highlight >}}
+```
## Fluid containers
Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
-{{< highlight html >}}
+```html
<div class="container-fluid">
...
</div>
-{{< /highlight >}}
+```
## Sass
In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
-{{< highlight scss >}}
+```scss
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
.custom-container {
@include make-container();
}
-{{< /highlight >}}
+```
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
You can also use the accompanying Sass mixin, `row-cols()`:
-{{< highlight scss >}}
+```scss
.element {
// Three columns to start
@include row-cols(3);
@include row-cols(5);
}
}
-{{< /highlight >}}
+```
## Nesting
Variables and maps 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.
-{{< highlight scss >}}
+```scss
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
-{{< /highlight >}}
+```
{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
-{{< highlight scss >}}
+```scss
// Creates a wrapper for a series of columns
@include make-row();
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
-{{< /highlight >}}
+```
### Example usage
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.
-{{< highlight scss >}}
+```scss
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
@include make-col(4);
}
}
-{{< /highlight >}}
+```
{{< example >}}
<div class="example-container">
The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters.
-{{< highlight scss >}}
+```scss
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
-{{< /highlight >}}
+```
### Grid tiers
Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
-{{< highlight scss >}}
+```scss
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 720px,
lg: 960px
);
-{{< /highlight >}}
+```
When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
-{{< /highlight >}}
+```
Responsive variations also exist for `justify-content`.
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
-{{< /highlight >}}
+```
Responsive variations also exist for `align-items`.
</div>
</div>
-{{< highlight html >}}
+```html
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
-{{< /highlight >}}
+```
Responsive variations also exist for `align-self`.
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex flex-nowrap">
...
</div>
-{{< /highlight >}}
+```
<div class="bd-example">
<div class="d-flex flex-wrap bd-highlight">
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex flex-wrap">
...
</div>
-{{< /highlight >}}
+```
<div class="bd-example">
<div class="d-flex flex-wrap-reverse bd-highlight">
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex flex-wrap-reverse">
...
</div>
-{{< /highlight >}}
+```
Responsive variations also exist for `flex-wrap`.
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex align-content-start flex-wrap">
...
</div>
-{{< /highlight >}}
+```
<div class="bd-example">
<div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px">
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex align-content-end flex-wrap">...</div>
-{{< /highlight >}}
+```
<div class="bd-example">
<div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px">
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex align-content-center flex-wrap">...</div>
-{{< /highlight >}}
+```
<div class="bd-example">
<div class="d-flex align-content-between flex-wrap bd-highlight mb-3" style="height: 200px">
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex align-content-between flex-wrap">...</div>
-{{< /highlight >}}
+```
<div class="bd-example">
<div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px">
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex align-content-around flex-wrap">...</div>
-{{< /highlight >}}
+```
<div class="bd-example">
<div class="d-flex align-content-stretch flex-wrap bd-highlight mb-3" style="height: 200px">
</div>
</div>
-{{< highlight html >}}
+```html
<div class="d-flex align-content-stretch flex-wrap">...</div>
-{{< /highlight >}}
+```
Responsive variations also exist for `align-content`.
</div>
</div>
-{{< highlight html >}}
+```html
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
-{{< /highlight >}}
+```
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
Quick positioning classes are available, though they are not responsive.
-{{< highlight html >}}
+```html
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
-{{< /highlight >}}
+```
## Arrange elements
You can also use utilities to set the width and height relative to the viewport.
-{{< highlight html >}}
+```html
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
-{{< /highlight >}}
+```
Here are some representative examples of these classes:
-{{< highlight scss >}}
+```scss
.mt-0 {
margin-top: 0 !important;
}
.p-3 {
padding: $spacer !important;
}
-{{< /highlight >}}
+```
### Horizontal centering
</div>
</div>
-{{< highlight html >}}
+```html
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
-{{< /highlight >}}
+```
### Negative margin
The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here's an example class that's the opposite of `.mt-1`:
-{{< highlight scss >}}
+```scss
.mt-n1 {
margin-top: -0.25rem !important;
}
-{{< /highlight >}}
+```
Apply `.visible` or `.invisible` as needed.
-{{< highlight html >}}
+```html
<div class="visible">...</div>
<div class="invisible">...</div>
-{{< /highlight >}}
+```
-{{< highlight scss >}}
+```scss
// Class
.visible {
visibility: visible !important;
.invisible {
visibility: hidden !important;
}
-{{< /highlight >}}
+```
projects / thirdparty / bootstrap.git / commitdiff
