How to create a button full-width with bootstrap ?

To create a simple button with bootstrap the syntax is:

<button type="submit" class="btn btn-default" >Search</button>

Now, to create a button that goes full-width inside a given block, just add the "btn-block" option like so:

<button type="submit" class="btn btn-default btn-block" >Search</button>

Note 1: to center the button: add "text-center"

Note 2: in bootstrap v2, the option was: input-block-level

Bouton sur toute la largeur avec bootstrap

Source code to get the above example:

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
  body {
  padding-top: 50px;
  background-color:#FFFFF; 
  }
  </style>

</head>
<body>

<div class="container">

<div class="row">
<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Simple Button</h4>
        </div>
        <div class="panel-body">
            <button type="submit" class="btn btn-default" >Search</button>
        </div>
    </div>   
</div>
</div>

<div class="row">
<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Center Button</h4>
        </div>
        <div class="panel-body text-center">
            <button type="submit" class="btn btn-default" >Search</button>
        </div>
    </div>   
</div>
</div>

<div class="row">
<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Full-Width Button</h4>
        </div>
        <div class="panel-body">
            <button type="submit" class="btn btn-default btn-block" >Search</button>
        </div>
    </div>   
</div>
</div>

</div>

</body>
</html>

References

Link	Source
Making button go full-width?	stackoverflow
Buttons	bootstrap.com
How to center buttons in Twitter Bootstrap 3?	stackoverflow
How to align button to center using Bootstrap	stackoverflow

Developer in my spare time, I’m interested in Earth observation and satellite-based fire detection. Passionate about Python, machine learning, and open science.

How to create a button full-width with bootstrap ?

References

Benjamin

Skills