host: 0.0.0.0
port: 9001
baseurl: ""
-url: http://getbootstrap.com
+url: http://v4-alpha.getbootstrap.com
encoding: UTF-8
exclude: [assets/scss/]
- jekyll-redirect-from
- jekyll-sitemap
+# Social
+title: Bootstrap
+description: The most popular HTML, CSS, and JS framework in the world.
+twitter: getbootstrap
+authors: Mark Otto, Jacob Thornton, and Bootstrap contributors
+social_logo_path: /assets/brand/bootstrap-social-logo.png
+social_image_path: /assets/brand/bootstrap-social.png
+
# Custom vars
current_version: 4.0.0-alpha.4
repo: https://github.com/twbs/bootstrap
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
-<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<title>
- {% if page.layout == "home" %}
- {{ page.title }}
+ {% if page.title %}
+ {{ page.title }} · {{ site.title }}
{% else %}
- {{ page.title }} · Bootstrap
+ {{ site.title }} · {{ site.description }}
{% endif %}
</title>
+{% include social.html %}
+
<!-- Bootstrap core CSS -->
{% if site.github %}
<link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
--- /dev/null
+<!-- Twitter -->
+<meta name="twitter:site" content="@{{ site.twitter }}">
+<meta name="twitter:creator" content="@{{ site.twitter }}">
+
+{% if page.title %}
+ <meta name="twitter:card" content="summary">
+ <meta name="twitter:title" content="{{ page.title }}">
+ <meta name="twitter:description" content="{{ page.description }}">
+ <meta name="twitter:image" content="{{ site.url }}{{ site.social_logo_path }}">
+{% else %}
+ <meta name="twitter:card" content="summary_large_image">
+ <meta name="twitter:title" content="{{ site.title }}">
+ <meta name="twitter:description" content="{{ site.description }}">
+ <meta name="twitter:image" content="{{ site.url }}{{ site.social_image_path }}">
+{% endif %}
+
+<!-- Facebook -->
+{% if page.title %}
+ <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+ <meta property="og:title" content="{{ page.title }}">
+ <meta property="og:description" content="{{ page.description }}">
+{% else %}
+ <meta property="og:url" content="{{ site.url }}">
+ <meta property="og:title" content="{{ site.title }}">
+ <meta property="og:description" content="{{ site.description }}">
+{% endif %}
+<meta property="og:image" content="{{ site.url }}{{ site.social_image_path }}">
+
+<!-- Meta -->
+<meta name="description" content="{{ site.description }}">
+<meta name="author" content="{{ site.authors }}">
---
layout: docs
title: Brand guidelines
+description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
group: about
---
---
layout: docs
title: History
+description: A brief overview of the history of Bootstrap.
group: about
redirect_from: "/about/"
---
---
layout: docs
title: License FAQs
+description: Commonly asked questions about Bootstrap's open source license.
group: about
---
---
layout: docs
title: Team
+description: An overview of the founding team and core contributors to Bootstrap.
group: about
---
---
layout: docs
title: Translations
+description: Links to community-translated Bootstrap documentation sites.
group: about
---
---
layout: docs
title: Alerts
+description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
group: components
---
---
layout: docs
title: Breadcrumb
+description: Indicate the current page's location within a navigational hierarchy.
group: components
---
---
layout: docs
title: Button group
+description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
group: components
---
---
layout: docs
title: Buttons
+description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
group: components
redirect_from: "/components/"
---
---
layout: docs
title: Cards
+description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options.
group: components
---
---
layout: docs
title: Carousel
+description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
group: components
---
---
layout: docs
title: Collapse
+description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
group: components
---
---
layout: docs
title: Dropdowns
+description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
group: components
---
---
layout: docs
title: Forms
+description: Examples and usage guidelines for from controls, form layouts, and custom forms.
group: components
---
---
layout: docs
title: Input group
+description: Extend form controls with the input group.
group: components
---
---
layout: docs
title: Jumbotron
+description: Lightweight, flexible component for showcasing hero unit style content.
group: components
---
---
layout: docs
title: List group
+description: Learn about Bootstrap's list group component for rendering series of related content.
group: components
---
---
layout: docs
title: Modal
+description: Learn how to use Bootstrap's modals to add dialog prompts to your site.
group: components
---
---
layout: docs
title: Navbar
+description: Documentation and examples for Bootstrap's powerful, responsive navigation header.
group: components
---
---
layout: docs
title: Navs
+description: Documentation and examples for how to use Bootstrap's included navigation components.
group: components
---
---
layout: docs
title: Pagination
+description: Documentation and examples for showing pagination links.
group: components
---
---
layout: docs
title: Popovers
+description: Documentation and examples for adding Bootstrap popovers to your site.
group: components
---
---
layout: docs
title: Progress
+description: Documentation and examples for using Bootstrap progress bars.
group: components
---
---
layout: docs
title: Scrollspy
+description: Documentation and examples for the scrollspy plugin with Bootstrap's navigation components.
group: components
---
---
layout: docs
title: Tags
+description: Documentation and examples for tags, our small label-badge component.
group: components
---
---
layout: docs
title: Tooltips
+description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript.
group: components
---
---
layout: docs
title: Code
+description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.
group: content
---
---
layout: docs
title: Figures
+description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
group: content
---
-Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
+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.
---
layout: docs
title: Images
+description: Documentation and examples for styling images with Bootstrap.
group: content
---
---
layout: docs
title: Reboot
+description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css.
group: content
redirect_from: "/content/"
---
---
layout: docs
title: Tables
+description: Documentation and examples for styling tables with Bootstrap.
group: content
---
---
layout: docs
title: Typography
+description: Documentation and examples for Bootstrap typography, including global settings, body text, lists, and more.
group: content
---
---
layout: docs
title: Accessibility
+description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology.
group: getting-started
---
---
layout: docs
title: Best practices
+description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap.
group: getting-started
---
---
layout: docs
title: Browsers and devices
+description: Learn which browsers and devices are supported by Bootstrap.
group: getting-started
---
---
layout: docs
title: Build tools
+description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more.
group: getting-started
---
---
layout: docs
title: Contents
+description: Learn about what's included in Bootstrap's precompiled and source code directories.
group: getting-started
---
---
layout: docs
title: Download
+description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager.
group: getting-started
---
---
layout: docs
title: Flexbox
+description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet.
group: getting-started
---
---
layout: docs
title: Introduction
+description: Get started with Bootstrap using the Bootstrap CDN and a template starter page.
group: getting-started
redirect_from: "/getting-started/"
---
---
layout: docs
title: JavaScript
+description: Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more.
group: getting-started
---
---
layout: docs
title: Customization options
+description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
group: getting-started
---
---
layout: home
-title: Bootstrap · The world's most popular mobile-first and responsive front-end framework.
---
<main class="bd-masthead" id="content">
---
layout: docs
title: Flexbox grid system
+description: Documentation and examples for using Bootstrap's optional flexbox grid system.
group: layout
---
---
layout: docs
title: Grid system
+description: Documentation and examples for using Bootstrap's powerful, responsive, and mobile-first grid system.
group: layout
---
---
layout: docs
title: Media object
+description: Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
group: layout
---
---
layout: docs
title: Overview
+description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
group: layout
redirect_from: "/layout/"
---
---
layout: docs
title: Responsive utilities
+description: Use responsive display utility classes for showing and hiding content by device, via media query.
group: layout
---