CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ABor
ABor

Reputation: 173

Bootstrap Button Full Width for Smaller Screen Sizes

I want my bootstrap buttons to take up full screen width(well, almost) for smaller screens. btn-block does make the button extend, but for all types of screen.

Can this btn-block be customized using CSS (for example using @media) so that it is activated only for smaller screens? Or is there any other way of doing it?

My HTML button code lines are mentioned below:

<button type="submit" class="btn btn-lg btn-success">
    Submit
</button>
<button type="reset" class="btn btn-lg btn-warning">
    Reset
</button>

Thanks

AB

Upvotes: 10

Views: 19485

Answers (5)

soltesza
soltesza

Reputation: 1

In Bootstrap v5 you can use

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

as documented here

Upvotes: 0

DREIB
DREIB

Reputation: 131

<div class="row">
    <div class="col-md-4">
        <button type="submit" class="btn btn-lg btn-success btn-block">Submit</button> 
    </div>
    <div class="col-md-4">
         <button type="submit" class="btn btn-lg btn-success btn-block">Submit</button>
    </div>
</div>

Use the grid system

Upvotes: 10

Mistalis
Mistalis

Reputation: 18269

Create this new CSS class:

@media(max-width: 768px) {
    button.full-width {
        width: 100%;  
    }
}

And then apply it to your buttons:

<button type="submit" class="btn btn-lg btn-success full-width">
    Submit
</button>
<button type="reset" class="btn btn-lg btn-warning full-width">
    Reset
</button>

In my opinion, it is a better idea than editing Bootstrap classes as Claudio B suggested.

Upvotes: 11

Claudio Bonfati
Claudio Bonfati

Reputation: 503

Unfortunately there aren't a 'class' of bootstrap to apply this 'effect'. The only thing you can do, is using @media on CSS. You can use it:

@media (max-width: 768px) {
    .btn, .btn-group {
        width:100%;
    }
}

You can apply one of the 'col' classes on the button, but the 'box' of the button will not follow the size of it content.

I hope it can help you. :)

Upvotes: 7

Aravind
Aravind

Reputation: 41533

Add form-control class

<button type="submit" class="btn btn-lg btn-success form-control">
    Submit 
</button>
<button type="reset" class="btn btn-lg btn-warning form-control">
    Reset
</button>

Upvotes: 2

Related Questions