Design a Job Search Portal using Bootstrap
We will discuss how can we create a Job Search Portal template using Bootstrap. We will use the inbuilt components of Bootstrap to create a Job Search Portal template.
Prerequisites
Approach
- Create a header labeled “Job Search Portal” with a navigation bar menu.
- Create three input boxes for filtering jobs by company, category, and location, and a “Filter” button.
- Add the cards with job titles, company names, and positions for available job listings.
- Finally, ensure to include an “Apply” button to allow users to apply for the job openings.
Example: This example shows the implementation of the above approach.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Design a Job Search Portal using HTML and CSS</ title > <!-- Bootstrap CSS --> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity = "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin = "anonymous" > </ head > < body > < header class = "bg-success text-white text-center py-4" > < h1 >Job Search Portal</ h1 > </ header > < nav class = "bg-secondary py-2" > < ul class = "nav justify-content-center" > < li class = "nav-item" > < a href = "#" class = "nav-link text-white" > Home </ a > </ li > < li class = "nav-item" > < a href = "#" class = "nav-link text-white" > Jobs </ a > </ li > < li class = "nav-item" > < a href = "#" class = "nav-link text-white" > Companies </ a > </ li > < li class = "nav-item" > < a href = "#" class = "nav-link text-white" > About Us </ a > </ li > < li class = "nav-item" > < a href = "#" class = "nav-link text-white" > Contact </ a > </ li > </ ul > </ nav > < section class = "container my-5" > < div class = "search text-center" > < h2 class = "mb-4" >Find Your Dream Job</ h2 > < form action = "#" method = "get" > < div class = "form-row justify-content-center" > < div class = "col-md-3 mb-2" > < input type = "text" class = "form-control" name = "keywords" placeholder = "Keywords" > </ div > < div class = "col-md-3 mb-2" > < input type = "text" class = "form-control" name = "location" placeholder = "Location" > </ div > < div class = "col-md-3 mb-2" > < input type = "text" class = "form-control" name = "company" placeholder = "Company" > </ div > < div class = "col-md-2 mb-2" > < button type = "submit" class = "btn btn-primary btn-block" > Search </ button > </ div > </ div > </ form > </ div > </ section > < section class = "container" > < div class = "job-listings" > < h2 class = "text-center mb-4" >Latest Job Listings</ h2 > < div class = "row" > < div class = "col-md-6" > < div class = "card mb-4" > < div class = "card-body" > < h3 class = "card-title" >Web Developer</ h3 > < p class = "card-text" >Company: GfG</ p > < p class = "card-text" >Location: India</ p > < p class = "card-text" > Description: Good Web Developer </ p > < a href = "#" class = "btn btn-success btn-sm" > Apply Now </ a > </ div > </ div > </ div > < div class = "col-md-6" > < div class = "card mb-4" > < div class = "card-body" > < h3 class = "card-title" >Graphic Designer</ h3 > < p class = "card-text" >Company: w3wiki</ p > < p class = "card-text" >Location: India</ p > < p class = "card-text" > Description: Good Graphic Designer </ p > < a href = "#" class = "btn btn-success btn-sm" > Apply Now </ a > </ div > </ div > </ div > </ div > </ div > </ section > < footer class = "bg-dark text-white text-center py-3" > < p >© 2023 Job Search Portal</ p > </ footer > <!-- Bootstrap JS (Optional) --> < script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > </ script > < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity = "sha384-W4BRFZh4vHpbmlkzg25o82OHehqzqQw1UuIQixjF9tahgPgs2fiwCS4Ih90kZ5G5" crossorigin = "anonymous" > </ script > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity = "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shCk+EAqyWj2UmgpD0jFk5i0Bn5VaU5a4h1J" crossorigin = "anonymous" > </ script > </ body > </ html > |
Output: