twitter-bootstrap – Page 14

Input group – two inputs close to each other

February 22, 2023 by Tarik

working workaround: <div class=”input-group”> <input type=”text” class=”form-control input-sm” value=”test1″ /> <span class=”input-group-btn” style=”width:0px;”></span> <input type=”text” class=”form-control input-sm” value=”test2″ /> </div> downside: no border-collapse between the two text-fields, but they keep next to each other http://jsfiddle.net/EfC26/ Update thanks to Stalinko This technique allows to glue more than 2 inputs. Border-collapsing is achieved using “margin-left: -1px” (-2px … Read more

how to give a border to bootstrap tab contents

February 21, 2023 by Tarik

The following css should do exactly what you’re looking for 🙂 .tab-content { border-left: 1px solid #ddd; border-right: 1px solid #ddd; padding: 10px; } .nav-tabs { margin-bottom: 0; } margin-bottom: 0; on .nav-tabs removes the gap in between the pills and content. The padding on .tab-content makes the content not pressed against the new borders … Read more

Twitter Bootstrap Navbar with AngularJS – Collapse Not Functioning

February 21, 2023 by Tarik

For those interested – Here is another way of implementing this without Bootstrap’s javascript. Import Angular’s UI-Bootstrap. HTML: <div class=”navbar navbar-inverse” ng-controller=”NavBarCtrl”> <div class=”navbar-inner”> <div class=”container”> <button class=”btn btn-navbar” ng-click=”isCollapsed = !isCollapsed”> <span class=”icon-bar”></span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> </button> <a class=”brand” href=”#”>Short Course</a> <div class=”nav-collapse” uib-collapse=”isCollapsed”> <ul class=”nav”> <li><a href=”#”><i class=”icon-home icon-white”></i> Home</a> </li> <li><a … Read more

Applying styles to tables with Twitter Bootstrap

February 20, 2023 by Tarik

Bootstrap offers various table styles. Have a look at Base CSS – Tables for documentation and examples. The following style gives great looking tables: <table class=”table table-striped table-bordered table-condensed”> … </table>

Reconcile Angular.js and Bootstrap form validation styling

February 20, 2023 by Tarik

Use Bootstrap’s “error” class for styling. You can write less code. <form name=”myForm”> <div class=”control-group” ng-class=”{error: myForm.name.$invalid}”> <label>Name</label> <input type=”text” name=”name” ng-model=”project.name” required> <span ng-show=”myForm.name.$error.required” class=”help-inline”> Required</span> </div> </form> EDIT: As other answers and comments point out – in Bootstrap 3 the class is now “has-error”, not “error”.

Changing color of Twitter bootstrap Nav-Pills

February 19, 2023 by Tarik

You can supply your own class to the nav-pills container with your custom color for your active link, that way you can create as many colors as you like without modifying the bootstrap default colors in other sections of your page. Try this: Markup <ul class=”nav nav-pills red”> <li class=”active”><a href=”#tab1″ data-toggle=”tab”>Overview</a></li> <li><a href=”#tab2″ data-toggle=”tab”>Sample</a></li> … Read more

Bootstrap uncollapsed panel by default

February 15, 2023 by Tarik

In Bootstrap 3.x, add a class “in” to your collapsable div <div id=”collapse1″ class=”panel-collapse collapse in”> It will keep your div open by default. Update: With Bootstrap 4.0, You need to add show class in place of in.

Twitter-bootstrap collapse plugin – how to enable multiple “groups” to be opened?

February 15, 2023 by Tarik

Just don’t use data-parent attributes: <div class=”accordion” id=”accordion2″> <div class=”accordion-group”> <div class=”accordion-heading”> <a class=”accordion-toggle” data-toggle=”collapse” href=”#collapseOne”> Collapsible Group Item #1 </a> </div> <div id=”collapseOne” class=”accordion-body collapse in”> <div class=”accordion-inner”>Item 1 Body</div> </div> </div> <div class=”accordion-group”> <div class=”accordion-heading”> <a class=”accordion-toggle” data-toggle=”collapse” href=”#collapseTwo”> Collapsible Group Item #2 </a> </div> <div id=”collapseTwo” class=”accordion-body collapse”> <div class=”accordion-inner”>Item 2 Body</div> … Read more

How to set Bootstrap navbar “active” class in Angular 2?

February 7, 2023 by Tarik

If you use the new 3.0.0. component router ( https://github.com/angular/vladivostok ) you can use the routerLinkActive directive. No further javascript required. <ul class=”nav navbar-nav”> <li [routerLinkActive]=”[‘active’]”> <a [routerLink]=”[‘one’]”>One</a></li> <li [routerLinkActive]=”[‘active’]”> <a [routerLink]=”[‘second’]”>Second</a></li> </ul> I used “@angular/router”: “^3.0.0-alpha.7”