Bootstrap 4 is a commonly used mobile first Frontend library for creating responsive mobile first websites and web layouts. In this tutorial we will explore how to structure HTML using Bootstrap’s common classes and components by creating an Artist Portfolio Webpage – a simple webpage showcasing a list of works with an artist statement and a contact form.
There is also a video above where I walk you through the process of creating it.
Subject Covered
- basic CSS Grid Layout
- creating a navigation bar
- Use of Bootstrap classes / CSS
What Will We Create
Step 1 – Setup Your HTML and Bootstrap Dependencies
First, we will setup our core page structure and the link to the Bootstrap library we will be using to create our Artist Portfolio Webpage – in this case a minified Bootstrap 4 CSS file. This will allow us to use Bootstrap 4 predefined CSS for layouts and presentation of the site – styling, padding, margins, etc. Open your IDE of choice and type the following:
<!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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Artist Portfolio</title> </head> <body> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
Step 2 – NavBar and Jumbotron
So now we have a basic HTML structure in place with a link to Bootstrap CSS and some JS, we are going to want to make the page come alive. First we will add a navbar component to our page for navigation and then a jumbotron with some information on the artist.
Add the following after the <body> tag element to create our first page elements using Bootstrap.
<!-- navbar markup --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">John Smith</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#about">About<span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#paintings">Paintings</a> <a class="nav-item nav-link" href="#contact">Contact</a> </div> </div> </nav> <!-- about --> <div class="jumbotron jumbotron-fluid"> <div class="container" id="about"> <h1 class="display-4">John Smith - Painter of Dreams</h1> <img src = "photos/1935-alexander_rodschenko.jpg" alt ="photo of john smith" width ="200" class="float-right"/> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus ligula, imperdiet ac ultrices eu, lobortis et nibh. Sed pretium diam at mauris tristique, vitae finibus ligula consequat. Cras id vulputate libero. Vestibulum at dui nulla. Praesent non ornare tellus, ut lacinia lacus. Vivamus vel nisi id lorem lobortis cursus at in orci. Praesent at arcu sit amet ipsum consequat cursus. Nam aliquet mi et nisl fringilla, id laoreet nunc faucibus. Ut ac lorem urna. Nunc faucibus nisi eu quam mattis, vel sodales lorem congue.</p> </div> </div>
As you can probably gather by now, one of the strengths of Bootstrap is that it allows you as a developer to concentrate on creating decent UI / UX for users as a lot of the work and abstraction of creating regular UI components is handled for you. This can make Bootstrap a powerful tool for prototyping and rapid app development.
Your page should now look like this, next to add some artworks!
Step 3 – Adding Artwork Images in a Grid
So an artist isn’t much without artworks to show off, so lets create a grid of images in columns of 3, which we do with the following code.
So what going on here – the important layout elements to pay attention to are:
- Container – A content wrapper for whatever is within itself
- Row – Create a new full width row on the page
- Col – Create a new column within the row
These elements can be used in many combinations to achieve a variety of results. The important thing to remember is the general hierarchy of them: Container – > Row – > Col and that the max col width is 12. I urge you to read more in-depth about the grid system of Bootstrap here.
<div class="container" id="paintings"> <h1 class="display-4 text-center">Paintings</h1> <div class="row"> <div class="col-sm"> <img src="photos/2.jpg" class="img-fluid" alt="Responsive image"> </div> <div class="col-sm"> <img src="photos/4.jpg" class="img-fluid" alt="Responsive image"> </div> <div class="col-sm"> <img src="photos/8.jpg" class="img-fluid" alt="Responsive image"> </div> </div> <div class="row mt-4"> <div class="col-sm"> <img src="photos/3.jpg" class="img-fluid" alt="Responsive image"> </div> <div class="col-sm"> <img src="photos/diff.jpg" class="img-fluid" alt="Responsive image"> </div> <div class="col-sm"> <img src="photos/6.jpg" class="img-fluid" alt="Responsive image"> </div> </div> </div>
Final Step – Lets Add a Contact Form
Finally lets add a form element to our page to setup the layout for users to contact the artist. Please not however that making it active is beyond the scope of this tutorial.
Input the following code after the gallery code above.
<div class="container" id="contact"> <h1 class="display-4 text-center">Contact The Artist</h1> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div>
And that’s it, a good start for an artist portfolio page using Bootstrap 4.
This is easily expandable, but offers a good starting point.
YouTube Video to this Tutorial: