Position Position utilities are helpful for quickly placing a component outside the normal document flow. Choose from a handful of fixed or sticky position classes as needed. Fixed top 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 aditional CSS. <div class="fixed-top">...</div> Fixed bottom Position an element at the bottom of the viewport, from edge to edge. Be sure

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

Clearfix Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin. <div class="clearfix">...</div> // Mixin itself @mixin clearfix() { &::after { display: block; content: ""; clear: both; } } // Usage as a mixin .element { @include clearfix; } The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the

Carousel The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). Please be aware that neste

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

Tables Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes. Contents Examples Table head options Striped rows Bordered table Hoverable rows Small table Contextual classes Responsive tables Examples Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All t

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>

Overview Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful flexbox grid system, a flexible media object, and responsive utility classes. Contents Containers Responsive breakpoints Z-index Containers Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (m

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

Cards A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. Contents Example Content types Blocks Titles, text, and links Images List groups Kitchen sink Header and footer Sizing Using gr