Ex No: 1 BOOTSTRAP GRID SYSTEM
Aim: To create a profile page using bootstrap grid system.
Procedure
Step1: Create a folder “Ex1” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Add Bootstap resource files (CSS, JS) and add necessary additional resource files in correct folders.
Step4: Use Bootstrap grid system classes "container", "row", "col" and "card" to create the profile page.
Source Code

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Page</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #f8f9fa;
    }
    .card-title{
      text-decoration: underline;
    }
  </style>
</head>
<body>

  <div class="container mt-5">
    <div class="row">

      <div class="col-md-4">
        <div class="card">
          <img src="img/pic.jpg" class="card-img-top" alt="Profile Picture">
          <div class="card-body">
            <h5 class="card-title">Dr.D. Natarajasivan</h5>
            <p class="card-text">Web Developer</p>
          </div>
        </div>
      </div>

      <div class="col-md-8">

        <div class="card">
          <div class="card-body">
            <h5 class="card-title">About Me</h5>
            <p class="card-text">
              Hello everyone, I am Dr. D. Natarajasivan a web developer who loves to create and beautify websites.
              I love making new websites which are easy to use and can be accessed by anyone.
            </p>
          </div>
        </div>
        
        <div class="card mt-3">
          <div class="card-body">
            <h5 class="card-title">Skills</h5>
            <ul>
              <li>HTML</li>
              <li>CSS</li>
              <li>JavaScript</li>
              <li>Bootstrap</li>
            </ul>
          </div>
        </div>
        
        <div class="card mt-3">
          <div class="card-body">
            <h5 class="card-title">Contact</h5>
            <p>Email: dnstnpt@gmail.com</p>
            <p>Phone: +91 9894686246</p>
          </div>
        </div>
      </div>
      
    </div>
  </div>

   <script src="js/jquery-3.5.0.min.js"></script>
   <script src="js/popper.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
</body>
</html>
Result: Thus a profile page using bootstrap grid system.