Online Courses website


Go to main Page

Online courses website in Bootstrap 4

Online education website in Bootstrap 4

How to make Online courses website in Bootstrap 4


Online Education website Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>www.IT DESIGNERS.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <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>
</head>
<body>

<nav class="navbar navbar-expand-sm  navbar-light ">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><img class="img-fluid" src="images\logo.png" width="80px"></a>

  <!-- Links -->
  <ul class="navbar-nav ">
    <li class="nav-item">
      <a class="nav-link ml-5 mt-1" href="#">Categories</a>
    </li>
    <li class="nav-item">
      <a class="nav-link ml-5 mt-1" href="#">Teach On IT DESIGNERS</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown ">
      <a class="nav-link dropdown-toggle ml-5 mt-1" href="#" id="navbardrop" data-toggle="dropdown">
        About Us
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Experience</a>
        <a class="dropdown-item" href="#">Working</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
    <nav class="navbar navbar-expand-sm  navbar-dark ml-5">
  <form class="form-inline" action="/action_page.php">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-dark" type="submit">Search</button>
  </form>
</nav>
  
  </ul>
  <button type="button" class="btn btn-info ml-5">Sign In</button>
<button type="button" class="btn btn-outline-dark ml-5">Log In</button>
</nav>
<br>
  
<div class="container-fluid">
  <img src="images\laptop.jpg" width="1330px" height="500px"
  >
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 text-center">
        <br>
        
        <h4>    10,000 online courses</h5>
          <p>Enjoy Variety of Fresh Topics</p>
          <br>
         
          
      </div>
       <div class="col-sm-3 text-center">
        <br>
        
        <h4> Expert Instructors</h5>
          <p>Find Instructor of Your Choice</p>
          <br>
    </div>
    <div class="col-sm-3 text-center">
        <br>
        
        <h4> Certification</h5>
          <p>Get Verified Certificates </p>
          <br>
    </div>
    <div class="col-sm-3 text-center">
        <br>
        
        <h4> Life Time Access</h5>
          <p>Get Lifetime Access on your Courses</p>
          <br>
    </div>
  </div>
  <div class="container-fluid  " >
    <p style="font-size: 24px;">World Largest Website with  Collection of more than 10,000 Courses</p>
    <p style="font-size: 15px;">Choose from our 10,000 Courses and made yourself skillfull and enjoy the life </p>
  </div>
  <div class="container-fluid border border-success  " >
    <p style="font-size: 20px; margin-top: 90px;" class="float-left  ">Enhance Your skills and enter in new era of the technalogy.<br>Learn Programming languages  and Machine Learning.There<br> are lot of Personality Development ,Ethical Hacking,Web <br>designing,Graphic Designing and Mathematics Courses </p>

    <img src="images\girl.png" class="rounded float-right mt-3" width="500px" height="350px">
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
 
 
  <div class="container-fluid">
    
  
  <div class="card float-left ml-5" style="width:250px" >
    <img class="card-img-top" src="https://cdn.pixabay.com/photo/2017/02/05/00/19/web-design-2038872_960_720.jpg" alt="Card image" style="width:100%" height="200px">
    <div class="card-body text-center">
      <h4 class="card-title">Web Development</h4>
      
      <a href="#" class="btn btn-primary">Enroll Now</a>
    
  </div>


  
  
  

  </div>
  <div class="container-fluid">
  <div class="container-fluid ">
    
  
  <div class="card float-left ml-5" style="width:250px">
    <img class="card-img-top" src="https://cdn.pixabay.com/photo/2017/10/01/14/56/communication-2805785__340.jpg" alt="Card image" style="width:100%" height="200px">
    <div class="card-body text-center">
      <h4 class="card-title ">Graphic Designing</h4>
      
      <a href="#" class="btn btn-primary">Enroll Now</a>
    
  </div>
   
  
  
  

  </div>
 
  <div class="container-fluid ">
    
  
  <div class="card float-left ml-5" style="width:250px">
    <img class="card-img-top" src="https://cdn.pixabay.com/photo/2018/04/22/22/57/hacker-3342696__340.jpg" alt="Card image" style="width:100%" height="200px">
    <div class="card-body text-center">
      <h4 class="card-title">Ethical Hacking</h4>
      
      <a href="#" class="btn btn-primary">Enroll Now</a>
    
  </div>
   
  
  
  

  </div>
  <div class="container-fluid ">
    
  
  <div class="card float-left ml-5" style="width:250px">
    <img class="card-img-top" src="https://cdn.pixabay.com/photo/2015/07/17/22/43/student-849825__340.jpg" alt="Card image" style="width:100%" height="200px">
    <div class="card-body text-center">
      <h4 class="card-title ">Business </h4>
      
      <a href="#" class="btn btn-primary">Enroll Now</a>
    
  </div>

</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid  text-center  " >
    <p style="font-size: 20px; margin-top: 90px;" class="float-left  ">Business is extremely important to a country’s economy <br> because businesses provide both goods and services <br> and jobs.  Businesses do these things much more<br> efficiently than individuals could on their own.<br>

</p>
<div class="container-fluid border border-success" >
  
</div>

    <img src="images\man.png" class="rounded float-right mt-3" width="500px" height="300px">

 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p style="font-size:  30px; color: blue; border-bottom: 2px solid black" >Tell Us Your Problem in Description</p>
<div class="form-group">
  <label style="font-size: 24px;" for="comment">Describe:</label>
  <textarea class="form-control bg-light" rows="5" id="comment"></textarea>
</div>
  </div>




</body>
</html>