You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have already taken the liberty of extracting the grid and responsive utilities mixins (for those who don't know how or don't want to bother keeping it updated), which can be found in `dist/css/bootstrap-grid.css`. I also wrapped the classes with the `.bootstrap-wrapper` class **to avoid conflicts with other libraries** that may already be used in a project.
42
+
Unlike traditional Bootstrapped, the grid must be wrapped with the `.bootstrap-wrapper` class in an attempt to minimize potential conflicts with other libraries.
43
43
44
44
Simply download the appropriate CSS file and include it in your HTML header (you only need one):
45
45
*`bootstrap-grid.css` - The expanded version
46
46
*`bootstrap-grid.min.css` - The minified version
47
47
48
-
Documentation for [grid layout](https://getbootstrap.com/docs/4.1/layout/grid/)usage may be found on the [Bootstrap web site](https://getbootstrap.com/docs/4.1/layout/grid/).
48
+
Documentation for the [grid system](https://getbootstrap.com/docs/4.1/layout/grid/) may be found on the [Bootstrap web site](https://getbootstrap.com/).
49
49
50
50
### Basic Usage Example
51
51
52
-
<div class="bootstrap-wrapper">
53
-
<div class="container">
54
-
<div class="row">
55
-
<div class="col-md-4">.col-md-4</div>
56
-
<div class="col-md-4">.col-md-4</div>
57
-
<div class="col-md-4">.col-md-4</div>
58
-
</div>
59
-
<div class="row hidden-sm-down"> <!-- Hidden on small screens -->
60
-
<div class="col-md-6">.col-md-6</div>
61
-
<div class="col-md-6">.col-md-6</div>
62
-
</div>
52
+
```html
53
+
<divclass="bootstrap-wrapper">
54
+
<divclass="container">
55
+
<divclass="row">
56
+
<divclass="col-md-4">.col-md-4</div>
57
+
<divclass="col-md-4">.col-md-4</div>
58
+
<divclass="col-md-4">.col-md-4</div>
59
+
</div>
60
+
<divclass="row hidden-sm-down"> <!-- Hidden on small screens -->
61
+
<divclass="col-md-6">.col-md-6</div>
62
+
<divclass="col-md-6">.col-md-6</div>
63
63
</div>
64
64
</div>
65
+
</div>
66
+
```
65
67
66
68
## Custom Build Tutorial
67
69
68
70
You can make your own custom build of Bootstrap by downloading the source, making changes to the SCSS files and compiling.
69
71
70
-
Here is how you can accomplish what I have done here:
72
+
Here is how to accomplish what I have done here:
71
73
72
74
1. Download and extract the Bootstrap [source files](https://github.com/twbs/bootstrap/)
73
-
2. Modify the SCSS files as desired. For example, to generate this build I added the `.bootstrap-wrapper` class to `scss/bootstrap-grid.scss` (lines 36 and 62), included the responsive utilities (line 43) and `.img-fluid` class (lines 59-60). I also ported the `scss/utilities/_visibility.scss`[responsive utilities](http://v4-alpha.getbootstrap.com/layout/responsive-utilities/) that were found in alpha for convenience.
75
+
2. Modify the SCSS files as desired. For example, to generate this build I added the `.bootstrap-wrapper` class to `scss/bootstrap-grid.scss` (lines 23 and 50), included the responsive utilities (line 43) and `.img-fluid` class (line 48). I also ported the `scss/utilities/_visibility.scss`[responsive utilities](http://v4-alpha.getbootstrap.com/layout/responsive-utilities/) that were found in alpha for convenience.
74
76
3. Once you are done making your changes, use a program like [Koala](http://koala-app.com/) or [Scout](http://scout-app.io/) to compile the SCSS files into usable CSS files.
0 commit comments