Open In App

Design a Job Search Portal using Bootstrap

Last Updated : 26 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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: Geeksforgeeks</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:


Screenshot-2024-02-25-123226




                                    


                                                                        

                                        

                                            

                                                

                                                    
A

        

            
        

        

                                                

                                                

                                                    anjanasuptb0y                                                

                                            

                                            

            
                                        

                                        

                                            
    

        
        
    
                                            

                                                
                                                
                                            

                                            

                                            Improve
                                                
                                            

                                        

                                    



                            

                                                            

                                    
                                        
                                        Previous Article
                                    
                                    
                                    

                                        Create a Search Bar using HTML and CSS
                                    

                                

                                                            

                                    
                                        Next Article
                                        
                                    
                                    
                                    

                                        JavaScript Program to Print 180 Rotation of Simple Pyramid
                                    

                                

                                                        

                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
  
                        

                                                

                        
                                                    

                                
Similar Reads

                                

                                    
        
            

                
Design a Job Search Portal using HTML and CSS

                
This article will show how to Job Portal static website using HTML, CSS, and JavaScript. We generally see these effects in portfolios of professionals. We have written a code that creates a customized job portal website. Users can easily search for job opportunities by category, and all available jobs are displayed in an organized format with impor

            

            
            

                
                3 min read
            

        
    
        
            

                
Job Search Portal with MERN Stack

                
In this tutorial, we'll guide you through the process of creating a Job Search Portal using the MERN Stack - MongoDB for storing job and user data, Express.js for building web applications, React.js for creating user interfaces, and Node.js for server-side programming. Output Preview: [caption width="800"]Preview[/caption]Prerequisite Mongo DBExpre

            

            
            

                
                9 min read
            

        
    
        
            

                
How to Design a Relational Database for Online Job Portal

                
Online job search and recruitment play an important role in connecting job seekers with employers. A well-structured relationship database is essential for managing communication between job listings, user profiles, applications, and applicants and employers. In this article, we'll examine the basic elements of such a database design, including ent

            

            
            

                
                6 min read
            

        
    
        
            

                
Design a Student Attendance Portal in HTML CSS & JavaScript

                
The Student Attendance Portal is a web application that allows users to mark attendance for students in different classes, add class and students according to requirements, providing a user-friendly interface to update and visualize attendance records. [caption width="800"]Final Output Preview[/caption]Approach:In the first step, we will create a f

            

            
            

                
                10 min read
            

        
    
        
            

                
Job Definitions And Job Queues In AWS Batch

                
AWS Batch is a widely used tool for batch processing and managing workloads on AWS cloud. Batch allows user to focus on managing application. AWS Batch supports many advanced features including batch job scheduling, resource optimization and monitoring. Jobs in AWS Batch are small units of work submitted to the aws batch environment for execution.

            

            
            

                
                5 min read
            

        
    
        
            

                
Organic Search vs Paid Search vs Local Search in SEO

                
Search Engine Optimization (i.e., SEO) is the most powerful way when it comes to effective traffic and visibility for the website. In SEO, three unique strategies stand out which are organic search, paid search, and local search. Every single one of these three, parts is very important in forming a brand's online image and appealing to potential us

            

            
            

                
                5 min read
            

        
    
        
            

                
What is the Difference between Website and  Web Portal

                
What is most confusing to people starting off their web journey is the difference between a website and a web portal. When asked people who had layman knowledge on the subject, some were unable to hit the point, most of them said there was, however, no difference and there were some who had a very confused opinion on the subject. What we realized w

            

            
            

                
                8 min read
            

        
    
        
            

                
ReactJS Evergreen Portal Component

                
React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Portal Component provides a way for the user to render outside the current DOM tree. It is a simple utility component that helps with the ReactDOM.createPortal. We can use t

            

            
            

                
                2 min read
            

        
    
        
            

                
ReactJS Blueprint Portal Component

                
BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. Portal Component renders its children into a new subtree outside the current component hierarchy. We can use the following approach in ReactJS to use the ReactJS Blueprint Port

            

            
            

                
                2 min read
            

        
    
        
            

                
ReactJS Semantic UI Portal Addons

                
Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses the predefined CSS and JQuery languages to incorporate them into different frameworks. In this article, we will find out how to use Portal Addons in ReactJS Semantic UI. Portal Addons are use

            

            
            

                
                2 min read
            

        
                                    

                                                                    
                                                            

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                            
                                                                    

                                                                                

                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                




	
	
	

	
	

	
	    

	
	

	
	



                
        

    

    

        

            

            

        

    















	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox