<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Oneclick Tenant</legend> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for=""></label> <div class="col-md-4"> <button id="" name="" class="btn btn-info">General</button> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Tenant Name">Tenant Name</label> <div class="col-md-4"> <input id="Tenant Name" name="Tenant Name" type="text" placeholder="Tenant Name" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Tenant Id">Tenant Id</label> <div class="col-md-4"> <input id="Tenant Id" name="Tenant Id" type="text" placeholder="Tenant Id" class="form-control input-md" required=""> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for=""></label> <div class="col-md-4"> <button id="" name="" class="btn btn-primary">Catalog</button> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Pangaea Compliant</label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Present in Uber Item Store </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Not available in Uber Item Store </label> </div> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for=""></label> <div class="col-md-4"> <button id="" name="" class="btn btn-primary">Relevance</button> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for=""></label> <div class="col-md-4"> <input id="" name="" type="text" placeholder="List of Signals" class="form-control input-md"> </div> </div> <!-- Prepended checkbox --> <div class="form-group"> <label class="col-md-4 control-label" for="signal1"></label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input id="signal1" name="signal1" class="form-control" type="text" placeholder="Signal 1"> </div> <p class="help-block">Click engagement based</p> </div> </div> <!-- Prepended checkbox --> <div class="form-group"> <label class="col-md-4 control-label" for="signal2"></label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input id="signal2" name="signal2" class="form-control" type="text" placeholder="Signal 2"> </div> <p class="help-block">sales based</p> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for=""></label> <div class="col-md-4"> <input id="" name="" type="text" placeholder="Others" class="form-control input-md"> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for=""></label> <div class="col-md-4"> <button id="" name="" class="btn btn-primary">Features</button> </div> </div> <!-- Button Drop Down --> <div class="form-group"> <label class="col-md-4 control-label" for="buttondropdown"></label> <div class="col-md-6"> <div class="input-group"> <input id="buttondropdown" name="buttondropdown" class="form-control input-medium" placeholder="Taxonomy" type="text"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> USGM Taxonomy <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">USGM Taxonomy</a></li> <li><a href="#">ASDA Taxonomy</a></li> <li><a href="#">Other</a></li> </ul> </div> </div> </div> </div> <!-- Prepended checkbox --> <div class="form-group"> <label class="col-md-4 control-label" for="faceting"></label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input id="faceting" name="faceting" class="form-control" type="text" placeholder="Faceting / Filtering"> </div> </div> </div> <!-- Prepended checkbox --> <div class="form-group"> <label class="col-md-4 control-label" for="preso"></label> <div class="col-md-5"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input id="preso" name="preso" class="form-control" type="text" placeholder="Realtime Data API"> </div> <p class="help-block">Preso</p> </div> </div> <!-- Prepended checkbox --> <div class="form-group"> <label class="col-md-4 control-label" for="frontend"></label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input id="frontend" name="frontend" class="form-control" type="text" placeholder="Atlas Frontend"> </div> </div> </div> </fieldset> </form> <div class="container"> <div class="row"> <br><br> <div class="error-notice"> <div class="oaerror danger"> <strong>Error</strong> - You provided a wrong username/password </div> <div class="oaerror warning"> <strong>Error</strong> - You left a field Blank </div> <div class="oaerror info"> <strong>Error</strong> - Please Select a Different Username </div> <div class="oaerror success"> <strong>Yeppi</strong> - You are successfully registered. Please login. </div> </div> </div> </div> <center>Cursed By <a href="http://ioritro.com/486/a-different-approach-to-bootstrap-alert/">Oritro Ahmed </a></center>

.error-notice { margin: 5px 5px; /* Making sure to keep some distance from all side */ } .oaerror { width: 90%; /* Configure it fit in your design */ margin: 0 auto; /* Centering Stuff */ background-color: #FFFFFF; /* Default background */ padding: 20px; border: 1px solid #eee; border-left-width: 5px; border-radius: 3px; margin: 0 auto; font-family: 'Open Sans', sans-serif; font-size: 16px; } .danger { border-left-color: #d9534f; /* Left side border color */ background-color: rgba(217, 83, 79, 0.1); /* Same color as the left border with reduced alpha to 0.1 */ } .danger strong { color: #d9534f; } .warning { border-left-color: #f0ad4e; background-color: rgba(240, 173, 78, 0.1); } .warning strong { color: #f0ad4e; } .info { border-left-color: #5bc0de; background-color: rgba(91, 192, 222, 0.1); } .info strong { color: #5bc0de; } .success { border-left-color: #2b542c; background-color: rgba(43, 84, 44, 0.1); } .success strong { color: #2b542c; }