Bootstrap Buttons

Use Bootstrap buttons and Bootstrap custom styles for actions in forms, dialogues, and more with support for multiple sizes, states, and more.

Classes

Bootstrap provides different styles of buttons:

  • .btn .btn-dark .btn-white .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-outline-primary .btn-outline-success .btn-outline-info .btn-outline-warning .btn-outline-danger

Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<button class="btn btn-dark me-2" type="button">Button</button>

<button class="btn btn-dark btn-icon d-flex align-items-center me-2" type="button">
	<span class="btn-inner--icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="d-block me-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
			<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
		</svg>
	</span>
  <span class="btn-inner--text">With icon</span>
</button>

<button type="button" class="btn btn-dark btn-icon px-3 me-2">
	<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
		<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
	</svg>
</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-white">White</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>

Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-white">White</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>

Icon Buttons

Sometimes you need a button to indicate an action using only a icon.

<button type="button" class="btn btn-dark btn-icon px-3">
	<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
		<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
	</svg>
</button>

<button type="button" class="btn btn-dark btn-icon px-3">
	<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
		<path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
	</svg>
</button>

<button type="button" class="btn btn-dark btn-icon px-3">
	<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
		<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
	</svg>
</button>

<button type="button" class="btn btn-dark btn-icon d-flex align-items-center">
	<span class="btn-inner--icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="d-block me-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
			<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
		</svg>
	</span>
	<span class="btn-inner--text">Search</span>
</button>

<button type="button" class="btn btn-dark btn-icon d-flex align-items-center">
	<span class="btn-inner--text">Upload</span>
	<span class="btn-inner--icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="d-block ms-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
			<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
		</svg>
	</span>
</button>

Social Buttons

Use these button styles when building social media login forms using Facebook, Twitter, GitHub, Google, and Apple.

<button type="button" class="btn btn-white btn-icon">
	<span class="btn-inner--icon me-1">
		<svg viewBox="0 0 24 24" width="14" height="14" xmlns="http://www.w3.org/2000/svg">
			<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
			<path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"></path>
				<path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"></path>
				<path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"></path>
				<path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"></path>
			</g>
		</svg>
	</span>
	<span class="btn-inner--text">Sign in with Google</span>
</button>

<button type="button" class="btn btn-dark btn-icon">
	<span class="btn-inner--icon me-1">
		<i class="fa fa-github" aria-hidden="true"></i>
	</span>
	<span class="btn-inner--text">Sign in with Github</span>
</button>

Button Group

The button group component can be used to stack together multiple buttons and links inside a single element.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-dark btn-icon d-flex align-items-center">
    <span class="btn-inner--icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="d-block me-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
      </svg>
    </span>
    <span class="btn-inner--text">Previous Page</span>
  </button>
  <button type="button" class="btn btn-dark btn-icon d-flex align-items-center">
    <span class="btn-inner--text">Next Page</span>
    <span class="btn-inner--icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="d-block ms-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
      </svg>
    </span>
  </button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-dark btn-icon px-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
    </svg>
  </button>
  <button type="button" class="btn btn-dark btn-icon px-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
    </svg>
  </button>
  <button type="button" class="btn btn-dark btn-icon px-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
    </svg>
  </button>
</div>

Sizes

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

<button type="button" class="btn btn-dark btn-lg">Large button</button>
<button type="button" class="btn btn-white btn-lg">Large button</button>
<button type="button" class="btn btn-dark btn-sm">Small button</button>
<button type="button" class="btn btn-white btn-sm">Small button</button>

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

<button type="button" class="btn btn-dark btn-lg w-100">Block level button</button>
<button type="button" class="btn btn-white btn-lg w-100">Block level button</button>

Active State

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

Primary link Link 
<a href="javascript:;" class="btn btn-dark btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="javascript:;" class="btn btn-white btn-lg active" role="button" aria-pressed="true">Link</a>

Disabled State

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<button type="button" class="btn btn-lg btn-dark" disabled>Primary button</button>
<button type="button" class="btn btn-white btn-lg" disabled>Button</button>