Bootstrap Input Groups

Bootstrap Input Groups

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="twitterhandle"> </div> <br> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <br> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span>

Input Group Sizing

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group input-group-lg"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Twitterhandle"> </div> <br> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Twitterhandle"> </div> <br> <div class="input-group input-group-sm"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Twitterhandle"> </div> </form> </div>


Checkboxes and radio addons

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --><br> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio"> </span> <input type="text" class="form-control"> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> </div> <!-- /.row --> </form> </div>


Button addons

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button"> Go! </button> </span> <input type="text" class="form-control"> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> <br> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button"> Go! </button> </span> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> </div> <!-- /.row --> </form> </div>

Buttons with dropdowns

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> DropdownMenu <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- /btn-group --> <input type="text" class="form-control"> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> <br> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> DropdownMenu <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- /btn-group --> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> </div> <!-- /.row --> </form> </div>

Segmented buttons

<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">Dropdwon Menu </button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- /btn-group --> <input type="text" class="form-control"> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --><br> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">Dropdwon Menu </button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- /btn-group --> </div> <!-- /input-group --> </div> <!-- /.col-lg-6 --> </div> <!-- /.row --> </form> </div>

Bootstrap Navigation Elements

<p> Tabs</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Alignment</a></li> <li><a href="#">Colors</a></li> </ul>

Pills Navigation-------BASIC PILLS

<ul class="nav nav-pills"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Alignment</a></li> <li><a href="#">Colors</a></li> </ul>

VERTICLE PILLS

<p> Vertical Pills </p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Design</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Objects</a></li> <li><a href="#">Colors</a></li> <li><a href="#">Alignment</a></li> <li><a href="#">Works</a></li> </ul>

Justified Nav

<p> Justified Nav Elements</p> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Colors</a></li> <li><a href="#">Alignment</a></li> </ul> <br> <br> <br> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Colors</a></li> <li><a href="#">Alignment</a></li> </ul>

Disabled Links

<p> Disabled Link </p> <ul class="nav nav-pills"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li class="disabled"><a href="#">UX(disabled link)</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Alignment</a></li> <li><a href="#">Colors</a></li> </ul> <br> <br> <ul class="nav nav-tabs"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li class="disabled"><a href="#">Alignment(disabled link)</a></li> <li><a href="#">GUI</a></li> <li><a href="#">Colors</a></li> </ul>

-------------DROPDOWNS-------------------------TABS WITH DROPDOWNS-------------------------

<p> Tabs With Dropdown </p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">UX</a></li> <li><a href="#">GUI</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">WEB</a></li> <li><a href="#">Design</a></li> <li><a href="#">Images</a></li> <li class="divider"></li> <li><a href="#">Icons</a></li> </ul> </li> <li><a href="#">Code</a></li> </ul>

PILLS WITH DROPDOWNS

<p> Pills With Dropdown </p> <ul class="nav nav-pills"> <li class="active"><a href="#">Design</a></li> <li><a href="#">UI</a></li> <li><a href="#">iOS</a></li> <li><a href="#">UX</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> GUI <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Images</a></li> <li><a href="#">Icons</a></li> <li><a href="#">Colors</a></li> <li class="divider"></li> <li><a href="#">Frontend</a></li> </ul> </li> <li><a href="#">code</a></li> </ul>