CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
tm1701
tm1701

Reputation: 7581

Bootstrap3 - divide buttons over 2 rows on small devices

How can I put a series of buttons and input fields in 1 row on medium+ screen AND divide (a subset) of these buttons and input fields over 2 rows on smaller devices?

So: on wider (medium+) screens: 1 row contains all buttons and intput fields. On smaller screens (xs, sm) I want to put the buttons and intput fields in 2 rows.

The code of showing some buttons only on medium+ screens works. This code is shown below the HTML Bootstrap code.

I tried a lot of alternatives, e.g. this code, but that works only on my mobile. Not on medium+ desktop, not on F12 mobile, etc

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <button class="btn glyphicon glyphicon-fast-backward not-on-small-screens">L</button>
    <button class="btn btn-info">M</button>
    <button class="btn btn-info">1</button>
    <button class="btn btn-info">2</button>
    <button class="btn btn-info">3</button>
    <button class="btn btn-info">4</button>
    <button class="btn btn-info">5</button>
  </div>
  <form class="form-inline">
    <span class="form-group">
      <div class="col-xs-10 col-sm-4">
        <button class="btn btn-success glyphicon not-on-small-screens">N</button>
        <input type="text" id="search" maxlength="10" size="10" name="search" class="form-control input-inline" #searcher>
      </div>
      <div class="col-xs-2 col-sm-2">
        <button class="btn btn-success glyphicon glyphicon-search">O</button>
        <span class="glyphicon glyphicon-list-alt not-on-small-screens">
        </span><input type="text" id="size" maxlength="3" size="3" class="form-control input-inline not-on-small-screens" name="size">
      </div>
    </span>
  </form>
</div>

The CSS classes are: 

.input-inline {
  display: inline;
}
@media only screen and (max-width: 900px) {
  .not-on-small-screens {
    display: none;
  }
}

Upvotes: 0

Views: 434

Answers (1)

Oppong Ntiamoah
Oppong Ntiamoah

Reputation: 52

This is what you are looking for.

https://getbootstrap.com/docs/4.1/utilities/display/

Upvotes: 1

Related Questions