How To Create A Web Page Using Bootstrap 4
How To Create A Web Page Using Bootstrap 4
1.Download Sublime Editor.
2.Enter The Folling Code
<!DOCTYPE html>
<html>
<head>
<title>UI</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="weboot.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<a href="#" class="navbar-brand">Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"></div>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav mr-auto justify-content-center">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">List</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Gallery</a>
<a href="#" class="dropdown-item">Images</a>
<a href="#" class="dropdown-item">Pics</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn menu-right-btn border text-danger" type="submit">Template</button>
</form>
</div></div>
</nav>
</header>
<main>
<div class="container-fluid p-0">
<div class="site-content">
<div class="d-flex justify-content-center ">
<div class="d-flex flex-column">
<h1 class="site-title">Bootstrap UI</h1>
<p class="site-desc font-weight-bold font-italic text-wrap">
Image result for flower meaning While many flowers
are linked to romance and passion, you may be shocked to learn.</p>
<div class="d-flex">
<input type="button" value="Buy Template" class="btn site-btn1 px-4 py-3 btn-dark text">
</div>
</div>
</div>
</div>
</div>
<div class="section-1">
<div class="container text-center">
<h1 class="heading-1">Fantastic Features</h1>
<h1 class="heading-2">& Different Types Of Templates</h1>
<p class="para-1 text-justify">A shape or pattern that is cut out of a hard material (such as metal or plastic) and used to make the same shape and pattern in other pieces of material.a computer document that has the basic format of something (such as a business letter, chart, graph, etc.)</p>
<div class="row justify-content-center text-center">
<div class="col-sm-4">
<div class="card">
<img src="1.jpg" style="height: 210px;" class="card-img-top">
<div class="card-body" >
<h4 class="card-title">Flower</h4>
<p class="card-text">Image result for flower meaning While many flowers are linked to romance and passion.</p>
</div>
</div></div>
<div class=col-sm-4>
<div class="card">
<img src="3.jpg" style="height: 210px;" class="card-img-top">
<div class="card-body">
<h4 class="card-title">WaterFall</h4>
<p class="card-text">A cascade of water falling from a height, formed when a river or stream flows over a precipice or steep incline.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img src="4.jpg" style="height: 210px;" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Mountain</h4>
<p class="card-text">A large natural elevation of the earth's surface rising abruptly from the surrounding level; a large steep hill.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-2">
<div class="container-fluid">
<div class="d-flex justify-content-end">
<div class="d-flex flex-column m-4">
<h1 class="heading-1">Like & Share</h1>
<p class="para"> A computer document that has the basic format of something </p>
<input type="button" value="Show" class="btn btn-danger">
</div>
</div>
</div>
</div>
<div class="section-3 text-justify">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="d-flex flex-row">
<i class="fas fa-question fa-3x m-2"></i>
<div class="d-flex flex-column">
<h3 class="m-2">24/7 Support</h3>
<p class="m-2">A shape or pattern that is cut out of a hard material (such as metal or plastic) and used to make the same shape and pattern in other pieces of material. : a computer document that has the basic format of something (such as a business letter, chart, graph, etc.</p>
</div>
</div></div>
<div class="col-sm-4">
<div class="d-flex flex-row">
<i class="fas fa-seedling fa-3x m-2"></i>
<div class="d-flex flex-column">
<h3 class="m-2">Marketing</h3>
<p class="m-2">A shape or pattern that is cut out of a hard material (such as metal or plastic) and used to make the same shape and pattern in other pieces of material. : a computer document that has the basic format of something (such as a business letter, chart, graph, etc.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="d-flex flex-row">
<i class="fas fa-rocket fa-3x m-2"></i>
<div class="d-flex flex-column">
<h3 class="m-2">Speed</h3>
<p class="m-2">A shape or pattern that is cut out of a hard material (such as metal or plastic) and used to make the same shape and pattern in other pieces of material. : a computer document that has the basic format of something (such as a business letter, chart, graph, etc.</p>
</div>
</div></div>
</div>
<div class="row mt-2">
<div class="col-sm-4">
<div class="d-flex flex-row">
<i class="fas fa-user-shield fa-3x m-2"> </i>
<div class="d-flex flex-column">
<h3 class="m-2">Authorized</h3>
<p class="m-2">A shape or pattern that is cut out of a hard material (such as metal or plastic) and used to make the same shape and pattern in other pieces of material. : a computer document that has the basic format of something (such as a business letter, chart, graph, etc.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="d-flex flex-row">
<i class="fas fa-search fa-3x m-2"> </i>
<div class="d-flex flex-column">
<h3 class="m-2">SEO</h3>
<p class="m-2">A shape or pattern that is cut out of a hard material (such as metal or plastic) and used to make the same shape and pattern in other pieces of material. : a computer document that has the basic format of something (such as a business letter, chart, graph, etc.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="d-flex flex-row">
<i class="fas fa-sliders-h fa-3x m-2"> </i>
<div class="d-flex flex-column">
<h3 class="m-2">Customize</h3>
<p class="m-2">A shape or pattern that is cut out of a hard material (such as metal or plastic) and used to make the same shape and pattern in other pieces of material. : a computer document that has the basic format of something (such as a business letter, chart, graph, etc.</p>
</div>
</div>
</div>
<div class="section-4 bg-dark">
<div class="container">
<div class="row">
<div class="col-sm-5 p-1">
<img src="4.jpg" width="450" height="360">
</div>
<div class="col-sm-7 px-2 ">
<h1 class="text-white mt-2">Didn't Know Where To Start From:</h1>
<a href="#">Join Us</a>
<p class="para-1">A shape or pattern that is cut out of a hard material (such as metal or plastic) and used to make the same shape and pattern in other pieces of material. : a computer document that has the basic format of something (such as a business letter, chart, graph, etc.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="section-5 text-center">
<h4 style="margin-top: 5%;">Get Template Design Daily</h4>
<h4 class="my-2">If You Need Any Help</h4>
<div class="form-inline justify-content-center">
<input type="text" name="Email" id="Email" placeholder="Enter Email" size="40" class="form-control px-4 py-3 mt-4">
<input type="button" value="Contact Us" class="form-control btn btn-danger px-4 mt-4">
</div>
<div class="social" style="margin:5%;">
<div class="d-flex flex-row justify-content-center">
<a href="#facebook"><i class="fab fa-facebook-f m-2"></i></a>
<a href="#twitter"><i class="fab fa-twitter m-2"></i></a>
<a href="#instagram"><i class="fab fa-instagram m-2"></i></a>
<a href="#youtube"><i class="fab fa-youtube m-2"></i></a>
</div>
</div>
<hr>
<h5 style="color: lightseagreen;"> Vamshi ©</h5>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Comments
Post a Comment