<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<h2 id="forms-control-sizes">Control sizing</h2>
- <p>Set heights using classes like <code>.input-large</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
+ <p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
<h3>Height sizing</h3>
<p>Create larger or smaller form controls that match button sizes.</p>
<form class="bs-example bs-example-control-sizing">
<div class="controls docs-input-sizes">
- <input class="form-control input-large" type="text" placeholder=".input-large">
+ <input class="form-control input-lg" type="text" placeholder=".input-lg">
<input type="text" class="form-control" placeholder="Default input">
- <input class="form-control input-small" type="text" placeholder=".input-small">
+ <input class="form-control input-sm" type="text" placeholder=".input-sm">
- <select class="form-control input-large">
- <option value="">.input-large</option>
+ <select class="form-control input-lg">
+ <option value="">.input-lg</option>
</select>
<select class="form-control">
<option value="">Default select</option>
</select>
- <select class="form-control input-small">
- <option value="">.input-small</option>
+ <select class="form-control input-sm">
+ <option value="">.input-sm</option>
</select>
</div>
</form>
<div class="bs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
- <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<form class="bs-example bs-example-form">
<div class="input-group">
- <span class="input-group-addon input-large">@</span>
- <input type="text" class="form-control input-large" placeholder="Username">
+ <span class="input-group-addon input-lg">@</span>
+ <input type="text" class="form-control input-lg" placeholder="Username">
</div>
<br>
<div class="input-group">
</div>
<br>
<div class="input-group">
- <span class="input-group-addon input-small">@</span>
- <input type="text" class="form-control input-small" placeholder="Username">
+ <span class="input-group-addon input-sm">@</span>
+ <input type="text" class="form-control input-sm" placeholder="Username">
</div>
</form>
<h3>Sizes</h3>
- <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code> or <code>.pagination-small</code> for additional sizes.</p>
+ <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
<div class="bs-example">
<div>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
<div>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<h3>Optional classes</h3>
<p>Control padding and rounded corners with two optional modifier classes.</p>
<div class="bs-example">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a well!
</div>
</div>
<div class="bs-example">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a well!
</div>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>