0

I've been stuck at this point for a while now, I read the Bootstrap documentation on buttons but I can't show them on the same line with xs devices.

Example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2 col-md-4 col-xs-2">
      <button class="btn btn-success btn-block" type="submit">Send</button>
    </div>
    <div class="col-lg-2 col-md-4 col-xs-2">
      <button class="btn btn-danger btn-block" type="reset">Reset</button>
    </div>
  </div>
</div>

I would like to find out how to show the buttons on the same line also with xs devices:

| BUTTON | | BUTTON |

Thanks!

A. Meshu
  • 4,053
  • 2
  • 20
  • 34
rikesub
  • 1

1 Answers1

0

By using btn-block you are stipulating that each button should take up the entire width of the line. Although you are attempting to size column width according to the device, the fact that you specify the block will supersede that. Try using the d-xs-inline class on the buttons themselves, the 'd' being the display property and read up on this in the Bootstrap documentation. It's well explained here:-

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Best of luck,

Phil

blake
  • 481
  • 4
  • 14
  • Actually: `Create block level buttons—those that span the full width of a parent—by adding .btn-block.`. The problem is that .col-xs-* deprecated. – A. Meshu Apr 09 '20 at 23:45
  • So the OP wants block for sm and xl but inline for md, lg and xs? – blake Apr 10 '20 at 00:15
  • I think some clarification is needed here and probably better not to mix the classes, i.e either rely on the grid or display block/inline across all widths – blake Apr 10 '20 at 00:23