diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-01-20 00:39:02 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2021-01-20 01:00:20 +0300 |
| commit | eee4b9af8aaa5e6c3dc2d5aa1bd45612c9b30c72 (patch) | |
| tree | 1a86afa2caceb3e214efc0d8dfefed0c3acf6a64 | |
| parent | 8cada12024a597e48f9fe954dfbe9025deb4141c (diff) | |
Tweak homepage appearance slightly
| -rw-r--r-- | index.html | 66 | ||||
| -rw-r--r-- | scss/starter.scss | 2 |
2 files changed, 35 insertions, 33 deletions
@@ -7,45 +7,47 @@ <title>Bootstrap npm starter</title> </head> <body> - <h1>Hello, world!</h1> - <p>You've successfully loaded up the Bootstrap npm starter project!</p> - <p>If this button looks blue, you've done it.</p> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Click me!</button> + <div class="col-md-8 mx-auto"> + <h1>Hello, world!</h1> + <p>You've successfully loaded up the Bootstrap npm starter project!</p> + <p>If this button looks blue and the text purple, you've done it.</p> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Click me!</button> - <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> - <div class="modal-dialog modal-dialog-centered" role="document"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLabel">Success!</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - </div> - <div class="modal-body"> - If you're seeing this modal after clicking the button on the page, Bootstrap's CSS and JS are both working properly. - </div> - <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> - <button type="button" class="btn btn-primary">Save changes</button> + <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog modal-dialog-centered" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLabel">Success!</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + If you're seeing this modal after clicking the button on the page, Bootstrap's CSS and JS are both working properly. + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Save changes</button> + </div> </div> </div> </div> - </div> - <hr class="my-5"> + <hr class="my-5"> - <h2>Adding Bootstrap Icons</h2> - <p><a href="https://icons.getbootstrap.com">Bootstrap Icons</a> are included with the SVG sprite here, but there are other <a href="https://icons.getbootstrap.com/#usage">usage options</a>, too. They're styleable with text utilities and more.</p> + <h2>Adding Bootstrap Icons</h2> + <p><a href="https://icons.getbootstrap.com">Bootstrap Icons</a> are included with the SVG sprite here, but there are other <a href="https://icons.getbootstrap.com/#usage">usage options</a>, too. They're styleable with text utilities and more.</p> - <svg class="bi text-danger" width="32" height="32"> - <use xlink:href="node_modules/bootstrap-icons/bootstrap-icons.svg#heart-fill"/> - </svg> - <svg class="bi text-dark" width="32" height="32"> - <use xlink:href="node_modules/bootstrap-icons/bootstrap-icons.svg#toggles"/> - </svg> - <svg class="bi text-primary" width="32" height="32"> - <use xlink:href="node_modules/bootstrap-icons/bootstrap-icons.svg#shop"/> - </svg> + <svg class="bi text-danger" width="32" height="32"> + <use xlink:href="node_modules/bootstrap-icons/bootstrap-icons.svg#heart-fill"/> + </svg> + <svg class="bi text-dark" width="32" height="32"> + <use xlink:href="node_modules/bootstrap-icons/bootstrap-icons.svg#toggles"/> + </svg> + <svg class="bi text-primary" width="32" height="32"> + <use xlink:href="node_modules/bootstrap-icons/bootstrap-icons.svg#shop"/> + </svg> + </div> <script src="node_modules/jquery/dist/jquery.slim.min.js"></script> <script type="module" src="assets/js/starter.js"></script> diff --git a/scss/starter.scss b/scss/starter.scss index 9cddf29..9c86d00 100644 --- a/scss/starter.scss +++ b/scss/starter.scss @@ -82,7 +82,7 @@ $border-radius: .4rem; // body { - padding: 3rem; + padding: 3rem 1.5rem; } // Style Bootstrap icons |