Skip to content

Commit 592f40b

Browse files
committed
README.md cleanup
1 parent 1195be3 commit 592f40b

File tree

1 file changed

+17
-15
lines changed

1 file changed

+17
-15
lines changed

README.md

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,36 +39,38 @@ bower install bootstrap4-grid-only
3939

4040
## Usage
4141

42-
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.
4343

4444
Simply download the appropriate CSS file and include it in your HTML header (you only need one):
4545
* `bootstrap-grid.css` - The expanded version
4646
* `bootstrap-grid.min.css` - The minified version
4747

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/).
4949

5050
### Basic Usage Example
5151

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+
<div class="bootstrap-wrapper">
54+
<div class="container">
55+
<div class="row">
56+
<div class="col-md-4">.col-md-4</div>
57+
<div class="col-md-4">.col-md-4</div>
58+
<div class="col-md-4">.col-md-4</div>
59+
</div>
60+
<div class="row hidden-sm-down"> <!-- Hidden on small screens -->
61+
<div class="col-md-6">.col-md-6</div>
62+
<div class="col-md-6">.col-md-6</div>
6363
</div>
6464
</div>
65+
</div>
66+
```
6567

6668
## Custom Build Tutorial
6769

6870
You can make your own custom build of Bootstrap by downloading the source, making changes to the SCSS files and compiling.
6971

70-
Here is how you can accomplish what I have done here:
72+
Here is how to accomplish what I have done here:
7173

7274
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.
7476
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

Comments
 (0)