grid system using Bootstrap




Example -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>My Example</title>
  <style>
    body {
      padding: 30px;
    }
  </style>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>

  <!-- HTML Form -->
  <div class="container-fluid">
      <div class="row">

        <div class="col-xs-2">
          <input type="text" class="form-control" placeholder="Title">
        </div>

        <div class="col-xs-4">
          <input type="text" class="form-control" placeholder="First Name">
        </div>

        <div class="col-xs-6">
          <input type="text" class="form-control" placeholder="Last Name">
        </div>

      </div>
  </div>

  <!-- jQuery library -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body>
</html>

Output-



Share on Google Plus

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment