1 Bootstap Media Breakpoints:
3 @include media-breakpoint-up(xs) { ... }
4 @include media-breakpoint-up(sm) { ... }
5 @include media-breakpoint-up(md) { ... }
6 @include media-breakpoint-up(lg) { ... }
7 @include media-breakpoint-up(xl) { ... }
10 @include media-breakpoint-up(sm) {
16 @include media-breakpoint-down(xs) { ... }
17 @include media-breakpoint-down(sm) { ... }
18 @include media-breakpoint-down(md) { ... }
19 @include media-breakpoint-down(lg) { ... }
21 @include media-breakpoint-only(xs) { ... }
22 @include media-breakpoint-only(sm) { ... }
23 @include media-breakpoint-only(md) { ... }
24 @include media-breakpoint-only(lg) { ... }
25 @include media-breakpoint-only(xl) { ... }
32 $grid-gutter-width-base: 30px;
34 $grid-gutter-widths: (
35 xs: $grid-gutter-width-base, // 30px
36 sm: $grid-gutter-width-base, // 30px
37 md: $grid-gutter-width-base, // 30px
38 lg: $grid-gutter-width-base, // 30px
39 xl: $grid-gutter-width-base // 30px
43 // Extra small screen / phone
45 // Small screen / phone
47 // Medium screen / tablet
49 // Large screen / desktop
51 // Extra large screen / wide desktop
55 $container-max-widths: (
62 // Creates a wrapper for a series of columns
63 @mixin make-row($gutters: $grid-gutter-widths) {
67 @each $breakpoint in map-keys($gutters) {
68 @include media-breakpoint-up($breakpoint) {
69 $gutter: map-get($gutters, $breakpoint);
70 margin-right: ($gutter / -2);
71 margin-left: ($gutter / -2);
76 // Make the element grid-ready (applying everything but the width)
77 @mixin make-col-ready($gutters: $grid-gutter-widths) {
79 // Prevent columns from becoming too narrow when at smaller grid tiers by
80 // always setting `width: 100%;`. This works because we use `flex` values
81 // later on to override this initial width.
83 min-height: 1px; // Prevent collapsing
85 @each $breakpoint in map-keys($gutters) {
86 @include media-breakpoint-up($breakpoint) {
87 $gutter: map-get($gutters, $breakpoint);
88 padding-right: ($gutter / 2);
89 padding-left: ($gutter / 2);
94 @mixin make-col($size, $columns: $grid-columns) {
95 flex: 0 0 percentage($size / $columns);
96 width: percentage($size / $columns);
97 // Add a `max-width` to ensure content within each column does not blow out
98 // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
99 // do not appear to require this.
100 max-width: percentage($size / $columns);
103 // Get fancy by offsetting, or changing the sort order
104 @mixin make-col-offset($size, $columns: $grid-columns) {
105 margin-left: percentage($size / $columns);
108 @mixin make-col-push($size, $columns: $grid-columns) {
109 left: if($size > 0, percentage($size / $columns), auto);
112 @mixin make-col-pull($size, $columns: $grid-columns) {
113 right: if($size > 0, percentage($size / $columns), auto);
118 @include make-container();
124 @include make-col-ready();
126 @media (max-width: 32em) {
127 @include make-col(6);
129 @media (min-width: 32.1em) {
130 @include make-col(8);
134 @include make-col-ready();
136 @media (max-width: 32em) {
137 @include make-col(6);
139 @media (min-width: 32.1em) {
140 @include make-col(4);
146 <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
147 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
148 <span class="navbar-toggler-icon"></span>
150 <a class="navbar-brand" href="#">Navbar</a>
152 <div class="collapse navbar-collapse" id="navbarSupportedContent">
153 <ul class="navbar-nav mr-auto">
154 <li class="nav-item active">
155 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
157 <li class="nav-item">
158 <a class="nav-link" href="#">Link</a>
160 <li class="nav-item">
161 <a class="nav-link disabled" href="#">Disabled</a>
164 <form class="form-inline my-2 my-lg-0">
165 <input class="form-control mr-sm-2" type="text" placeholder="Search">
166 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>