Boostrap Alignment

Question

Boostrap Alignment

Navigation

#1 by (0 votes)

0

Staff All right? I'm trying to do an alignment using bootstrap but it's not working, can anyone give me a help? I have 23 questions and I need to put 4 selects next. Thanks

twitter-bootstrap laravel

asked by anonymous 08.05.2018 / 22:11

1 answer

Problems with zooming in google maps How to include messages on specific dates + window vibrate navigator on new date?

score 0 · Answer 1

Hello,

You can use Bootstrap's grid system to separate the blocks and then just add the items within the divs.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <p>Perguntar 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum laoreet mollis. Maecenas porttitor</p>
    </div>
    <div class="col-sm-3 col-md-2">
      <select class="custom-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-sm-3 col-md-2">
      <select class="custom-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-sm-3 col-md-2">
      <select class="custom-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-sm-3 col-md-2">
      <select class="custom-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <p>Perguntar 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum laoreet mollis. Maecenas porttitor</p>
    </div>
    <div class="col-sm-3 col-md-2">
      <select class="custom-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-sm-3 col-md-2">
      <select class="custom-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-sm-3 col-md-2">
      <select class="custom-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-sm-3 col-md-2">
      <select class="custom-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
  </div>
</div>

I recommend taking a look at the bootstrap grids documentation: link