Last active
July 2, 2023 19:07
-
-
Save jsoma/a32534f33f8794da7eba231080e16dfb to your computer and use it in GitHub Desktop.
A Bootstrap 4 template for a portfolio site (and other things, too). A handful of handy pieces in there, not as complicated or customized as the stuff on https://getbootstrap.com/.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <!-- Required meta tags --> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <!-- Bootstrap CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> | |
| <title>Bootstrap Template</title> | |
| <style> | |
| /* Add a little space under the navbar */ | |
| .navbar { | |
| margin-bottom: 30px; | |
| } | |
| /* Make an image background for a section */ | |
| .background-1 { | |
| background: url('nature.jpg'); | |
| background-size: cover; | |
| color: white; | |
| text-shadow: darkgrey 1px 1px 3px; | |
| padding-top: 100px; | |
| padding-bottom: 100px; | |
| } | |
| /* Make the footer look nice */ | |
| .footer { | |
| background: #f5f5f5; | |
| padding-top: 60px; | |
| padding-bottom: 60px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- As a link --> | |
| <nav class="navbar navbar-expand navbar-light bg-light"> | |
| <a class="navbar-brand" href="#">My Portfolio</a> | |
| <div> | |
| <div class="navbar-nav"> | |
| <a class="nav-item nav-link" href="#">Home</a> | |
| <a class="nav-item nav-link" href="#">Portfolio</a> | |
| <a class="nav-item nav-link" href="#">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <div class="alert alert-info"> | |
| Remember, it's almost always <strong>container -> row -> columns</strong> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-6"> | |
| <h1>This column is 6 page grid columns wide</h1> | |
| <p>So it will go across half of the page.</p> | |
| </div> | |
| <div class="col-sm-6"> | |
| <p>This one is, too! <strong>Even if I use a lot of content.</strong></p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <h3>This column is 4 wide</h3> | |
| <p>So it will go take up 33% of all 12 columns.</p> | |
| </div> | |
| <div class="col-sm-4"> | |
| <h3>This column is 4 wide</h3> | |
| <p>So it will go take up 33% of all 12 columns.</p> | |
| </div> | |
| <div class="col-sm-4"> | |
| <h3>This column is 4 wide</h3> | |
| <p>So it will go take up 33% of all 12 columns.</p> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <h1>Now I'll make a section of images</h1> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-3"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| </div> | |
| <div class="col-sm-3"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| </div> | |
| <div class="col-sm-3"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| </div> | |
| <div class="col-sm-3"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| </div> | |
| </div> | |
| <div class="row mt-3"> | |
| <div class="col"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| </div> | |
| <div class="col"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| </div> | |
| <div class="col"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| </div> | |
| <div class="col"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| </div> | |
| </div> | |
| <div class="row mt-3"> | |
| <div class="col"> | |
| <p>I added the <code>mt-3</code> class in order to give a margin on the top that's the "normal" spacing amount. Why is it called <code>mt-3</code>? I dunno, programming.</p> | |
| <p>I also used <code>col</code> instead of <code>col-sm-3</code> - it will automatically space your columns out evenly for you!</p> | |
| </div> | |
| </div> | |
| <div class="row mt-3"> | |
| <div class="col-sm-6"> | |
| <h3>You can, of course, always some text or buttons or whatever</h3> | |
| <p>I used <code>btn-sm</code> to make the button on the right smaller, too.</p> | |
| </div> | |
| <div class="col-sm-3"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| <p>Maybe some text?</p> | |
| <a href="#" class="btn btn-primary">And a link</a> | |
| </div> | |
| <div class="col-sm-3"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| <p>Maybe some text?</p> | |
| <a href="#" class="btn btn-danger btn-sm">And a link</a> | |
| </div> | |
| </div> | |
| <div class="row mt-3"> | |
| <div class="col-sm-6"> | |
| <h3>Bootstrap cards</h3> | |
| <p>Something similar to the above but styled a little differently might be <a href="https://getbootstrap.com/docs/4.0/components/card/">Bootstrap cards</a>, which I'll put a couple to the right.</p> | |
| </div> | |
| <div class="col-sm-3"> | |
| <div class="card"> | |
| <img class="card-img-top" src="nature.jpg" alt="Card image cap"> | |
| <div class="card-body"> | |
| <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> | |
| <a href="#" class="btn btn-primary btn-sm">Go somewhere</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-3 "> | |
| <div class="card"> | |
| <img class="card-img-top" src="nature.jpg" alt="Card image cap"> | |
| <div class="card-body"> | |
| <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. <a href="#">This is a link</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="background-1"> | |
| <div class="container"> | |
| <h1>This part uses custom CSS</h1> | |
| <p>Go look at <code>.background-1</code> in the <code><style></code> block.</p> | |
| <p>I had to close the <code>.container</code> section before I did this, and start a new one afterward.</p> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col"> | |
| <h1>This is normal plain text</h1> | |
| <h3>It takes up the entire space.</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-lg-8 offset-lg-2"> | |
| <h1>This is normal plain text</h1> | |
| <h3>It takes up <em>66%</em> of the screen (8 of 12 rows)</h3> | |
| <p>But <em>only on a large (<code>lg</code>) screen</em>.But when you resize to have a smaller screen it takes up the whole space!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <img src="nature.jpg" class="img-fluid"> | |
| </div> | |
| </div> | |
| <div class="row mt-3"> | |
| <div class="col-lg-8 offset-lg-2"> | |
| <p>The image above this takes up the entire space. It's just a <code>col</code>, while this row is going to do the only-be-half-width-on-a-big-screen thing because I used <code>col-lg-8 offset-lg-2</code>.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="footer text-muted"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col"> | |
| <p><strong>This is a footer.</strong></p> | |
| <p>I could use this space to tell you a lot about myself.</p> | |
| </div> | |
| <div class="col"> | |
| <p>Maybe I'll put social media stuff here.</p> | |
| <ul> | |
| <li><a href="#">Blah</a></li> | |
| <li><a href="#">Blah</a></li> | |
| <li><a href="#">Blah</a></li> | |
| </ul> | |
| </div> | |
| <div class="col"> | |
| <p>This does use some custom CSS to make the background grey and add a little padding up top and below, so you can edit it in the <code><style></code> block at the top of the HTML.</p> | |
| </div> | |
| <div class="col"> | |
| <p>I could list some of my favorite projects over here? Or something like that, maybe.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Optional JavaScript --> | |
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment