What happens in bootstrap 3 if there are more than 12 columns in a row?
What happens in bootstrap 3 if there are more than 12 columns in a row? Please provide examples with a code.
For example:
<div class="row"> <div class="col-sm-13 form-group"> <label class="control-label col-sm-4">Лаборатория</label> <div class="col-sm-12"><select class="form-control" wicket:id="testType"></select></div> </div> <div class="col-sm-10 form-group"> <label class="control-label col-sm-4">Упорядочить</label> <div class="col-sm-10"><select class="form-control" wicket:id="sortOrder"></select></div> </div> <div class="col-sm-4 text-right indent"> <button wicket:id="show" class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span> Показать </button> </div> </div> How to put this on row? Help me understand this.
Since anything beyond 12 isn’t defined in the Bootstrap CSS you’ll see nothing applied to the element you classify with those names. So you’ll only see inherited properties of elements/body/etc. applied
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li> <li class="divider"></li> <li class="dropdown-header">Examples</li> <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li> <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li> <li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li> <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li> <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li> <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li> <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li> <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li> <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li> <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li> <li class="divider"></li> <li class="dropdown-header">Compatibility</li> <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li> <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li> <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li> </ul> </li> <li><a href="http://getbootstrap.com/css">CSS</a></li> <li><a href="http://getbootstrap.com/components">Components</a></li> <li><a href="http://getbootstrap.com/javascript">JavaScript</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li> </ul> </div> </div> <div class="jumbotron"> <h1>Twitter Bootstrap 3.0</h1> <p class="lead">Starter template with CSS and JS included.</p> </div> <div class="col-sm-20"> Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. Col-Sm-20 DIV. </div> <br /> <div class="col-sm-12" > Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. Col-Sm-12 DIV. </div> <br /> <div class="col-md-100"> Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. Col-Sm-100 DIV. </div> </div>
