10 SEPTEMBER 2022
On this day we learnt to code using bootstrap… we are thought how to use the code and the site can be more responsive and can be used on any device as compatible.
https://getbootstrap.com/docs/5.0/getting-started/introduction/
The above link will direct us to the page where we can get the code and can be used for building the website. The bootstrap will help us to reduce in writing the code by scratch. It will have the code for all the segment and will have to use the code to build the website.
My task on bootstarp:
<!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>Task-5</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>
</head>
<body>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script>
<! — Content →
<h1 style=”color:white; background-color: brown; text-align: center; padding-top: 10px;padding-bottom: 10px; font-weight: bold;”>Travel website</h1>
<! — Navbar →
<div>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<div class=”container-fluid”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
<ul class=”navbar-nav me-auto mb-2 mb-lg-0">
<li class=”nav-item”>
<a class=”nav-link active” aria-current=”page” href=”#”>Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>link</a>
</li>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” href=”#” id=”navbarDropdown” role=”button” data-bs-toggle=”dropdown” aria-expanded=”false”>
Dropdown
</a>
<ul class=”dropdown-menu” aria-labelledby=”navbarDropdown”>
<li><a class=”dropdown-item” href=”#”>Action</a></li>
<li><a class=”dropdown-item” href=”#”>Another action</a></li>
<li><hr class=”dropdown-divider”></li>
<li><a class=”dropdown-item” href=”#”>Something else here</a></li>
</ul>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#” tabindex=”-1" aria-disabled=”true”>Disabled</a>
</li>
</ul>
<form class=”d-flex”>
<input class=”form-control me-2" type=”search” placeholder=”Search” aria-label=”Search”>
<button class=”btn btn-outline-success” type=”submit”>Search</button>
</form>
</div>
</div>
</nav>
</div>
<! — Carousel →
<div>
<div id=”carouselExampleIndicators” class=”carousel slide” data-bs-ride=”carousel”>
<div class=”carousel-indicators”>
<button type=”button” data-bs-target=”#carouselExampleIndicators” data-bs-slide-to=”0" class=”active” aria-current=”true” aria-label=”Slide 1"></button>
<button type=”button” data-bs-target=”#carouselExampleIndicators” data-bs-slide-to=”1" aria-label=”Slide 2"></button>
<button type=”button” data-bs-target=”#carouselExampleIndicators” data-bs-slide-to=”2" aria-label=”Slide 3"></button>
<button type=”button” data-bs-target=”#carouselExampleIndicators” data-bs-slide-to=”3" aria-label=”Slide 4"></button>
<button type=”button” data-bs-target=”#carouselExampleIndicators” data-bs-slide-to=”4" aria-label=”Slide 5"></button>
<button type=”button” data-bs-target=”#carouselExampleIndicators” data-bs-slide-to=”5" aria-label=”Slide 6"></button>
</div>
<div class=”carousel-inner”>
<div class=”carousel-item active”>
<img src=”Pic1.jpg” class=”d-block w-100" alt=”img” style=”height: 300px;”>
</div>
<div class=”carousel-item”>
<img src=”pic2.jpg” class=”d-block w-100" alt=”image” style=”height: 300px;”>
</div>
<div class=”carousel-item”>
<img src=”pic3.jpg” class=”d-block w-100" alt=”image” style=”height: 300px;”>
</div>
<div class=”carousel-item”>
<img src=”pic4.jpg” class=”d-block w-100" alt=”image” style=”height: 300px;”>
</div>
<div class=”carousel-item”>
<img src=”pic5.jpg” class=”d-block w-100" alt=”image” style=”height: 300px;”>
</div>
<div class=”carousel-item”>
<img src=”pic6.jpg” class=”d-block w-100" alt=”image” style=”height: 300px;”>
</div>
</div>
<button class=”carousel-control-prev” type=”button” data-bs-target=”#carouselExampleIndicators” data-bs-slide=”prev”>
<span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
<span class=”visually-hidden”>Previous</span>
</button>
<button class=”carousel-control-next” type=”button” data-bs-target=”#carouselExampleIndicators” data-bs-slide=”next”>
<span class=”carousel-control-next-icon” aria-hidden=”true”></span>
<span class=”visually-hidden”>Next</span>
</button>
</div>
</div>
<br>
<! — content →
<h1 style=”color:BLACK;font-weight: bold; font-style: oblique; padding-top:10px; padding-bottom: 10px;”>Top places:</h1>
<! — Cards →
<div class=”row”>
<div class=”col-sm-3">
<div class=”card” style=”width: 18rem;”>
<img src=”Mumbai.jpg” class=”card-img-top” alt=”image” style=”height: 150px;”>
<div class=”card-body”>
<h5 class=”card-title”>Gate of India</h5>
<p class=”card-text”>The Gateway of India is an arch-monument built in the early 20th century in the city of Bombay (now Mumbai), India.</p>
<a href=”#” class=”btn btn-primary”>Read more</a>
</div>
</div>
</div>
<div class=”col-sm-3">
<div class=”card” style=”width: 18rem;”>
<img src=”Bangalore.jpg” class=”card-img-top” alt=”image” style=”height: 150px;”>
<div class=”card-body”>
<h5 class=”card-title”>Iskon temple</h5>
<p class=”card-text”>The Supreme Lord Krishna has appeared before us in the form of a Deity to accept our services.So it will be remembered.</p>
<a href=”#” class=”btn btn-primary”>Read more</a>
</div>
</div>
</div>
<div class=”col-sm-3">
<div class=”card” style=”width: 18rem;”>
<img src=”Hyderabad.jpg” class=”card-img-top” alt=”image” style=”height: 150px;”>
<div class=”card-body”>
<h5 class=”card-title”>Old city walk</h5>
<p class=”card-text”>Old city walk in Hyderabad takes you back 400 years in time back to the times of the Qutb Shahi Sultans who built the city of Hyderabad.</p>
<a href=”#” class=”btn btn-primary”>Read more</a>
</div>
</div>
</div>
<div class=”col-sm-3">
<div class=”card” style=”width: 18rem;”>
<img src=”trekking.jpg” class=”card-img-top” alt=”image” style=”height: 150px;”>
<div class=”card-body”>
<h5 class=”card-title”>Trekking himalaya</h5>
<p class=”card-text”> Best and safe treks to go with your kids in Himalayas Learn more Are you a seasoned trekker? Here are the most challenging trials in India.</p>
<a href=”#” class=”btn btn-primary”>Read more</a>
</div>
</div>
</div>
</div>
<hr>
<! — Table →
<div>
<table class=”table”>
<thead>
<tr>
<th scope=”col”>sl.no</th>
<th scope=”col”>Place</th>
<th scope=”col”>State</th>
</tr>
</thead>
<tbody >
<tr>
<th scope=”row”>1</th>
<td>Gateway of india</td>
<td>Maharashtra</td>
</tr>
<tr>
<th scope=”row”>2</th>
<td>Iskon temple</td>
<td>Karnataka</td>
</tr>
<tr>
<th scope=”row”>3</th>
<td>Mysore palace</td>
<td>Karnataka</td>
</tr>
<tr>
<th scope=”row”>4</th>
<td>Shiva temple</td>
<td>Kedarnath</td>
</tr>
<tr>
<th scope=”row”>5</th>
<td>old city walk</td>
<td>Hyderabad</td>
</tr>
</tbody>
</table>
</div>
<! — nav-tabs →
<div>
<ul class=”nav nav-tabs” id=”myTab” role=”tablist”>
<li class=”nav-item” role=”presentation”>
<button class=”nav-link active” id=”home-tab” data-bs-toggle=”tab” data-bs-target=”#places” type=”button” role=”tab”
aria-controls=”home” aria-selected=”true”>Places<i class=”fa-sharp fa-solid fa-code”></i></button>
</li>
<li class=”nav-item” role=”presentation”>
<button class=”nav-link” id=”profile-tab” data-bs-toggle=”tab” data-bs-target=”#about” type=”button” role=”tab”
aria-controls=”profile” aria-selected=”false”>About<i class=”fa-sharp fa-solid fa-code”></i></button>
</li>
<li class=”nav-item” role=”presentation”>
<button class=”nav-link” id=”contact-tab” data-bs-toggle=”tab” data-bs-target=”#contact” type=”button” role=”tab”
aria-controls=”contact” aria-selected=”false”>Contact<i class=”fa-sharp fa-solid fa-code”></i></button>
</li>
</ul>
<div class=”tab-content” id=”myTabContent”>
<div class=”tab-pane fade show active” id=”places” role=”tabpanel” aria-labelledby=”home-tab”>
<h3>Places</h3>
<p><ul>
<li>Mumbai</li>
<li>Bangalore</li>
<li>Delhi</li>
<li>Others:<input type=”text”/></li>
</ul>
</p>
</div>
<div class=”tab-pane fade” id=”about” role=”tabpanel” aria-labelledby=”profile-tab”>
<h3>About</h3>
<p>If you made it all the way down here, we would like to thank you for visiting and reading! We hope you’ve found some useful information and you enjoyed this list of best travel websites that we put together with a survey and fellow travel bloggers.</p>
</div>
<div class=”tab-pane fade” id=”contact” role=”tabpanel” aria-labelledby=”contact-tab”>
<h3>Contact</h3>
<p><ul>
<li>Mumbai:9148848040</li>
<li>Bangalore:9741363080</li>
<li>Hyderabad:9880883144</li>
<li>Delhi:9663809226</li>
<li>Himalaya:6362466207</li>
<li>Others:9876543210</li>
</ul></p>
</div>
</div>
<hr>
<! — Nav Footer →
<! —
<nav class=”navbar fixed-bottom navbar-light bg-light”>
<div class=”container-fluid” style=”text-align:center”>
<a class=”navbar-brand” href=”#”>©www.abc.org</a>
</div>
</nav>
→
</div>
</body>
</html>
Output:
