Categories: UI

Bootstrap UI Template for Quick Web UI

The article presents copy and paste bootstrap code that one could take and get started with quick UI.

Personally, as a Java developer, I use it very often to create quick UI without focusing much on the UI details. From there on, I keep on adding further UI elements as and when required. You could get code samples from Bootstrap UI website.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Hello World</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
    <header class="navbar navbar-static-top" id="top" role="banner">
    <div class="container">
        <div class="navbar-header">
              <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
              <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
         <a href="/" class="navbar-brand">WebSiteName</a>
        </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
    <ul class="nav navbar-nav">
         <li><a href="#">Simple Link</a></li>
         <li class="dropdown"><a href="#" class="dropdown-toggle"
                data-toggle="dropdown">DropDown Link<b class="caret"></b></a>
         <ul class="dropdown-menu">
              <li><a href="#">Link1</a></li>
         </ul></li>
    </ul>
    </nav>
    </div>
</header>
<form class="form-horizontal" role="form" method="post" action="#">
     <div class="form-group">
          <label class="col-md-2 control-label">First Name</label>
          <div class="col-md-2">
               <input type="text" class="form-control" name="first_name">
          </div>
     </div>
     <div class="form-group">
          <label class="col-md-2 control-label">Country</label>
             <div class="col-md-2">
          <select class="form-control" name="Country">
             <option value="1">India</option>
             <option value="2">UK</option>
             <option value="3">USA</option>
          </select>
     </div>
     </div>
     <div class="form-group">
         <div class="col-md-4" style="padding:10px 0px 0px 250px">
             <button type="submit" class="btn btn-primary">Submit</button>
         </div>
     </div>
</form>
</body>
</html>

[adsenseyu1]

Author
Recent Posts

Nidhi Rai

Technology Blogger at Vitalflux.com

Nidhi has been been actively blogging in different technologies such as AI / machine learning and internet technologies. Her field of interest includes AI / ML, Java, mobile technologies, UI programming such as HTML, CSS, Javascript (Angular/ReactJS etc), open-source and other related technologies.