'creating simple button to use the size of column from bootstrap

My idea is to create a simple green button. No text, no border, just a green shape, which would inherit the size of col-md-12 from bootstrap. I have seen there are many similar questions, however I have a problem with basic understanding so I would appreciate if you would help me understand it.

<body>
   <div class="col-md-12">
      <button class="button" type="button" style="border:none; display:inline-block; color:green;"></button>
   </div>
</body>

So, this is what I did. I have a body and I have a col-md-12 class. This is ok I guess. Then I decided to create a button. I have a button tag, class=button, type=button and I have a style > simple green color and inline-block to display this button over col-md-12. However! Nothing happens. May I ask why?

I don't want to put any sizes for purpose, I want just to fit whole col-md-12. May I ask what I don't understand correctly? Thank you.

htmlcsstwitter-bootstrap


Solution 1:[1]

Just add a class 'form-control' to button tag.

JSFiddle

<div class="row">
    <div class="col-md-12">
        <button class="btn btn-success form-control" type="button">Hello</button>
    </div>
</div>

Solution 2:[2]

Add w-100 to the button's class, e.g.:

    <div class="mt-5 row justify-content-center">
      <div class="col-3">
        <button id="continue-button" class="btn btn-primary btn-lg w-100">
          Continue
        </button>
      </div>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shubham Baranwal
Solution 2 Alex

Related Questions