Flexbox Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. Contents Enable flex behaviors Direction Justify content Align items Align self Auto margins With justify-content With align-items Wrap Order Align content Enable flex behaviors Apply display utilities to create a flexbox container and transform direct children elements int

Dropdowns Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision. Contents Examples Single button dropdowns Split button dropdowns Sizing Dropup variation Menu items Menu alignment Menu headers Menu dividers Disabled menu items Usage Via data attributes Via JavaScript Options Methods Events Exam

Figures Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>. Use the included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive. Open example on getbootstrap.com <figure class="figure"> <img src="..." clas

Download Bootstrap v4.0.0-alpha.6 is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need. Contents Bootstrap CSS and JS Source files Bootstrap CDN Package managers npm RubyGems Composer Bower NuGet Bootstrap CSS and JS Download Bootstrap’s ready-to-use code to easily drop into your project. Includes compiled and minified versions of all our CSS bundles (default, grid only, or Reboot only) and Java

Display property Use .d-block, .d-inline, or .d-inline-block to simply set an element’s display property to block, inline, or inline-block (respectively). To make an element display: none, use our responsive utilities instead. Open example on getbootstrap.com <div class="d-inline bg-success">Inline</div> <div class="d-inline bg-success">Inline</div> Open example on getbootstrap.com <span class="d-block bg-primary">Block</span> Open example on getbootstrap.com

Customization options Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable’s value and recompile with the included Gruntfile as needed. Customizing variables Bootstrap 4 ships with a _custom.scss file for easy overriding of default variables in /scss/_variables.scss. Copy and paste relevant lines from there into the _custom.scss file, modify the values, and recompile your Sass to change our

Contents Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each flavor’s contents and structure below. Remember, no matter the implementation flavor, Bootstrap’s JavaScript plugins require jQuery. Precompiled Bootstrap Once downloaded, unzip the compressed folder and you’ll see something like this: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js/ ├── bootstrap.js └──

Collapse The Bootstrap collapse plugin allows you to toggle content on your pages with a few classes thanks to some helpful JavaScript. Contents Example Accordion example Accessibility Usage Via data attributes Via JavaScript Options Methods .collapse(options) .collapse('toggle') .collapse('show') .collapse('hide') Events Example Click the buttons below to show and hide another element via class changes: .collapse hides content .collapsing is applied during transitions .collapse.show s

Colors 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. Open example on getbootstrap.com <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.<

Close icon Use a generic close icon for dismissing content like modals and alerts. Be sure to include text for screen readers, as we’ve done with aria-label. Open example on getbootstrap.com <button type="button" class="close" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>