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.
-
-
@@ -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