Create a Portfolio Gallery using Bootstrap
The portfolio gallery is useful when your website contains different types of content or so much content. With the help of a portfolio gallery, you can easily display all the content on your front page to the user. We are going to build a Portfolio Gallery using Bootstrap.
Prerequisites
Approach
- Set up basic HTML structure with doctype, head, and body.
- Use Bootstrap for a clean and visually appealing design.
- Create a responsive grid layout with rows and columns.
- Use media queries to adjust the layout for different screen sizes.
- Display portfolio items with images, titles, and descriptions.
- Ensure images are responsive, and use alternative text for accessibility.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Create a Portfolio Gallery using HTML and CSS</ title > <!-- Bootstrap CSS --> < link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body style = "background-color: #f8f9fa;" > < div class = "container mt-5" > <!-- Title and tag --> < h1 class = "text-center text-success" > My Portfolio </ h1 > < h3 class = "text-center text-secondary" > A Collection of My Work </ h3 > < hr > <!-- Content of the body --> < h2 class = "mt-4 text-center text-primary" > Portfolio Gallery </ h2 > < div class = "card-deck mt-4" > < div class = "card border-dark" > < img src = alt = "" class = "card-img-top" > < div class = "card-body" > < h5 class = "card-title text-primary" > < a href = "#" class = "text-dark" > HTML Tutorials</ a ></ h5 > < p class = "card-text text-secondary" > HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. </ p > </ div > </ div > < div class = "card border-dark" > < img src = alt = "" class = "card-img-top" > < div class = "card-body" > < h5 class = "card-title text-primary" > < a href = "#" class = "text-dark" > CSS Tutorials</ a ></ h5 > < p class = "card-text text-secondary" > Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. </ p > </ div > </ div > < div class = "card border-dark" > < img src = alt = "" class = "card-img-top" > < div class = "card-body" > < h5 class = "card-title text-primary" > < a href = "#" class = "text-dark" > PHP Tutorials</ a ></ h5 > < p class = "card-text text-secondary" > The term PHP is an acronym for PHP: Hypertext Preprocessor. PHP is a server-side scripting language designed specifically for web development. PHP can be easily embedded in HTML files. </ p > </ div > </ div > < div class = "card border-dark" > < img src = alt = "" class = "card-img-top" > < div class = "card-body" > < h5 class = "card-title text-primary" > < a href = "#" class = "text-dark" > JavaScript Tutorials</ a ></ h5 > < p class = "card-text text-secondary" > Javascript was developed by Brendan Eich in 1995. At first, it was called LiveScript but was later name to JavaScript. JavaScript is the muscle of the structure. </ p > </ div > </ div > </ div > </ div > <!-- Bootstrap JS and jQuery --> < script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" > </ script > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" > </ script > </ body > </ html > |
Output:
Contact Us