12 | {{- range (index $.Site.Data "core-team") }}
13 |
14 | 
15 |
16 | {{ .name }} @{{ .user }}
17 |
18 |
19 | {{ end -}}
20 |
21 | {{< /team.inline >}}
22 |
23 | Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
24 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/_mixins.scss:
--------------------------------------------------------------------------------
1 | // Toggles
2 | //
3 | // Used in conjunction with global variables to enable certain theme features.
4 |
5 | // Vendor
6 | @import "vendor/rfs";
7 |
8 | // Deprecate
9 | @import "mixins/deprecate";
10 |
11 | // Helpers
12 | @import "mixins/breakpoints";
13 | @import "mixins/image";
14 | @import "mixins/resize";
15 | @import "mixins/screen-reader";
16 | @import "mixins/reset-text";
17 | @import "mixins/text-emphasis";
18 | @import "mixins/text-truncate";
19 |
20 | // Utilities
21 | @import "mixins/utilities";
22 |
23 | // Components
24 | @import "mixins/alert";
25 | @import "mixins/buttons";
26 | @import "mixins/caret";
27 | @import "mixins/pagination";
28 | @import "mixins/lists";
29 | @import "mixins/list-group";
30 | @import "mixins/nav-divider";
31 | @import "mixins/forms";
32 | @import "mixins/table-row";
33 |
34 | // Skins
35 | @import "mixins/background-variant";
36 | @import "mixins/border-radius";
37 | @import "mixins/box-shadow";
38 | @import "mixins/gradients";
39 | @import "mixins/transition";
40 |
41 | // Layout
42 | @import "mixins/clearfix";
43 | @import "mixins/grid-framework";
44 | @import "mixins/grid";
45 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/static/docs/4.3/assets/scss/_masthead.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | .bd-masthead {
4 | position: relative;
5 | padding: 3rem ($grid-gutter-width / 2);
6 | // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
7 |
8 | h1 {
9 | @include font-size(4rem);
10 | line-height: 1;
11 | }
12 |
13 | .btn {
14 | padding: .8rem 2rem;
15 | font-weight: 600;
16 | @include font-size(1.25rem);
17 | }
18 |
19 | .carbonad {
20 | margin-top: 0 !important;
21 | margin-bottom: -3rem !important;
22 | }
23 |
24 | @include media-breakpoint-up(sm) {
25 | padding-top: 5rem;
26 | padding-bottom: 5rem;
27 |
28 | .carbonad {
29 | margin-bottom: 0 !important;
30 | }
31 | }
32 |
33 | @include media-breakpoint-up(md) {
34 | .carbonad {
35 | margin-top: 3rem !important;
36 | }
37 | }
38 | }
39 |
40 | .half-rule {
41 | width: 6rem;
42 | margin: 2.5rem 0;
43 | }
44 |
45 | .masthead-followup {
46 | .bd-clipboard { display: none; }
47 |
48 | .highlight {
49 | padding: .5rem 0;
50 | background-color: transparent;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/utilities/_api.scss:
--------------------------------------------------------------------------------
1 | // Loop over each breakpoint
2 | @each $breakpoint in map-keys($grid-breakpoints) {
3 |
4 | // Generate media query if needed
5 | @include media-breakpoint-up($breakpoint) {
6 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
7 |
8 | // Loop over each utility property
9 | @each $key, $utility in $utilities {
10 | // The utility can be disabled with `false`, thus check if the utility is a map first
11 | // Only proceed if responsive media queries are enabled or if it's the base media query
12 | @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
13 | @include generate-utility($utility, $infix);
14 | }
15 | }
16 | }
17 | }
18 |
19 |
20 | // Print utilities
21 | @media print {
22 | @each $key, $utility in $utilities {
23 | // The utility can be disabled with `false`, thus check if the utility is a map first
24 | // Then check if the utility needs print styles
25 | @if type-of($utility) == "map" and map-get($utility, print) == true {
26 | @include generate-utility($utility, "-print");
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/utilities/overflow.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Overflow
4 | description: Use these shorthand utilities for quickly configuring how content overflows an element.
5 | group: utilities
6 | ---
7 |
8 | Barebones `overflow` functionality is provided for two values by default, and they are not responsive.
9 |
10 |
15 |
16 | {{ .name }} @{{ .user }}
17 |
18 |
19 | {{ end -}}
20 |
11 |
18 |
19 | {{< highlight html >}}
20 |
12 | This is an example of using
14 | .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
13 |
15 | This is an example of using
17 | .overflow-hidden on an element with set width and height dimensions.
16 | ...
21 | ...
22 | {{< /highlight >}}
23 |
24 | Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
25 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/_toasts.scss:
--------------------------------------------------------------------------------
1 | .toast {
2 | max-width: $toast-max-width;
3 | overflow: hidden; // cheap rounded corners on nested items
4 | @include font-size($toast-font-size);
5 | color: $toast-color;
6 | background-color: $toast-background-color;
7 | background-clip: padding-box;
8 | border: $toast-border-width solid $toast-border-color;
9 | box-shadow: $toast-box-shadow;
10 | backdrop-filter: blur(10px);
11 | opacity: 0;
12 | @include border-radius($toast-border-radius);
13 |
14 | &:not(:last-child) {
15 | margin-bottom: $toast-padding-x;
16 | }
17 |
18 | &.showing {
19 | opacity: 1;
20 | }
21 |
22 | &.show {
23 | display: block;
24 | opacity: 1;
25 | }
26 |
27 | &.hide {
28 | display: none;
29 | }
30 | }
31 |
32 | .toast-header {
33 | display: flex;
34 | align-items: center;
35 | padding: $toast-padding-y $toast-padding-x;
36 | color: $toast-header-color;
37 | background-color: $toast-header-background-color;
38 | background-clip: padding-box;
39 | border-bottom: $toast-border-width solid $toast-header-border-color;
40 | }
41 |
42 | .toast-body {
43 | padding: $toast-padding-x; // apply to both vertical and horizontal
44 | }
45 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/helpers/clearfix.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Clearfix
4 | description: Quickly and easily clear floated content within a container by adding a clearfix utility.
5 | group: helpers
6 | aliases: "/docs/4.3/helpers/"
7 | ---
8 |
9 | Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
10 |
11 | {{< highlight html >}}
12 | ...
13 | {{< /highlight >}}
14 |
15 | {{< highlight scss >}}
16 | // Mixin itself
17 | @mixin clearfix() {
18 | &::after {
19 | display: block;
20 | content: "";
21 | clear: both;
22 | }
23 | }
24 |
25 | // Usage as a mixin
26 | .element {
27 | @include clearfix;
28 | }
29 | {{< /highlight >}}
30 |
31 | The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
32 |
33 | {{< example >}}
34 |
35 |
36 |
37 |
38 | {{< /example >}}
39 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/layouts/partials/scripts.html:
--------------------------------------------------------------------------------
1 | {{ if eq (getenv "HUGO_ENV") "production" -}}
2 |
3 | {{ else -}}
4 |
5 | {{- end }}
6 |
7 | {{ if eq .Page.Layout "docs" -}}
8 |
9 | {{- end }}
10 |
11 | {{- if eq (getenv "HUGO_ENV") "production" -}}
12 |
13 | {{- else -}}
14 |
15 |
16 |
17 |
18 |
19 | {{- end -}}
20 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/layouts/shortcodes/list-examples.html:
--------------------------------------------------------------------------------
1 | {{ range $entry := $.Site.Data.examples -}}
2 | {{ $entry.category }}
3 |{{ $entry.description }}
4 | 5 | {{ range $i, $example := $entry.examples -}} 6 | {{- $len := len $entry.examples -}} 7 | {{ if (eq $i 0) }}{{ end }}
8 |
{{ end }}
18 | {{ end -}}
19 | {{ end -}}
20 |
--------------------------------------------------------------------------------
/bootstrap4-source/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2011-2019 Twitter, Inc.
4 | Copyright (c) 2011-2019 The Bootstrap Authors
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy
7 | of this software and associated documentation files (the "Software"), to deal
8 | in the Software without restriction, including without limitation the rights
9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in
14 | all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22 | THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/data/docs-versions.yml:
--------------------------------------------------------------------------------
1 | - group: v1.x
2 | baseurl: "https://getbootstrap.com"
3 | description: "Every minor and patch release from v1 is listed below."
4 | versions:
5 | - v: "1.0.0"
6 | - v: "1.1.0"
7 | - v: "1.1.1"
8 | - v: "1.2.0"
9 | - v: "1.3.0"
10 | - v: "1.4.0"
11 |
12 | - group: v2.x
13 | baseurl: "https://getbootstrap.com"
14 | description: "Every minor and patch release from v2 is listed below."
15 | versions:
16 | - v: "2.0.0"
17 | - v: "2.0.1"
18 | - v: "2.0.2"
19 | - v: "2.0.3"
20 | - v: "2.0.4"
21 | - v: "2.1.0"
22 | - v: "2.1.1"
23 | - v: "2.2.0"
24 | - v: "2.2.1"
25 | - v: "2.2.2"
26 | - v: "2.3.0"
27 | - v: "2.3.1"
28 | - v: "2.3.2"
29 |
30 | - group: v3.x
31 | baseurl: "https://getbootstrap.com/docs"
32 | description: "Our previous major release and its minor versions. Last update was v3.4.1."
33 | versions:
34 | - v: "3.3"
35 | - v: "3.4"
36 |
37 | - group: v4.x
38 | baseurl: "https://getbootstrap.com/docs"
39 | description: "Current major release with two minor releases. Last update was v4.3.1."
40 | versions:
41 | - v: "4.0"
42 | - v: "4.1"
43 | - v: "4.2"
44 | - v: "4.3"
45 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/_code.scss:
--------------------------------------------------------------------------------
1 | // Inline code
2 | code {
3 | @include font-size($code-font-size);
4 | color: $code-color;
5 | word-break: break-word;
6 |
7 | // Streamline the style when inside anchors to avoid broken underline and more
8 | a > & {
9 | color: inherit;
10 | }
11 | }
12 |
13 | // User input typically entered via keyboard
14 | kbd {
15 | padding: $kbd-padding-y $kbd-padding-x;
16 | @include font-size($kbd-font-size);
17 | color: $kbd-color;
18 | background-color: $kbd-bg;
19 | @include border-radius($border-radius-sm);
20 | @include box-shadow($kbd-box-shadow);
21 |
22 | kbd {
23 | padding: 0;
24 | @include font-size(100%);
25 | font-weight: $nested-kbd-font-weight;
26 | @include box-shadow(none);
27 | }
28 | }
29 |
30 | // Blocks of code
31 | pre {
32 | display: block;
33 | @include font-size($code-font-size);
34 | color: $pre-color;
35 |
36 | // Account for some code outputs that place code tags in pre tags
37 | code {
38 | @include font-size(inherit);
39 | color: inherit;
40 | word-break: normal;
41 | }
42 | }
43 |
44 | // Enable scrollable blocks of code
45 | .pre-scrollable {
46 | max-height: $pre-scrollable-max-height;
47 | overflow-y: scroll;
48 | }
49 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/examples/dashboard/dashboard.js:
--------------------------------------------------------------------------------
1 | /* globals Chart:false, feather:false */
2 |
3 | (function () {
4 | 'use strict'
5 |
6 | feather.replace()
7 |
8 | // Graphs
9 | var ctx = document.getElementById('myChart')
10 | // eslint-disable-next-line no-unused-vars
11 | var myChart = new Chart(ctx, {
12 | type: 'line',
13 | data: {
14 | labels: [
15 | 'Sunday',
16 | 'Monday',
17 | 'Tuesday',
18 | 'Wednesday',
19 | 'Thursday',
20 | 'Friday',
21 | 'Saturday'
22 | ],
23 | datasets: [{
24 | data: [
25 | 15339,
26 | 21345,
27 | 18483,
28 | 24003,
29 | 23489,
30 | 24092,
31 | 12034
32 | ],
33 | lineTension: 0,
34 | backgroundColor: 'transparent',
35 | borderColor: '#007bff',
36 | borderWidth: 4,
37 | pointBackgroundColor: '#007bff'
38 | }]
39 | },
40 | options: {
41 | scales: {
42 | yAxes: [{
43 | ticks: {
44 | beginAtZero: false
45 | }
46 | }]
47 | },
48 | legend: {
49 | display: false
50 | }
51 | }
52 | })
53 | })()
54 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/_grid.scss:
--------------------------------------------------------------------------------
1 | // Container widths
2 | //
3 | // Set the container width, and override it for fixed navbars in media queries.
4 |
5 | @if $enable-grid-classes {
6 | .container {
7 | @include make-container();
8 | @include make-container-max-widths();
9 | }
10 | }
11 |
12 | // Fluid container
13 | //
14 | // Utilizes the mixin meant for fixed width containers, but with 100% width for
15 | // fluid, full width layouts.
16 |
17 | @if $enable-grid-classes {
18 | .container-fluid {
19 | @include make-container();
20 | }
21 | }
22 |
23 | // Row
24 | //
25 | // Rows contain and clear the floats of your columns.
26 |
27 | @if $enable-grid-classes {
28 | .row {
29 | @include make-row();
30 | }
31 |
32 | // Remove the negative margin from default .row, then the horizontal padding
33 | // from all immediate children columns (to prevent runaway style inheritance).
34 | .no-gutters {
35 | margin-right: 0;
36 | margin-left: 0;
37 |
38 | > .col,
39 | > [class*="col-"] {
40 | padding-right: 0;
41 | padding-left: 0;
42 | }
43 | }
44 | }
45 |
46 | // Columns
47 | //
48 | // Common styles for small and large grid columns
49 |
50 | @if $enable-grid-classes {
51 | @include make-grid-columns();
52 | }
53 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/extend/icons.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Icons
4 | description: Guidance and suggestions for using external icon libraries with Bootstrap.
5 | group: extend
6 | ---
7 |
8 | Bootstrap doesn't include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
9 |
10 | ## Preferred
11 |
12 | We've tested and used these icon sets ourselves.
13 |
14 | - [Font Awesome](https://fontawesome.com/)
15 | - [Iconic](https://github.com/iconic/open-iconic)
16 | - [Octicons](https://octicons.github.com/)
17 |
18 | ## More options
19 |
20 | While we haven't tried these out, they do look promising and provide multiple formats—including SVG.
21 |
22 | - [Bytesize](https://github.com/danklammer/bytesize-icons)
23 | - [Google Material icons](https://material.io/tools/icons/)
24 | - [Ionicons](https://ionicons.com/)
25 | - [Feather](https://feathericons.com/)
26 | - [Dripicons](http://demo.amitjakhu.com/dripicons/)
27 | - [Ikons](http://ikons.piotrkwiatkowski.co.uk/)
28 | - [Glyph](https://glyph.smarticons.co/)
29 | - [Icons8](https://icons8.com/)
30 | - [icofont](https://icofont.com/)
31 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/mixins/_utilities.scss:
--------------------------------------------------------------------------------
1 | // Utility generator
2 | // Used to generate utilities & print utilities
3 | @mixin generate-utility($utility, $infix) {
4 | $values: map-get($utility, values);
5 |
6 | // If the values are a list or string, convert it into a map
7 | @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
8 | $values: zip($values, $values);
9 | }
10 |
11 | @each $key, $value in $values {
12 | $properties: map-get($utility, property);
13 |
14 | // Multiple properties are possible, for example with vertical or horizontal margins or paddings
15 | @if type-of($properties) == "string" {
16 | $properties: append((), $properties);
17 | }
18 |
19 | // Use custom class if present
20 | $property-class: map-get($utility, class);
21 | $property-class: if($property-class, $property-class, nth($properties, 1));
22 |
23 | // Don't prefix if value key is null (eg. with shadow class)
24 | $property-class-modifier: if($key, "-" + $key, "");
25 |
26 | .#{$property-class + $infix + $property-class-modifier} {
27 | @each $property in $properties {
28 | // stylelint-disable-next-line declaration-no-important
29 | #{$property}: $value !important;
30 | }
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/_progress.scss:
--------------------------------------------------------------------------------
1 | // Disable animation if transitions are disabled
2 | @if $enable-transitions {
3 | @keyframes progress-bar-stripes {
4 | 0% { background-position-x: $progress-height; }
5 | }
6 | }
7 |
8 | .progress {
9 | display: flex;
10 | height: $progress-height;
11 | overflow: hidden; // force rounded corners by cropping it
12 | @include font-size($progress-font-size);
13 | background-color: $progress-bg;
14 | @include border-radius($progress-border-radius);
15 | @include box-shadow($progress-box-shadow);
16 | }
17 |
18 | .progress-bar {
19 | display: flex;
20 | flex-direction: column;
21 | justify-content: center;
22 | color: $progress-bar-color;
23 | text-align: center;
24 | white-space: nowrap;
25 | background-color: $progress-bar-bg;
26 | @include transition($progress-bar-transition);
27 | }
28 |
29 | .progress-bar-striped {
30 | @include gradient-striped();
31 | background-size: $progress-height $progress-height;
32 | }
33 |
34 | @if $enable-transitions {
35 | .progress-bar-animated {
36 | animation: progress-bar-stripes $progress-bar-animation-timing;
37 |
38 | @if $enable-prefers-reduced-motion-media-query {
39 | @media (prefers-reduced-motion: reduce) {
40 | animation: none;
41 | }
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/content/figures.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Figures
4 | description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
5 | group: content
6 | ---
7 |
8 | Anytime you need to display a piece of content—like an image with an optional caption, consider using a `
9 |
10 | 
13 |
17 | {{ if (eq (add $i 1) $len) }}
13 | {{ $example.name }}
14 | 15 |{{ $example.description }}
16 |`.
9 |
10 | Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `
` and `` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `![]()
` to make it responsive.
11 |
12 | {{< example >}}
13 |
14 | {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
15 | A caption for the above image.
16 |
17 | {{< /example >}}
18 |
19 | Aligning the figure's caption is easy with our [text utilities]({{< docsref "/utilities/text#text-alignment" >}}).
20 |
21 | {{< example >}}
22 |
23 | {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
24 | A caption for the above image.
25 |
26 | {{< /example >}}
27 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/_spinners.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Rotating border
3 | //
4 |
5 | @keyframes spinner-border {
6 | to { transform: rotate(360deg); }
7 | }
8 |
9 | .spinner-border {
10 | display: inline-block;
11 | width: $spinner-width;
12 | height: $spinner-height;
13 | vertical-align: text-bottom;
14 | border: $spinner-border-width solid currentColor;
15 | border-right-color: transparent;
16 | // stylelint-disable-next-line property-blacklist
17 | border-radius: 50%;
18 | animation: spinner-border .75s linear infinite;
19 | }
20 |
21 | .spinner-border-sm {
22 | width: $spinner-width-sm;
23 | height: $spinner-height-sm;
24 | border-width: $spinner-border-width-sm;
25 | }
26 |
27 | //
28 | // Growing circle
29 | //
30 |
31 | @keyframes spinner-grow {
32 | 0% {
33 | transform: scale(0);
34 | }
35 | 50% {
36 | opacity: 1;
37 | }
38 | }
39 |
40 | .spinner-grow {
41 | display: inline-block;
42 | width: $spinner-width;
43 | height: $spinner-height;
44 | vertical-align: text-bottom;
45 | background-color: currentColor;
46 | // stylelint-disable-next-line property-blacklist
47 | border-radius: 50%;
48 | opacity: 0;
49 | animation: spinner-grow .75s linear infinite;
50 | }
51 |
52 | .spinner-grow-sm {
53 | width: $spinner-width-sm;
54 | height: $spinner-height-sm;
55 | }
56 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/examples/cover/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: examples
3 | title: Cover Template
4 | extra_css:
5 | - "cover.css"
6 | body_class: "text-center"
7 | include_js: false
8 | ---
9 |
10 | ![]()
`s.
4 | // We previously tried the "images are responsive by default" approach in Bootstrap v2,
5 | // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
6 | // which weren't expecting the images within themselves to be involuntarily resized.
7 | // See also https://github.com/twbs/bootstrap/issues/18178
8 | .img-fluid {
9 | @include img-fluid;
10 | }
11 |
12 |
13 | // Image thumbnails
14 | .img-thumbnail {
15 | padding: $thumbnail-padding;
16 | background-color: $thumbnail-bg;
17 | border: $thumbnail-border-width solid $thumbnail-border-color;
18 | @include border-radius($thumbnail-border-radius);
19 | @include box-shadow($thumbnail-box-shadow);
20 |
21 | // Keep them at most 100% wide
22 | @include img-fluid;
23 | }
24 |
25 | //
26 | // Figures
27 | //
28 |
29 | .figure {
30 | // Ensures the caption's text aligns with the image.
31 | display: inline-block;
32 | }
33 |
34 | .figure-img {
35 | margin-bottom: $spacer / 2;
36 | line-height: 1;
37 | }
38 |
39 | .figure-caption {
40 | @include font-size($figure-caption-font-size);
41 | color: $figure-caption-color;
42 | }
43 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/bootstrap.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v4.3.1 (https://getbootstrap.com/)
3 | * Copyright 2011-2019 The Bootstrap Authors
4 | * Copyright 2011-2019 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | */
7 |
8 | // Configuration
9 |
10 | @import "functions";
11 | @import "variables";
12 | @import "mixins";
13 | @import "utilities";
14 |
15 |
16 | // Layout & components
17 |
18 | @import "root";
19 | @import "reboot";
20 | @import "type";
21 | @import "images";
22 | @import "code";
23 | @import "grid";
24 | @import "tables";
25 | @import "forms";
26 | @import "buttons";
27 | @import "transitions";
28 | @import "dropdown";
29 | @import "button-group";
30 | @import "input-group";
31 | @import "custom-forms";
32 | @import "nav";
33 | @import "navbar";
34 | @import "card";
35 | @import "breadcrumb";
36 | @import "pagination";
37 | @import "badge";
38 | @import "alert";
39 | @import "progress";
40 | @import "list-group";
41 | @import "close";
42 | @import "toasts";
43 | @import "modal";
44 | @import "tooltip";
45 | @import "popover";
46 | @import "carousel";
47 | @import "spinners";
48 |
49 |
50 | // Helpers
51 |
52 | @import "helpers";
53 |
54 |
55 | // Utilities
56 |
57 | @import "utilities/api";
58 | @import "utilities/sizing";
59 | @import "utilities/text";
60 | @import "utilities/visibility";
61 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/helpers/position.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Position
4 | description: Use these helpers for quickly configuring the position of an element.
5 | group: helpers
6 | toc: true
7 | ---
8 |
9 | ## Fixed top
10 |
11 | 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 additional CSS.
12 |
13 | {{< highlight html >}}
14 |
11 |
12 |
21 |
22 |
23 |
29 |
30 |
35 |
36 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/layouts/partials/icons/slack.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/_images.scss:
--------------------------------------------------------------------------------
1 | // Responsive images (ensure images don't scale beyond their parents)
2 | //
3 | // This is purposefully opt-in via an explicit class rather than being the default for all `
13 |
20 | Cover
14 | 19 |Cover your page.
24 |Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.
25 |26 | Learn more 27 |
28 |...
15 | {{< /highlight >}}
16 |
17 | ## Fixed bottom
18 |
19 | Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
20 |
21 | {{< highlight html >}}
22 | ...
23 | {{< /highlight >}}
24 |
25 | ## Sticky top
26 |
27 | Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
28 |
29 | **IE11 and IE10 will render `position: sticky` as `position: relative`.** As such, we wrap the styles in a `@supports` query, limiting the stickiness to only browsers that can render it properly.
30 |
31 | {{< highlight html >}}
32 | ...
33 | {{< /highlight >}}
34 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/static/docs/4.3/assets/img/favicons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/_alert.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Base styles
3 | //
4 |
5 | .alert {
6 | position: relative;
7 | padding: $alert-padding-y $alert-padding-x;
8 | margin-bottom: $alert-margin-bottom;
9 | border: $alert-border-width solid transparent;
10 | @include border-radius($alert-border-radius);
11 | }
12 |
13 | // Headings for larger alerts
14 | .alert-heading {
15 | // Specified to prevent conflicts of changing $headings-color
16 | color: inherit;
17 | }
18 |
19 | // Provide class for links that match alerts
20 | .alert-link {
21 | font-weight: $alert-link-font-weight;
22 | }
23 |
24 |
25 | // Dismissible alerts
26 | //
27 | // Expand the right padding and account for the close button's positioning.
28 |
29 | .alert-dismissible {
30 | padding-right: $close-font-size + $alert-padding-x * 2;
31 |
32 | // Adjust close link position
33 | .close {
34 | position: absolute;
35 | top: 0;
36 | right: 0;
37 | padding: $alert-padding-y $alert-padding-x;
38 | color: inherit;
39 | }
40 | }
41 |
42 |
43 | // Alternate styles
44 | //
45 | // Generate contextual modifier classes for colorizing the alert.
46 |
47 | @each $color, $value in $theme-colors {
48 | .alert-#{$color} {
49 | @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/bootstrap4-email-css.scss:
--------------------------------------------------------------------------------
1 | // /*!
2 | // * Bootstrap v4.3.1 (https://getbootstrap.com/)
3 | // * Copyright 2011-2019 The Bootstrap Authors
4 | // * Copyright 2011-2019 Twitter, Inc.
5 | // * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | // */
7 |
8 | // Configuration
9 |
10 | @import "functions";
11 | @import "variables-email";
12 | @import "mixins";
13 | @import "utilities";
14 |
15 |
16 | // Layout & components
17 |
18 | @import "root";
19 | @import "reboot";
20 | @import "type";
21 | @import "images";
22 | @import "code";
23 | @import "grid";
24 | // @import "tables";
25 | // @import "forms";
26 | @import "buttons";
27 | @import "transitions";
28 | // @import "dropdown";
29 | @import "button-group";
30 | // @import "input-group";
31 | // @import "custom-forms";
32 | // @import "nav";
33 | // @import "navbar";
34 | @import "card";
35 | @import "breadcrumb";
36 | // @import "pagination";
37 | @import "badge";
38 | @import "alert";
39 | // @import "progress";
40 | @import "list-group";
41 | @import "close";
42 | // @import "toasts";
43 | // @import "modal";
44 | // @import "tooltip";
45 | // @import "popover";
46 | // @import "carousel";
47 | // @import "spinners";
48 |
49 |
50 | // Helpers
51 |
52 | @import "helpers";
53 |
54 |
55 | // Utilities
56 |
57 | @import "utilities/api";
58 | @import "utilities/sizing";
59 | @import "utilities/text";
60 | @import "utilities/visibility";
61 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/layouts/partials/social.html:
--------------------------------------------------------------------------------
1 | {{ "" | safeHTML }}
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | {{ "" | safeHTML }}
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/bootstrap4-source/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "parser": "babel-eslint",
4 | "extends": [
5 | "plugin:import/errors",
6 | "plugin:import/warnings",
7 | "plugin:unicorn/recommended",
8 | "xo/esnext",
9 | "xo/browser"
10 | ],
11 | "rules": {
12 | "capitalized-comments": "off",
13 | "indent": [
14 | "error",
15 | 2,
16 | {
17 | "MemberExpression": "off",
18 | "SwitchCase": 1
19 | }
20 | ],
21 | "max-params": [
22 | "warn",
23 | 5
24 | ],
25 | "multiline-ternary": [
26 | "error",
27 | "always-multiline"
28 | ],
29 | "new-cap": "off",
30 | "no-mixed-operators": "off",
31 | "object-curly-spacing": [
32 | "error",
33 | "always"
34 | ],
35 | "prefer-destructuring": [
36 | "error",
37 | {
38 | "object": true,
39 | "array": false
40 | }
41 | ],
42 | "semi": [
43 | "error",
44 | "never"
45 | ],
46 | "unicorn/explicit-length-check": "off",
47 | "unicorn/import-index": "off",
48 | "unicorn/no-for-loop": "off",
49 | "unicorn/no-unused-properties": "error",
50 | "unicorn/prefer-includes": "off",
51 | "unicorn/prefer-node-append": "off",
52 | "unicorn/prefer-node-remove": "off",
53 | "unicorn/prefer-query-selector": "off",
54 | "unicorn/prefer-text-content": "off",
55 | "unicorn/prevent-abbreviations": "off"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/examples/floating-labels/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: examples
3 | title: Floating labels example
4 | extra_css:
5 | - "floating-labels.css"
6 | include_js: false
7 | ---
8 |
9 |
34 |
--------------------------------------------------------------------------------
/bootstrap4-source/build/rollup.config.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const path = require('path')
4 | const babel = require('rollup-plugin-babel')
5 | const resolve = require('rollup-plugin-node-resolve')
6 | const banner = require('./banner.js')
7 |
8 | const BUNDLE = process.env.BUNDLE === 'true'
9 | const ESM = process.env.ESM === 'true'
10 |
11 | let fileDest = `bootstrap${ESM ? '.esm' : ''}`
12 | const external = ['popper.js']
13 | const plugins = [
14 | babel({
15 | // Only transpile our source code
16 | exclude: 'node_modules/**',
17 | // Include only required helpers
18 | externalHelpersWhitelist: [
19 | 'defineProperties',
20 | 'createClass',
21 | 'inheritsLoose',
22 | 'defineProperty',
23 | 'objectSpread'
24 | ]
25 | })
26 | ]
27 | const globals = {
28 | 'popper.js': 'Popper'
29 | }
30 |
31 | if (BUNDLE) {
32 | fileDest += '.bundle'
33 | // Remove last entry in external array to bundle Popper
34 | external.pop()
35 | delete globals['popper.js']
36 | plugins.push(resolve())
37 | }
38 |
39 | const rollupConfig = {
40 | input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),
41 | output: {
42 | banner,
43 | file: path.resolve(__dirname, `../dist/js/${fileDest}.js`),
44 | format: ESM ? 'esm' : 'umd',
45 | globals
46 | },
47 | external,
48 | plugins
49 | }
50 |
51 | if (!ESM) {
52 | rollupConfig.output.name = 'bootstrap'
53 | }
54 |
55 | module.exports = rollupConfig
56 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/examples/product/product.css:
--------------------------------------------------------------------------------
1 | .container {
2 | max-width: 960px;
3 | }
4 |
5 | /*
6 | * Custom translucent site header
7 | */
8 |
9 | .site-header {
10 | background-color: rgba(0, 0, 0, .85);
11 | -webkit-backdrop-filter: saturate(180%) blur(20px);
12 | backdrop-filter: saturate(180%) blur(20px);
13 | }
14 | .site-header a {
15 | color: #999;
16 | transition: ease-in-out color .15s;
17 | }
18 | .site-header a:hover {
19 | color: #fff;
20 | text-decoration: none;
21 | }
22 |
23 | /*
24 | * Dummy devices (replace them with your own or something else entirely!)
25 | */
26 |
27 | .product-device {
28 | position: absolute;
29 | right: 10%;
30 | bottom: -30%;
31 | width: 300px;
32 | height: 540px;
33 | background-color: #333;
34 | border-radius: 21px;
35 | -webkit-transform: rotate(30deg);
36 | transform: rotate(30deg);
37 | }
38 |
39 | .product-device::before {
40 | position: absolute;
41 | top: 10%;
42 | right: 10px;
43 | bottom: 10%;
44 | left: 10px;
45 | content: "";
46 | background-color: rgba(255, 255, 255, .1);
47 | border-radius: 5px;
48 | }
49 |
50 | .product-device-2 {
51 | top: -25%;
52 | right: auto;
53 | bottom: 0;
54 | left: 5%;
55 | background-color: #e5e5e5;
56 | }
57 |
58 |
59 | /*
60 | * Extra utilities
61 | */
62 |
63 | .flex-equal > * {
64 | flex: 1;
65 | }
66 | @media (min-width: 768px) {
67 | .flex-md-equal > * {
68 | flex: 1;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/_breadcrumb.scss:
--------------------------------------------------------------------------------
1 | .breadcrumb {
2 | display: flex;
3 | flex-wrap: wrap;
4 | padding: $breadcrumb-padding-y $breadcrumb-padding-x;
5 | margin-bottom: $breadcrumb-margin-bottom;
6 | list-style: none;
7 | background-color: $breadcrumb-bg;
8 | @include border-radius($breadcrumb-border-radius);
9 | }
10 |
11 | .breadcrumb-item {
12 | // The separator between breadcrumbs (by default, a forward-slash: "/")
13 | + .breadcrumb-item {
14 | padding-left: $breadcrumb-item-padding-x;
15 |
16 | &::before {
17 | display: inline-block; // Suppress underlining of the separator in modern browsers
18 | padding-right: $breadcrumb-item-padding-x;
19 | color: $breadcrumb-divider-color;
20 | content: $breadcrumb-divider;
21 | }
22 | }
23 |
24 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
25 | // without `- `s. The `::before` pseudo-element generates an element
26 | // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
27 | //
28 | // To trick IE into suppressing the underline, we give the pseudo-element an
29 | // underline and then immediately remove it.
30 | + .breadcrumb-item:hover::before {
31 | text-decoration: underline;
32 | }
33 | // stylelint-disable-next-line no-duplicate-selectors
34 | + .breadcrumb-item:hover::before {
35 | text-decoration: none;
36 | }
37 |
38 | &.active {
39 | color: $breadcrumb-active-color;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/utilities/vertical-align.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Vertical alignment
4 | description: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
5 | group: utilities
6 | ---
7 |
8 | Change the alignment of elements with the [`vertical-alignment`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
9 |
10 | Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
11 |
12 | With inline elements:
13 |
14 | {{< example >}}
15 | baseline
16 | top
17 | middle
18 | bottom
19 | text-top
20 | text-bottom
21 | {{< /example >}}
22 |
23 | With table cells:
24 |
25 | {{< example >}}
26 |
| baseline | 30 |top | 31 |middle | 32 |bottom | 33 |text-top | 34 |text-bottom | 35 |
',
21 | ' Click me',
22 | ' Some content',
23 | '
'
24 | ].join('')
25 |
26 | var result = Sanitizer.sanitizeHtml(template, Sanitizer.DefaultWhitelist, null)
27 |
28 | assert.strictEqual(result.indexOf('script'), -1)
29 | })
30 |
31 | QUnit.test('should not use native api to sanitize if a custom function passed', function (assert) {
32 | assert.expect(2)
33 |
34 | var template = [
35 | '',
36 | ' Some content',
37 | '
'
38 | ].join('')
39 |
40 | function mySanitize(htmlUnsafe) {
41 | return htmlUnsafe
42 | }
43 |
44 | var spy = sinon.spy(DOMParser.prototype, 'parseFromString')
45 | var result = Sanitizer.sanitizeHtml(template, Sanitizer.DefaultWhitelist, mySanitize)
46 |
47 | assert.strictEqual(result, template)
48 | assert.strictEqual(spy.called, false)
49 | spy.restore()
50 | })
51 | })
52 |
--------------------------------------------------------------------------------
/bootstrap4-source/js/tests/unit/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "env": {
4 | "jquery": true,
5 | "qunit": true
6 | },
7 | "globals": {
8 | "bootstrap": false,
9 | "sinon": false,
10 | "Util": false,
11 | "Sanitizer": false,
12 | "Data": false,
13 | "Alert": false,
14 | "Button": false,
15 | "Carousel": false,
16 | "Simulator": false,
17 | "Toast": false,
18 | "EventHandler": false,
19 | "Manipulator": false,
20 | "SelectorEngine": false
21 | },
22 | "parserOptions": {
23 | "ecmaVersion": 5,
24 | "sourceType": "script"
25 | },
26 | "extends": [
27 | "plugin:unicorn/recommended",
28 | "xo",
29 | "xo/browser"
30 | ],
31 | "rules": {
32 | "capitalized-comments": "off",
33 | "indent": [
34 | "error",
35 | 2,
36 | {
37 | "MemberExpression": "off",
38 | "SwitchCase": 1
39 | }
40 | ],
41 | "multiline-ternary": [
42 | "error",
43 | "always-multiline"
44 | ],
45 | "new-cap": "off",
46 | "object-curly-spacing": [
47 | "error",
48 | "always"
49 | ],
50 | "semi": [
51 | "error",
52 | "never"
53 | ],
54 | "strict": "error",
55 | "unicorn/no-unused-properties": "error",
56 | "unicorn/prefer-includes": "off",
57 | "unicorn/prefer-node-append": "off",
58 | "unicorn/prefer-node-remove": "off",
59 | "unicorn/prefer-query-selector": "off",
60 | "unicorn/prevent-abbreviations": "off"
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Why need bootstrap email css?
2 | - The original bootstrap.min.css is a little too big for inline email css
3 | - This short version of bootstrap email css is less than 60KB
4 |
5 | # How to use it in email template?
6 | ```html
7 |
8 |
9 |
10 |
17 |
29 |
30 |
31 | ```
32 |
33 | # What can we use with this email version?
34 | - Most of the features are available, expect below:
35 | - Components of form, input, table, modal, dropdown, nav, navbar, carousel, tooltips ...(See bootstrap4-source/scss/bootstrap4-email-css.scss for details)
36 | - Grid breakpoints only kept xs and md, md can be use for the breakpoints of mobile version and desktop version. which means only col-*, col-md-* are available. (See bootstrap4-source/scss/_variables-email.scss for details)
--------------------------------------------------------------------------------
/bootstrap4-source/build/svgo.yml:
--------------------------------------------------------------------------------
1 | # Usage:
2 | # install svgo globally: `npm i -g svgo`
3 | # svgo --config=build/svgo.yml --input=foo.svg
4 |
5 | # https://github.com/svg/svgo/blob/master/docs/how-it-works/en.md
6 | # replace default config
7 |
8 | multipass: true
9 | #full: true
10 |
11 | # https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options
12 |
13 | js2svg:
14 | pretty: true
15 | indent: 2
16 |
17 | plugins:
18 | - cleanupAttrs: true
19 | - cleanupEnableBackground: true
20 | - cleanupIDs: true
21 | - cleanupListOfValues: true
22 | - cleanupNumericValues: true
23 | - collapseGroups: true
24 | - convertColors: true
25 | - convertPathData: true
26 | - convertShapeToPath: true
27 | - convertStyleToAttrs: true
28 | - convertTransform: true
29 | - inlineStyles: true
30 | - mergePaths: true
31 | - minifyStyles: true
32 | - moveElemsAttrsToGroup: true
33 | - moveGroupAttrsToElems: true
34 | - removeComments: true
35 | - removeDesc: true
36 | - removeDoctype: true
37 | - removeEditorsNSData: true
38 | - removeEmptyAttrs: true
39 | - removeEmptyContainers: true
40 | - removeEmptyText: true
41 | - removeHiddenElems: true
42 | - removeMetadata: true
43 | - removeNonInheritableGroupAttrs: true
44 | - removeTitle: false
45 | - removeUnknownsAndDefaults:
46 | keepRoleAttr: true
47 | - removeUnusedNS: true
48 | - removeUselessDefs: true
49 | - removeUselessStrokeAndFill: true
50 | - removeViewBox: false
51 | - removeXMLNS: false
52 | - removeXMLProcInst: true
53 | - sortAttrs: true
54 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/bootstrap-grid.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
3 | * Copyright 2011-2019 The Bootstrap Authors
4 | * Copyright 2011-2019 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | */
7 |
8 | html {
9 | box-sizing: border-box;
10 | }
11 |
12 | *,
13 | *::before,
14 | *::after {
15 | box-sizing: inherit;
16 | }
17 |
18 | @import "functions";
19 | @import "variables";
20 |
21 | @import "mixins/breakpoints";
22 | @import "mixins/grid-framework";
23 | @import "mixins/grid";
24 | @import "mixins/utilities";
25 |
26 | @import "grid";
27 |
28 | @import "utilities";
29 | // Only use the utilities we need
30 | // stylelint-disable-next-line scss/dollar-variable-default
31 | $utilities: map-get-multiple(
32 | $utilities,
33 | (
34 | "display",
35 | "order",
36 | "flex",
37 | "flex-direction",
38 | "flex-grow",
39 | "flex-shrink"
40 | "flex-wrap",
41 | "justify-content",
42 | "align-items",
43 | "align-content",
44 | "align-self",
45 | "margin",
46 | "margin-x",
47 | "margin-y",
48 | "margin-top",
49 | "margin-right",
50 | "margin-bottom",
51 | "margin-left",
52 | "negative-margin",
53 | "negative-margin-x",
54 | "negative-margin-y",
55 | "negative-margin-top",
56 | "negative-margin-right",
57 | "negative-margin-bottom",
58 | "negative-margin-left",
59 | "padding",
60 | "padding-x",
61 | "padding-y",
62 | "padding-top",
63 | "padding-right",
64 | "padding-bottom",
65 | "padding-left",
66 | )
67 | );
68 |
69 | @import "utilities/api";
70 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/mixins/_border-radius.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable property-blacklist
2 | // Single side border-radius
3 |
4 | @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
5 | @if $enable-rounded {
6 | border-radius: $radius;
7 | }
8 | @else if $fallback-border-radius != false {
9 | border-radius: $fallback-border-radius;
10 | }
11 | }
12 |
13 | @mixin border-top-radius($radius) {
14 | @if $enable-rounded {
15 | border-top-left-radius: $radius;
16 | border-top-right-radius: $radius;
17 | }
18 | }
19 |
20 | @mixin border-right-radius($radius) {
21 | @if $enable-rounded {
22 | border-top-right-radius: $radius;
23 | border-bottom-right-radius: $radius;
24 | }
25 | }
26 |
27 | @mixin border-bottom-radius($radius) {
28 | @if $enable-rounded {
29 | border-bottom-right-radius: $radius;
30 | border-bottom-left-radius: $radius;
31 | }
32 | }
33 |
34 | @mixin border-left-radius($radius) {
35 | @if $enable-rounded {
36 | border-top-left-radius: $radius;
37 | border-bottom-left-radius: $radius;
38 | }
39 | }
40 |
41 | @mixin border-top-left-radius($radius) {
42 | @if $enable-rounded {
43 | border-top-left-radius: $radius;
44 | }
45 | }
46 |
47 | @mixin border-top-right-radius($radius) {
48 | @if $enable-rounded {
49 | border-top-right-radius: $radius;
50 | }
51 | }
52 |
53 | @mixin border-bottom-right-radius($radius) {
54 | @if $enable-rounded {
55 | border-bottom-right-radius: $radius;
56 | }
57 | }
58 |
59 | @mixin border-bottom-left-radius($radius) {
60 | @if $enable-rounded {
61 | border-bottom-left-radius: $radius;
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/content/code.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Code
4 | description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.
5 | group: content
6 | toc: true
7 | ---
8 |
9 | ## Inline code
10 |
11 | Wrap inline snippets of code with `
18 |
28 |
19 |
27 |
20 |
21 |
26 |
22 | {!! $email-content !!}
23 |
24 |
25 | `. Be sure to escape HTML angle brackets.
12 |
13 | {{< example >}}
14 | For example, <section> should be wrapped as inline.
15 | {{< /example >}}
16 |
17 | ## Code blocks
18 |
19 | Use ``s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar.
20 |
21 | {{< example >}}
22 | <p>Sample text here...</p>
23 | <p>And another line of sample text here...</p>
24 |
25 | {{< /example >}}
26 |
27 | ## Variables
28 |
29 | For indicating variables use the `` tag.
30 |
31 | {{< example >}}
32 | y = mx + b
33 | {{< /example >}}
34 |
35 | ## User input
36 |
37 | Use the `` to indicate input that is typically entered via keyboard.
38 |
39 | {{< example >}}
40 | To switch directories, type cd followed by the name of the directory.
41 | To edit settings, press ctrl + ,
42 | {{< /example >}}
43 |
44 | ## Sample output
45 |
46 | For indicating sample output from a program use the `` tag.
47 |
48 | {{< example >}}
49 | This text is meant to be treated as sample output from a computer program.
50 | {{< /example >}}
51 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/layouts/shortcodes/placeholder.html:
--------------------------------------------------------------------------------
1 | {{- /*
2 | Usage: `placeholder args`
3 |
4 | args can be one of the following:
5 | title: Used in the SVG `title` tag, default "Placeholder"
6 | text: The text to show in the image - default: "width x height"
7 | class: default: "bd-placeholder-img"
8 | color: The text color (foreground) - default: "#dee2e6"
9 | background: The background color - default: "#868e96"
10 | width: default: 100%
11 | height: default: 180px
12 | */ -}}
13 |
14 | {{- $grays := $.Site.Data.grays -}}
15 | {{- $title := .Get "title" | default "Placeholder" -}}
16 | {{- $class := .Get "class" -}}
17 | {{- $color := .Get "color" | default (index $grays 2).hex -}}
18 | {{- $background := .Get "background" | default (index $grays 5).hex -}}
19 | {{- $width := .Get "width" | default "100%" -}}
20 | {{- $height := .Get "height" | default "180" -}}
21 | {{- $text := .Get "text" | default (printf "%sx%s" $width $height) -}}
22 |
23 | {{- $show_title := not (eq $title "false") -}}
24 | {{- $show_text := not (eq $text "false") -}}
25 |
26 |
31 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/mixins/_caret.scss:
--------------------------------------------------------------------------------
1 | @mixin caret-down {
2 | border-top: $caret-width solid;
3 | border-right: $caret-width solid transparent;
4 | border-bottom: 0;
5 | border-left: $caret-width solid transparent;
6 | }
7 |
8 | @mixin caret-up {
9 | border-top: 0;
10 | border-right: $caret-width solid transparent;
11 | border-bottom: $caret-width solid;
12 | border-left: $caret-width solid transparent;
13 | }
14 |
15 | @mixin caret-right {
16 | border-top: $caret-width solid transparent;
17 | border-right: 0;
18 | border-bottom: $caret-width solid transparent;
19 | border-left: $caret-width solid;
20 | }
21 |
22 | @mixin caret-left {
23 | border-top: $caret-width solid transparent;
24 | border-right: $caret-width solid;
25 | border-bottom: $caret-width solid transparent;
26 | }
27 |
28 | @mixin caret($direction: down) {
29 | @if $enable-caret {
30 | &::after {
31 | display: inline-block;
32 | margin-left: $caret-spacing;
33 | vertical-align: $caret-vertical-align;
34 | content: "";
35 | @if $direction == down {
36 | @include caret-down;
37 | } @else if $direction == up {
38 | @include caret-up;
39 | } @else if $direction == right {
40 | @include caret-right;
41 | }
42 | }
43 |
44 | @if $direction == left {
45 | &::after {
46 | display: none;
47 | }
48 |
49 | &::before {
50 | display: inline-block;
51 | margin-right: $caret-spacing;
52 | vertical-align: $caret-vertical-align;
53 | content: "";
54 | @include caret-left;
55 | }
56 | }
57 |
58 | &:empty::after {
59 | margin-left: 0;
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/utilities/float.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Float
4 | description: Toggle floats on any element, across any breakpoint, using our responsive float utilities.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | ## Overview
10 |
11 | These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no affect on flex items.
12 |
13 | {{< example >}}
14 | Float left on all viewport sizes
15 | Float right on all viewport sizes
16 | Don't float on all viewport sizes
17 | {{< /example >}}
18 |
19 | ## Responsive
20 |
21 | Responsive variations also exist for each `float` value.
22 |
23 | {{< example >}}
24 | Float left on viewports sized SM (small) or wider
25 | Float left on viewports sized MD (medium) or wider
26 | Float left on viewports sized LG (large) or wider
27 | Float left on viewports sized XL (extra-large) or wider
28 | {{< /example >}}
29 |
30 | Here are all the support classes:
31 |
32 | {{< markdown >}}
33 | {{< float.inline >}}
34 | {{- range $.Site.Data.breakpoints }}
35 | - `.float{{ .abbr }}-left`
36 | - `.float{{ .abbr }}-right`
37 | - `.float{{ .abbr }}-none`
38 | {{- end -}}
39 | {{< /float.inline >}}
40 | {{< /markdown >}}
41 |
--------------------------------------------------------------------------------
/bootstrap4-source/nuget/bootstrap.nuspec:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | bootstrap
5 | 4.3.1
6 | Bootstrap CSS
7 | The Bootstrap Authors, Twitter Inc.
8 | bootstrap
9 | The most popular front-end framework for developing responsive, mobile first projects on the web.
10 | https://blog.getbootstrap.com/
11 | Bootstrap framework in CSS. Includes fonts and JavaScript
12 | en-us
13 | https://getbootstrap.com/
14 | https://getbootstrap.com/docs/4.3/assets/img/favicons/apple-touch-icon.png
15 | LICENSE.txt
16 | Copyright 2017-2019
17 | false
18 |
19 |
21 | css mobile-first responsive front-end framework web
22 |
23 |
24 |
34 |
35 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/static/docs/4.3/assets/scss/_brand.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Brand guidelines
3 | //
4 |
5 | // Logo series wrapper
6 | .bd-brand-logos {
7 | display: table;
8 | width: 100%;
9 | margin-bottom: 1rem;
10 | overflow: hidden;
11 | color: $bd-purple;
12 | background-color: #f9f9f9;
13 | @include border-radius;
14 |
15 | .inverse {
16 | color: $white;
17 | background-color: $bd-purple;
18 | }
19 | }
20 |
21 | // Individual items
22 | .bd-brand-item {
23 | padding: 4rem 0;
24 | text-align: center;
25 |
26 | + .bd-brand-item {
27 | border-top: 1px solid $white;
28 | }
29 |
30 | // Heading content within
31 | h1,
32 | h3 {
33 | margin-top: 0;
34 | margin-bottom: 0;
35 | }
36 |
37 | @include media-breakpoint-up(md) {
38 | display: table-cell;
39 | width: 1%;
40 |
41 | + .bd-brand-item {
42 | border-top: 0;
43 | border-left: 1px solid $white;
44 | }
45 |
46 | h1 {
47 | @include font-size(4rem);
48 | }
49 | }
50 | }
51 |
52 |
53 | //
54 | // Color swatches
55 | //
56 |
57 | .color-swatches {
58 | margin: 0 -5px;
59 | overflow: hidden; // clearfix
60 |
61 | // Docs colors
62 | .bd-purple {
63 | background-color: $bd-purple;
64 | }
65 | .bd-purple-light {
66 | background-color: $bd-purple-light;
67 | }
68 | .bd-purple-lighter {
69 | background-color: #e5e1ea;
70 | }
71 | .bd-gray {
72 | background-color: #f9f9f9;
73 | }
74 | }
75 |
76 | .color-swatch {
77 | float: left;
78 | width: 4rem;
79 | height: 4rem;
80 | margin-right: .25rem;
81 | margin-left: .25rem;
82 | @include border-radius;
83 |
84 | @include media-breakpoint-up(md) {
85 | width: 6rem;
86 | height: 6rem;
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/bootstrap4-source/nuget/bootstrap.sass.nuspec:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | bootstrap.sass
5 | 4.3.1
6 | Bootstrap Sass
7 | The Bootstrap Authors, Twitter Inc.
8 | bootstrap
9 | The most popular front-end framework for developing responsive, mobile first projects on the web.
10 | https://blog.getbootstrap.com/
11 | Bootstrap framework in Sass. Includes fonts and JavaScript
12 | en-us
13 | https://getbootstrap.com/
14 | https://getbootstrap.com/docs/4.3/assets/img/favicons/apple-touch-icon.png
15 | LICENSE.txt
16 | Copyright 2017-2019
17 | false
18 |
19 |
21 | css sass mobile-first responsive front-end framework web
22 |
23 |
24 |
34 |
35 |
--------------------------------------------------------------------------------
/bootstrap4-source/js/tests/browsers.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | /* eslint-disable camelcase */
3 |
4 | const browsers = {
5 | safariMac: {
6 | base: 'BrowserStack',
7 | os: 'OS X',
8 | os_version: 'High Sierra',
9 | browser: 'Safari',
10 | browser_version: 'latest'
11 | },
12 | chromeMac: {
13 | base: 'BrowserStack',
14 | os: 'OS X',
15 | os_version: 'High Sierra',
16 | browser: 'Chrome',
17 | browser_version: 'latest'
18 | },
19 | firefoxMac: {
20 | base: 'BrowserStack',
21 | os: 'OS X',
22 | os_version: 'High Sierra',
23 | browser: 'Firefox',
24 | browser_version: 'latest'
25 | },
26 | edgeWin10: {
27 | base: 'BrowserStack',
28 | os: 'Windows',
29 | os_version: '10',
30 | browser: 'Edge',
31 | browser_version: 'latest'
32 | },
33 | ie11Win10: {
34 | base: 'BrowserStack',
35 | os: 'Windows',
36 | os_version: '10',
37 | browser: 'IE',
38 | browser_version: '11.0'
39 | },
40 | chromeWin10: {
41 | base: 'BrowserStack',
42 | os: 'Windows',
43 | os_version: '10',
44 | browser: 'Chrome',
45 | browser_version: 'latest'
46 | },
47 | firefoxWin10: {
48 | base: 'BrowserStack',
49 | os: 'Windows',
50 | os_version: '10',
51 | browser: 'Firefox',
52 | browser_version: 'latest'
53 | },
54 | iphoneX: {
55 | base: 'BrowserStack',
56 | os: 'ios',
57 | os_version: '11.0',
58 | device: 'iPhone X',
59 | real_mobile: true
60 | },
61 | pixel2: {
62 | base: 'BrowserStack',
63 | os: 'android',
64 | os_version: '8.0',
65 | device: 'Google Pixel 2',
66 | real_mobile: true
67 | }
68 | }
69 |
70 | const browsersKeys = Object.keys(browsers)
71 |
72 | module.exports = {
73 | browsers,
74 | browsersKeys
75 | }
76 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/examples/navbar-fixed/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: examples
3 | title: Fixed top navbar example
4 | extra_css:
5 | - "navbar-top-fixed.css"
6 | ---
7 |
8 |
31 |
32 |
33 |
34 | Navbar example
35 | This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.
36 | }}" role="button">View navbar docs »
37 |
38 |
39 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/mixins/_grid.scss:
--------------------------------------------------------------------------------
1 | /// Grid system
2 | //
3 | // Generate semantic grid columns with these mixins.
4 |
5 | @mixin make-container($padding-x: $container-padding-x) {
6 | width: 100%;
7 | padding-right: $padding-x;
8 | padding-left: $padding-x;
9 | margin-right: auto;
10 | margin-left: auto;
11 | }
12 |
13 |
14 | // For each breakpoint, define the maximum width of the container in a media query
15 | @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
16 | @each $breakpoint, $container-max-width in $max-widths {
17 | @include media-breakpoint-up($breakpoint, $breakpoints) {
18 | max-width: $container-max-width;
19 | }
20 | }
21 | }
22 |
23 | @mixin make-row($gutter: $grid-gutter-width) {
24 | display: flex;
25 | flex-wrap: wrap;
26 | margin-right: -$gutter / 2;
27 | margin-left: -$gutter / 2;
28 | }
29 |
30 | @mixin make-col-ready($gutter: $grid-gutter-width) {
31 | position: relative;
32 | // Prevent columns from becoming too narrow when at smaller grid tiers by
33 | // always setting `width: 100%;`. This works because we use `flex` values
34 | // later on to override this initial width.
35 | width: 100%;
36 | padding-right: $gutter / 2;
37 | padding-left: $gutter / 2;
38 | }
39 |
40 | @mixin make-col($size, $columns: $grid-columns) {
41 | flex: 0 0 percentage($size / $columns);
42 | // Add a `max-width` to ensure content within each column does not blow out
43 | // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
44 | // do not appear to require this.
45 | max-width: percentage($size / $columns);
46 | }
47 |
48 | @mixin make-col-offset($size, $columns: $grid-columns) {
49 | $num: $size / $columns;
50 | margin-left: if($num == 0, 0, percentage($num));
51 | }
52 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/examples/navbar-static/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: examples
3 | title: Top navbar example
4 | extra_css:
5 | - "navbar-top.css"
6 | ---
7 |
8 |
31 |
32 |
33 |
34 | Navbar example
35 | This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.
36 | }}" role="button">View navbar docs »
37 |
38 |
39 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/static/docs/4.3/assets/scss/docs.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Docs (https://getbootstrap.com/)
3 | * Copyright 2011-2019 The Bootstrap Authors
4 | * Copyright 2011-2019 Twitter, Inc.
5 | * Licensed under the Creative Commons Attribution 3.0 Unported License.
6 | * For details, see https://creativecommons.org/licenses/by/3.0/.
7 | */
8 |
9 | // Dev notes
10 | //
11 | // Background information on nomenclature and architecture decisions here.
12 | //
13 | // - Bootstrap functions, variables, and mixins are included for easy reuse.
14 | // Doing so gives us access to the same core utilities provided by Bootstrap.
15 | // For example, consistent media queries through those mixins.
16 | //
17 | // - Bootstrap's **docs variables** are prefixed with `$bd-`.
18 | // These custom colors avoid collision with the components Bootstrap provides.
19 | //
20 | // - Classes are prefixed with `.bd-`.
21 | // These classes indicate custom-built or modified components for the design
22 | // and layout of the Bootstrap docs. They are not included in our builds.
23 | //
24 | // Happy Bootstrapping!
25 |
26 | // Load Bootstrap variables and mixins
27 | @import "../../../../../../scss/functions";
28 | @import "../../../../../../scss/variables";
29 | @import "../../../../../../scss/mixins";
30 |
31 | // Load docs components
32 | @import "variables";
33 | @import "nav";
34 | @import "masthead";
35 | @import "ads";
36 | @import "content";
37 | @import "skippy";
38 | @import "sidebar";
39 | @import "footer";
40 | @import "component-examples";
41 | @import "buttons";
42 | @import "callouts";
43 | @import "browser-bugs";
44 | @import "brand";
45 | @import "colors";
46 | @import "clipboard-js";
47 | @import "placeholder-img";
48 |
49 | // Load docs dependencies
50 | @import "syntax";
51 | @import "anchor";
52 | @import "algolia";
53 |
--------------------------------------------------------------------------------
/bootstrap4-source/js/src/dom/data.js:
--------------------------------------------------------------------------------
1 | /**
2 | * --------------------------------------------------------------------------
3 | * Bootstrap (v4.3.1): dom/data.js
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5 | * --------------------------------------------------------------------------
6 | */
7 |
8 | /**
9 | * ------------------------------------------------------------------------
10 | * Constants
11 | * ------------------------------------------------------------------------
12 | */
13 |
14 | const mapData = (() => {
15 | const storeData = {}
16 | let id = 1
17 | return {
18 | set(element, key, data) {
19 | if (typeof element.key === 'undefined') {
20 | element.key = {
21 | key,
22 | id
23 | }
24 | id++
25 | }
26 |
27 | storeData[element.key.id] = data
28 | },
29 | get(element, key) {
30 | if (!element || typeof element.key === 'undefined') {
31 | return null
32 | }
33 |
34 | const keyProperties = element.key
35 | if (keyProperties.key === key) {
36 | return storeData[keyProperties.id]
37 | }
38 |
39 | return null
40 | },
41 | delete(element, key) {
42 | if (typeof element.key === 'undefined') {
43 | return
44 | }
45 |
46 | const keyProperties = element.key
47 | if (keyProperties.key === key) {
48 | delete storeData[keyProperties.id]
49 | delete element.key
50 | }
51 | }
52 | }
53 | })()
54 |
55 | const Data = {
56 | setData(instance, key, data) {
57 | mapData.set(instance, key, data)
58 | },
59 | getData(instance, key) {
60 | return mapData.get(instance, key)
61 | },
62 | removeData(instance, key) {
63 | mapData.delete(instance, key)
64 | }
65 | }
66 |
67 | export default Data
68 |
--------------------------------------------------------------------------------
/bootstrap4-source/build/generate-sri.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | /*!
4 | * Script to generate SRI hashes for use in our docs.
5 | * Remember to use the same vendor files as the CDN ones,
6 | * otherwise the hashes won't match!
7 | *
8 | * Copyright 2017-2019 The Bootstrap Authors
9 | * Copyright 2017-2019 Twitter, Inc.
10 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
11 | */
12 |
13 | 'use strict'
14 |
15 | const crypto = require('crypto')
16 | const fs = require('fs')
17 | const path = require('path')
18 | const sh = require('shelljs')
19 |
20 | sh.config.fatal = true
21 |
22 | const configFile = path.join(__dirname, '../config.yml')
23 |
24 | // Array of objects which holds the files to generate SRI hashes for.
25 | // `file` is the path from the root folder
26 | // `configPropertyName` is the config.yml variable's name of the file
27 | const files = [
28 | {
29 | file: 'dist/css/bootstrap.min.css',
30 | configPropertyName: 'css_hash'
31 | },
32 | {
33 | file: 'dist/js/bootstrap.min.js',
34 | configPropertyName: 'js_hash'
35 | },
36 | {
37 | file: 'dist/js/bootstrap.bundle.min.js',
38 | configPropertyName: 'js_bundle_hash'
39 | },
40 | {
41 | file: 'node_modules/popper.js/dist/umd/popper.min.js',
42 | configPropertyName: 'popper_hash'
43 | }
44 | ]
45 |
46 | files.forEach(file => {
47 | fs.readFile(file.file, 'utf8', (err, data) => {
48 | if (err) {
49 | throw err
50 | }
51 |
52 | const algo = 'sha384'
53 | const hash = crypto.createHash(algo).update(data, 'utf8').digest('base64')
54 | const integrity = `${algo}-${hash}`
55 |
56 | console.log(`${file.configPropertyName}: ${integrity}`)
57 |
58 | sh.sed('-i', new RegExp(`(\\s${file.configPropertyName}:\\s+"|')(\\S+)("|')`), `$1${integrity}$3`, configFile)
59 | })
60 | })
61 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/static/docs/4.3/assets/js/src/search.js:
--------------------------------------------------------------------------------
1 | // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
2 | // IT'S ALL JUST JUNK FOR OUR DOCS!
3 | // ++++++++++++++++++++++++++++++++++++++++++
4 |
5 | (function () {
6 | 'use strict'
7 |
8 | if (!window.docsearch) {
9 | return
10 | }
11 |
12 | var inputElement = document.getElementById('search-input')
13 | var siteDocsVersion = inputElement.getAttribute('data-docs-version')
14 |
15 | function getOrigin() {
16 | var location = window.location
17 | var origin = location.origin
18 |
19 | if (!origin) {
20 | var port = location.port ? ':' + location.port : ''
21 |
22 | origin = location.protocol + '//' + location.hostname + port
23 | }
24 |
25 | return origin
26 | }
27 |
28 | window.docsearch({
29 | apiKey: '5990ad008512000bba2cf951ccf0332f',
30 | indexName: 'bootstrap',
31 | inputSelector: '#search-input',
32 | algoliaOptions: {
33 | facetFilters: ['version:' + siteDocsVersion]
34 | },
35 | transformData: function (hits) {
36 | return hits.map(function (hit) {
37 | var currentUrl = getOrigin()
38 | var liveUrl = 'https://getbootstrap.com'
39 |
40 | // When in production, return the result as is,
41 | // otherwise remove our url from it.
42 | // eslint-disable-next-line no-negated-condition
43 | hit.url = currentUrl.indexOf(liveUrl) !== -1 ?
44 | hit.url :
45 | hit.url.replace(liveUrl, '')
46 |
47 | // Prevent jumping to first header
48 | if (hit.anchor === 'content') {
49 | hit.url = hit.url.replace(/#content$/, '')
50 | hit.anchor = null
51 | }
52 |
53 | return hit
54 | })
55 | },
56 | // Set debug to `true` if you want to inspect the dropdown
57 | debug: false
58 | })
59 | })()
60 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/about/license.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: License FAQs
4 | description: Commonly asked questions about Bootstrap's open source license.
5 | group: about
6 | ---
7 |
8 | Bootstrap is released under the MIT license and is copyright {{< year >}} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
9 |
10 | #### It requires you to:
11 |
12 | * Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works
13 |
14 | #### It permits you to:
15 |
16 | - Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
17 | - Use Bootstrap in packages or distributions that you create
18 | - Modify the source code
19 | - Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license
20 |
21 | #### It forbids you to:
22 |
23 | - Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
24 | - Hold the creators or copyright holders of Bootstrap liable
25 | - Redistribute any piece of Bootstrap without proper attribution
26 | - Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
27 | - Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
28 |
29 | #### It does not require you to:
30 |
31 | - Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
32 | - Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
33 |
34 | The full Bootstrap license is located [in the project repository]({{< param repo >}}/blob/v{{< param current_version >}}/LICENSE) for more information.
35 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/examples/navbar-bottom/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: examples
3 | title: Bottom navbar example
4 | ---
5 |
6 |
7 |
8 | Bottom Navbar example
9 | This example is a quick exercise to illustrate how the bottom navbar works.
10 | }}" role="button">View navbar docs »
11 |
12 |
13 |
40 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/layouts/partials/home/masthead.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{ partial "icons/bootstrap-stack.svg" (dict "class" "img-fluid mb-3 mb-md-0" "width" "512" "height" "430") }}
6 |
7 |
8 | Bootstrap
9 |
10 | Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
11 |
12 |
13 | Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built with VanillaJS.
14 |
15 |
16 |
17 | Get started
18 |
19 |
20 | Download
21 |
22 |
23 |
24 | Currently v{{ .Site.Params.current_version }}
25 |
26 |
27 |
28 | {{ partial "ads.html" . }}
29 |
30 |
31 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/mixins/_grid-framework.scss:
--------------------------------------------------------------------------------
1 | // Framework grid generation
2 | //
3 | // Used only by Bootstrap to generate the correct number of grid classes given
4 | // any value of `$grid-columns`.
5 |
6 | @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
7 | // Common properties for all breakpoints
8 | %grid-column {
9 | position: relative;
10 | width: 100%;
11 | padding-right: $gutter / 2;
12 | padding-left: $gutter / 2;
13 | }
14 |
15 | @each $breakpoint in map-keys($breakpoints) {
16 | $infix: breakpoint-infix($breakpoint, $breakpoints);
17 |
18 | // Allow columns to stretch full width below their breakpoints
19 | @for $i from 1 through $columns {
20 | .col#{$infix}-#{$i} {
21 | @extend %grid-column;
22 | }
23 | }
24 | .col#{$infix},
25 | .col#{$infix}-auto {
26 | @extend %grid-column;
27 | }
28 |
29 | @include media-breakpoint-up($breakpoint, $breakpoints) {
30 | // Provide basic `.col-{bp}` classes for equal-width flexbox columns
31 | .col#{$infix} {
32 | flex-basis: 0;
33 | flex-grow: 1;
34 | max-width: 100%;
35 | }
36 | .col#{$infix}-auto {
37 | flex: 0 0 auto;
38 | width: auto;
39 | max-width: 100%; // Reset earlier grid tiers
40 | }
41 |
42 | @for $i from 1 through $columns {
43 | .col#{$infix}-#{$i} {
44 | @include make-col($i, $columns);
45 | }
46 | }
47 |
48 | // `$columns - 1` because offsetting by the width of an entire row isn't possible
49 | @for $i from 0 through ($columns - 1) {
50 | @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
51 | .offset#{$infix}-#{$i} {
52 | @include make-col-offset($i, $columns);
53 | }
54 | }
55 | }
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/examples/offcanvas/offcanvas.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | overflow-x: hidden; /* Prevent scroll on narrow devices */
4 | }
5 |
6 | body {
7 | padding-top: 56px;
8 | }
9 |
10 | @media (max-width: 991.98px) {
11 | .offcanvas-collapse {
12 | position: fixed;
13 | top: 56px; /* Height of navbar */
14 | bottom: 0;
15 | left: 100%;
16 | width: 100%;
17 | padding-right: 1rem;
18 | padding-left: 1rem;
19 | overflow-y: auto;
20 | visibility: hidden;
21 | background-color: #343a40;
22 | transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
23 | transition: transform .3s ease-in-out, visibility .3s ease-in-out;
24 | transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
25 | }
26 | .offcanvas-collapse.open {
27 | visibility: visible;
28 | -webkit-transform: translateX(-100%);
29 | transform: translateX(-100%);
30 | }
31 | }
32 |
33 | .nav-scroller {
34 | position: relative;
35 | z-index: 2;
36 | height: 2.75rem;
37 | overflow-y: hidden;
38 | }
39 |
40 | .nav-scroller .nav {
41 | display: flex;
42 | flex-wrap: nowrap;
43 | padding-bottom: 1rem;
44 | margin-top: -1px;
45 | overflow-x: auto;
46 | color: rgba(255, 255, 255, .75);
47 | text-align: center;
48 | white-space: nowrap;
49 | -webkit-overflow-scrolling: touch;
50 | }
51 |
52 | .nav-underline .nav-link {
53 | padding-top: .75rem;
54 | padding-bottom: .75rem;
55 | font-size: .875rem;
56 | color: #6c757d;
57 | }
58 |
59 | .nav-underline .nav-link:hover {
60 | color: #007bff;
61 | }
62 |
63 | .nav-underline .active {
64 | font-weight: 500;
65 | color: #343a40;
66 | }
67 |
68 | .text-white-50 { color: rgba(255, 255, 255, .5); }
69 |
70 | .bg-purple { background-color: #6f42c1; }
71 |
72 | .lh-100 { line-height: 1; }
73 | .lh-125 { line-height: 1.25; }
74 | .lh-150 { line-height: 1.5; }
75 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/examples/cover/cover.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Globals
3 | */
4 |
5 | /* Links */
6 | a,
7 | a:focus,
8 | a:hover {
9 | color: #fff;
10 | }
11 |
12 | /* Custom default button */
13 | .btn-secondary,
14 | .btn-secondary:hover,
15 | .btn-secondary:focus {
16 | color: #333;
17 | text-shadow: none; /* Prevent inheritance from `body` */
18 | background-color: #fff;
19 | border: .05rem solid #fff;
20 | }
21 |
22 |
23 | /*
24 | * Base structure
25 | */
26 |
27 | html,
28 | body {
29 | height: 100%;
30 | background-color: #333;
31 | }
32 |
33 | body {
34 | display: flex;
35 | color: #fff;
36 | text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
37 | box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
38 | }
39 |
40 | .cover-container {
41 | max-width: 42em;
42 | }
43 |
44 |
45 | /*
46 | * Header
47 | */
48 | .masthead {
49 | margin-bottom: 2rem;
50 | }
51 |
52 | .masthead-brand {
53 | margin-bottom: 0;
54 | }
55 |
56 | .nav-masthead .nav-link {
57 | padding: .25rem 0;
58 | font-weight: 700;
59 | color: rgba(255, 255, 255, .5);
60 | background-color: transparent;
61 | border-bottom: .25rem solid transparent;
62 | }
63 |
64 | .nav-masthead .nav-link:hover,
65 | .nav-masthead .nav-link:focus {
66 | border-bottom-color: rgba(255, 255, 255, .25);
67 | }
68 |
69 | .nav-masthead .nav-link + .nav-link {
70 | margin-left: 1rem;
71 | }
72 |
73 | .nav-masthead .active {
74 | color: #fff;
75 | border-bottom-color: #fff;
76 | }
77 |
78 | @media (min-width: 48em) {
79 | .masthead-brand {
80 | float: left;
81 | }
82 | .nav-masthead {
83 | float: right;
84 | }
85 | }
86 |
87 |
88 | /*
89 | * Cover
90 | */
91 | .cover {
92 | padding: 0 1.5rem;
93 | }
94 | .cover .btn-lg {
95 | padding: .75rem 1.25rem;
96 | font-weight: 700;
97 | }
98 |
99 |
100 | /*
101 | * Footer
102 | */
103 | .mastfoot {
104 | color: rgba(255, 255, 255, .5);
105 | }
106 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/layout/utilities-for-layout.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Utilities for layout
4 | description: For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
5 | group: layout
6 | toc: true
7 | ---
8 |
9 | ## Changing `display`
10 |
11 | Use our [display utilities]({{< docsref "/utilities/display" >}}) for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
12 |
13 | ## Flexbox options
14 |
15 | Bootstrap 4 is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of [our components]({{< docsref "/components/alerts" >}}) are built with flexbox enabled.
16 |
17 | Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities]({{< docsref "/utilities/flex" >}}) for sizing, alignment, spacing, and more.
18 |
19 | ## Margin and padding
20 |
21 | Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
22 |
23 | ## Toggle `visibility`
24 |
25 | When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities]({{< docsref "/utilities/visibility" >}}). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.
26 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/static/docs/4.3/assets/scss/_nav.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Main navbar
3 | //
4 |
5 | .bd-navbar {
6 | min-height: 4rem;
7 | background-color: $bd-purple;
8 | box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
9 |
10 | @include media-breakpoint-down(md) {
11 | padding-right: .5rem;
12 | padding-left: .5rem;
13 |
14 | .navbar-nav-scroll {
15 | max-width: 100%;
16 | height: 2.5rem;
17 | margin-top: .25rem;
18 | overflow: hidden;
19 |
20 | .navbar-nav {
21 | padding-bottom: 2rem;
22 | overflow-x: auto;
23 | white-space: nowrap;
24 | -webkit-overflow-scrolling: touch;
25 | }
26 | }
27 | }
28 |
29 | @include media-breakpoint-up(md) {
30 | @supports (position: sticky) {
31 | position: sticky;
32 | top: 0;
33 | z-index: 1071; // over everything in bootstrap
34 | }
35 | }
36 |
37 | .navbar-nav {
38 | .nav-link {
39 | padding-right: .5rem;
40 | padding-left: .5rem;
41 | color: $bd-purple-light;
42 |
43 | &.active,
44 | &:hover {
45 | color: $white;
46 | background-color: transparent;
47 | }
48 |
49 | &.active {
50 | font-weight: 600;
51 | }
52 | }
53 | }
54 |
55 | .navbar-nav-svg {
56 | display: inline-block;
57 | width: 1rem;
58 | height: 1rem;
59 | vertical-align: text-top;
60 | }
61 |
62 | .dropdown-menu {
63 | @include font-size(.875rem);
64 | }
65 |
66 | .dropdown-item.active {
67 | font-weight: 600;
68 | color: $gray-900;
69 | background-color: transparent;
70 | background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
71 | background-repeat: no-repeat;
72 | background-position: .4rem .6rem;
73 | background-size: .75rem .75rem;
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/bootstrap4-source/scss/_pagination.scss:
--------------------------------------------------------------------------------
1 | .pagination {
2 | display: flex;
3 | @include list-unstyled();
4 | @include border-radius();
5 | }
6 |
7 | .page-link {
8 | position: relative;
9 | display: block;
10 | padding: $pagination-padding-y $pagination-padding-x;
11 | margin-left: -$pagination-border-width;
12 | line-height: $pagination-line-height;
13 | color: $pagination-color;
14 | background-color: $pagination-bg;
15 | border: $pagination-border-width solid $pagination-border-color;
16 |
17 | &:hover {
18 | z-index: 2;
19 | color: $pagination-hover-color;
20 | text-decoration: none;
21 | background-color: $pagination-hover-bg;
22 | border-color: $pagination-hover-border-color;
23 | }
24 |
25 | &:focus {
26 | z-index: 3;
27 | outline: $pagination-focus-outline;
28 | box-shadow: $pagination-focus-box-shadow;
29 | }
30 | }
31 |
32 | .page-item {
33 | &:first-child {
34 | .page-link {
35 | margin-left: 0;
36 | @include border-left-radius($border-radius);
37 | }
38 | }
39 | &:last-child {
40 | .page-link {
41 | @include border-right-radius($border-radius);
42 | }
43 | }
44 |
45 | &.active .page-link {
46 | z-index: 3;
47 | color: $pagination-active-color;
48 | background-color: $pagination-active-bg;
49 | border-color: $pagination-active-border-color;
50 | }
51 |
52 | &.disabled .page-link {
53 | color: $pagination-disabled-color;
54 | pointer-events: none;
55 | // Opinionated: remove the "hand" cursor set previously for .page-link
56 | cursor: auto;
57 | background-color: $pagination-disabled-bg;
58 | border-color: $pagination-disabled-border-color;
59 | }
60 | }
61 |
62 |
63 | //
64 | // Sizing
65 | //
66 |
67 | .pagination-lg {
68 | @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
69 | }
70 |
71 | .pagination-sm {
72 | @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
73 | }
74 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/content/docs/4.3/examples/carousel/carousel.css:
--------------------------------------------------------------------------------
1 | /* GLOBAL STYLES
2 | -------------------------------------------------- */
3 | /* Padding below the footer and lighter body text */
4 |
5 | body {
6 | padding-top: 3rem;
7 | padding-bottom: 3rem;
8 | color: #5a5a5a;
9 | }
10 |
11 |
12 | /* CUSTOMIZE THE CAROUSEL
13 | -------------------------------------------------- */
14 |
15 | /* Carousel base class */
16 | .carousel {
17 | margin-bottom: 4rem;
18 | }
19 | /* Since positioning the image, we need to help out the caption */
20 | .carousel-caption {
21 | bottom: 3rem;
22 | z-index: 10;
23 | }
24 |
25 | /* Declare heights because of positioning of img element */
26 | .carousel-item {
27 | height: 32rem;
28 | }
29 | .carousel-item > img {
30 | position: absolute;
31 | top: 0;
32 | left: 0;
33 | min-width: 100%;
34 | height: 32rem;
35 | }
36 |
37 |
38 | /* MARKETING CONTENT
39 | -------------------------------------------------- */
40 |
41 | /* Center align the text within the three columns below the carousel */
42 | .marketing .col-lg-4 {
43 | margin-bottom: 1.5rem;
44 | text-align: center;
45 | }
46 | .marketing h2 {
47 | font-weight: 400;
48 | }
49 | .marketing .col-lg-4 p {
50 | margin-right: .75rem;
51 | margin-left: .75rem;
52 | }
53 |
54 |
55 | /* Featurettes
56 | ------------------------- */
57 |
58 | .featurette-divider {
59 | margin: 5rem 0; /* Space out the Bootstrap
more */
60 | }
61 |
62 | /* Thin out the marketing headings */
63 | .featurette-heading {
64 | font-weight: 300;
65 | line-height: 1;
66 | letter-spacing: -.05rem;
67 | }
68 |
69 |
70 | /* RESPONSIVE CSS
71 | -------------------------------------------------- */
72 |
73 | @media (min-width: 40em) {
74 | /* Bump up size of carousel content */
75 | .carousel-caption p {
76 | margin-bottom: 1.25rem;
77 | font-size: 1.25rem;
78 | line-height: 1.4;
79 | }
80 |
81 | .featurette-heading {
82 | font-size: 50px;
83 | }
84 | }
85 |
86 | @media (min-width: 62em) {
87 | .featurette-heading {
88 | margin-top: 7rem;
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/bootstrap4-source/site/layouts/_default/examples.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | {{ .Page.Title | markdownify }} · {{ .Site.Title | markdownify }}
10 |
11 |
12 |
13 | {{ with .Params.robots -}}
14 |
15 | {{- end }}
16 |
17 | {{ partial "stylesheet" . }}
18 | {{ partial "favicons" . }}
19 |
20 |
36 |
37 | {{ range .Page.Params.extra_css }}
38 | {{ "" | safeHTML }}
39 |
40 | {{- end }}
41 |
42 |
43 | {{ .Content }}
44 |
45 | {{ if ne .Page.Params.include_js false }}
46 | {{ if eq (getenv "HUGO_ENV") "production" }}
47 |
48 | {{ else }}
49 |
50 | {{ end }}
51 |
52 | {{ range .Page.Params.extra_js }}
53 |
54 | {{- end }}
55 | {{ end }}
56 |
57 |