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

Hi, I'm Ben, the Founder of moonbooks.org. I work as a research scientist specializing in Earth satellite remote sensing, particularly focusing on Fire detection using VIIRS and ABI sensors. My areas of expertise include Python, Machine Learning, and Open Science. Feel free to reach out if you notice any errors on the site. I am constantly striving to enhance it. Thank you!

How to create a button full-width with bootstrap ?

References

Benjamin

Skills