Boostrap alignment

Asked

Viewed 61 times

0

Guys All right? I’m trying to make a lineup using bootstrap but it’s not working, can someone give me a help? I have 23 questions and I need to put four selects aside. Thank you

Alinhamento

laravel twitter-bootstrap
  • 1

    4 selectes next to where? If possible put your HTML and if you are using some CSS beyond the Bootstrap standard put tb that helps you answer.

1 answer

0

Hello,

You can use the Bootstrap grid system to separate the blocks and then just add the items inside 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 documentation of bootstrap grids: https://getbootstrap.com/docs/4.1/layout/grid/

Browser other questions tagged laravel twitter-bootstrap

You are not signed in. Login or sign up in order to post.