Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
{% example html %}
-
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use our [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flex]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/) utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
-- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class.
+- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
Read on for an example and list of supported sub-components.
All programmatic API methods are **asynchronous** and returns to the caller once the transition is started but **before it ends**.
In order to execute an action once the transition is complete, you can listen to the corresponding event.
+
{% highlight js %}
$('#myCollapse').on('shown.bs.collapse', function (e) {
// Action to execute once the collapsible area is expanded
{% endhighlight %}
In addition a method call on a **transitioning component will be ignored**.
+
{% highlight js %}
$('#myCarousel').on('slid.bs.carousel', function (e) {
$('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap:
+
{% highlight scss %}
@import "custom";
@import "~bootstrap/scss/bootstrap";
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
+
{% highlight html %}
<div class="d-flex flex-nowrap">
...
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
+
{% highlight html %}
<div class="d-flex flex-wrap">
...
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
+
{% highlight html %}
<div class="d-flex flex-wrap-reverse">
...
{% endhighlight %}
-{% example html %}
-{% endexample %}
-
Responsive variations also exist for `flex-wrap`.
{% for bp in site.data.breakpoints %}
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
+
{% highlight html %}
<div class="d-flex align-content-start flex-wrap">
...
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
+
{% highlight html %}
<div class="d-flex align-content-end flex-wrap">...</div>
{% endhighlight %}
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
+
{% highlight html %}
<div class="d-flex align-content-center flex-wrap">...</div>
{% endhighlight %}
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
+
{% highlight html %}
<div class="d-flex align-content-between flex-wrap">...</div>
{% endhighlight %}
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
+
{% highlight html %}
<div class="d-flex align-content-around flex-wrap">...</div>
{% endhighlight %}
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
+
{% highlight html %}
<div class="d-flex align-content-stretch flex-wrap">...</div>
{% endhighlight %}
{% endhighlight %}
### Horizontal centering
+
Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
<div class="bd-example">