This job template is built on the latest frameworks like Bootstrap 5, HTML5, and CSS3. This template is 100% responsive and compatible with all available browsers and devices. This template attracts and engages more users’, clean codes can help you with your project.
Key Features: Bootstrap 5
HTML 5
CSS 3
How to create a simple BOOTSTRAP 5 Job Template?
1. Create a new index.html file in your project root. Include the tag as well for proper responsive behavior in mobile devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Template</title>
</head>
<body>
</body>
</html>
2. Include Bootstrap’s CSS and JS. Place the <link> tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing </body>. Add Font Awesome CDN to your website
</head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> </head>
3. Finally add your simple code.
<div class="container mt-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="logo"><img src="https://s3-ap-southeast-1.amazonaws.com/xpresslivedonotmess-live/Organizations/logo_10232.jpg" style="width:35px; height:35px;"></div>
<div class="name">DEWMAS</div>
<div class="btn btn-info ml-auto" style="border-radius:50px; color:white; font-size:small;"><i class="fa fa-briefcase" aria-hidden="true"></i> <span style="color:white">Full Time</span></div>
</div>
<h5 style="color:orange;">Full-Stack Developer</h5>
<div class="d-flex align-items-center" >
<div><img src="https://www.pngitem.com/pimgs/m/4-42516_full-stack-developer-png-transparent-png.png" style="width:150px; height:150px;"></div>
<div class="text"><p class="my-3" style="text-align:justify;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque eveniet modi ullam, inventore eligendi maiores asperiores. Consequuntur, cum doloribus nemo, sed optio eaque, officiis doloremque ipsam officia quasi atque magnam.</p>
<div class="d-flex align-items-center">
<div class=""><i class="fa fa-map-marker" aria-hidden="true"></i> Jaffna</div>
<div class="text-primary" >LKR13000</div>
<div class=""><i class="fa fa-calendar" aria-hidden="true"></i><span >10 Days ago</span></div>
<div class="btn btn-danger ml-auto">Alert</div>
<div class="btn btn-primary">Apply</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center">
<div class="logo"><img src="https://s3-ap-southeast-1.amazonaws.com/xpresslivedonotmess-live/Organizations/logo_10232.jpg" style="width:35px; height:35px;"></div>
<div class="name">DEWMAS</div>
<div class="btn btn-info ml-auto" style="border-radius:50px; color:white; font-size:small;"><i class="fa fa-briefcase" aria-hidden="true"></i> <span style="color:white">Full Time</span></div>
</div>
<h5 style="color:orange;">Full-Stack Developer</h5>
<div class="d-flex align-items-center" >
<div><img src="https://www.pngitem.com/pimgs/m/4-42516_full-stack-developer-png-transparent-png.png" style="width:150px; height:150px;"></div>
<div class="text"><p class="my-3" style="text-align:justify;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque eveniet modi ullam, inventore eligendi maiores asperiores. Consequuntur, cum doloribus nemo, sed optio eaque, officiis doloremque ipsam officia quasi atque magnam.</p>
<div class="d-flex align-items-center">
<div class=""><i class="fa fa-map-marker" aria-hidden="true"></i> Jaffna</div>
<div class="text-primary" >LKR13000</div>
<div class=""><i class="fa fa-calendar" aria-hidden="true"></i><span >10 Days ago</span></div>
<div class="btn btn-danger ml-auto">Alert</div>
<div class="btn btn-primary">Apply Now</div>
</div>
</div>
</div>
</div>
I hope this is useful.
0 Comments