Button Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<p>
		<button type="button" class="btn btn-primary btn-lg">Large button</button>
		<button type="button" class="btn btn-default btn-lg">Large button</button>
	</p>
	<p>
		<button type="button" class="btn btn-primary">Default button</button>
		<button type="button" class="btn btn-default">Default button</button>
	</p>
	<p>
		<button type="button" class="btn btn-primary btn-sm">Small button</button>
		<button type="button" class="btn btn-default btn-sm">Small button</button>
	</p>
	<p>
		<button type="button" class="btn btn-primary btn-xs">Extra small
			button</button>
		<button type="button" class="btn btn-default btn-xs">Extra small
			button</button>
	</p>

</body>
</html>

Output

Untitled
Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<button type="button" class="btn btn-primary btn-lg btn-block">
		Block level button
	</button>
	<button type="button" class="btn btn-default btn-lg btn-block">
		Block level button
	</button>
</body>
</html>

Untitled

Share

You may also like...