- B -

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

+

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.

Download Bootstrap

@@ -19,25 +18,16 @@ title: Bootstrap · The world's most popular mobile-first and responsive f

Easy to get started.

-

Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.

- - +

Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.

Managed dependencies

Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.

- View install methods + View install methods

-

Bootstrap CDN

When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.

@@ -50,8 +40,8 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
-

More customized builds of Bootstrap's CSS and JS are also available.

- More download options +

Looking for something simpler? Customized builds of Bootstrap's CSS and JS are also available.

+ More download options
@@ -60,8 +50,6 @@ title: Bootstrap · The world's most popular mobile-first and responsive f

Designed for everyone, everywhere.

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

-
-
Sass support @@ -82,8 +70,8 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
-

Bootstrap is open source. It's hosted, developed, and maintained on GitHub.

- View the GitHub project +

Bootstrap is open source! It's hosted, developed, and maintained on GitHub by folks like you.

+ View the GitHub project
@@ -92,8 +80,6 @@ title: Bootstrap · The world's most popular mobile-first and responsive f

Built with Bootstrap.

Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.

-
-
{% for showcase in site.data.showcase %}
@@ -106,7 +92,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
-

We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.

- Explore the Expo +

We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.

+ Explore the Expo
diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 843e6d149..cd848cf98 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -1,5 +1,5 @@ --- -layout: page +layout: docs title: Grid system group: layout --- diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index ea2f07225..602bd210a 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -1,5 +1,5 @@ --- -layout: page +layout: docs title: Media object group: layout --- diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 7ac3750b5..c3770f95a 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -1,5 +1,5 @@ --- -layout: page +layout: docs title: Overview group: layout --- diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 35c6cc13b..f52b52db5 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -1,5 +1,5 @@ --- -layout: page +layout: docs title: Responsive utilities group: layout --- diff --git a/docs/layout/scaffolding.md b/docs/layout/scaffolding.md index 34ef4d74e..ea5537ef4 100644 --- a/docs/layout/scaffolding.md +++ b/docs/layout/scaffolding.md @@ -1,5 +1,5 @@ --- -layout: page +layout: docs title: Scaffolding group: layout --- diff --git a/docs/migration.md b/docs/migration.md index 3671c8338..5ccba1e0d 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -1,5 +1,5 @@ --- -layout: page +layout: docs title: Migrating to v4 group: migration --- diff --git a/scss/_nav.scss b/scss/_nav.scss index ebfb14b87..c5ccc9336 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -2,34 +2,20 @@ // Navs // -------------------------------------------------- - -// -// Base styles -// - .nav { padding-left: 0; margin-bottom: 0; list-style: none; - @include clearfix(); -} - -.nav-item { - position: relative; - display: inline-block; } .nav-link { display: inline-block; - padding: $nav-link-padding; - line-height: 1; @include hover-focus { text-decoration: none; - background-color: $nav-link-hover-bg; } - // Disabled state sets text to gray and nukes hover/tab effects + // Disabled state lightens text and removes hover/tab effects .disabled > &, &.disabled { color: $nav-disabled-link-color; @@ -43,6 +29,53 @@ } +// Nav inline + +.nav-inline { + .nav-link + .nav-link { + margin-left: 1rem; + } +} + + +// +// Base styles +// + +// .nav { +// padding-left: 0; +// margin-bottom: 0; +// list-style: none; +// @include clearfix(); +// } +// +// .nav-item { +// position: relative; +// display: inline-block; +// } +// +// .nav-link { +// display: inline-block; +// +// @include hover-focus { +// text-decoration: none; +// background-color: $nav-link-hover-bg; +// } +// +// // Disabled state sets text to gray and nukes hover/tab effects +// .disabled > &, +// &.disabled { +// color: $nav-disabled-link-color; +// +// @include plain-hover-focus { +// color: $nav-disabled-link-hover-color; +// cursor: $cursor-disabled; +// background-color: transparent; +// } +// } +// } + + // // Tabs // @@ -62,6 +95,7 @@ .nav-link { display: block; + padding: $nav-link-padding; border: 1px solid transparent; @include border-radius($border-radius $border-radius 0 0); @@ -107,6 +141,7 @@ .nav-link { display: block; + padding: $nav-link-padding; @include border-radius($nav-pills-border-radius); } diff --git a/scss/_variables.scss b/scss/_variables.scss index 21f17f944..079cdca6e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -115,7 +115,7 @@ $container-max-widths: ( // Set the number of columns and specify the width of the gutters. $grid-columns: 12 !default; -$grid-gutter-width: 1.5rem !default; +$grid-gutter-width: 1.875rem !default; // 30px // Typography