CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
pileup
pileup

Reputation: 3262

How to align the button with the few dropdowns when they have a label?

I have 3 dropdowns and a submit button. Each dropdown has a label. Then there is a button. I couldn't find a way to align the button with the dropdowns themselves (not the labels), so I ended up adding a placeholder label and giving it the same color as the background.

But is there a better way to do it?

This is how it looks like without the placeholder label (View in full page to see it better):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" rel="stylesheet" />


<div class="containter-fluid">
  <div class="h-100">
    <div class="d-flex flex-row-reverse flex-wrap justify-content-start">


      <div class="form-group justify-content-end text-right form-inline">
        <div class="d-flex flex-column align-items-end">
          <label for="select1" dir="rtl">select1:</label>
          <select title="select1" class="selectpicker">
            <option>option</option>
          </select>
        </div>
      </div>

      <div class="form-group justify-content-end text-right form-inline">
        <div class="d-flex flex-column align-items-end">
          <label for="select2" dir="rtl">select1:</label>
          <select title="select2" class="selectpicker">
            <option>option</option>
          </select>
        </div>
      </div>
      <div class="form-group justify-content-end text-right form-inline">
        <div class="d-flex flex-column align-items-end">
          <label for="select3" dir="rtl">select1:</label>
          <select title="select3" class="selectpicker">
            <option>option</option>
          </select>
        </div>
      </div>

      <div class="form-group justify-content-end text-right form-inline">
        <div class="d-flex flex-column align-items-end">
          <button type="button" class="btn btn-primary">Click</button>
        </div>
      </div>



    </div>
  </div>
</div>

And this is how it looks like with the placeholder label (And how I want it to look like):

.placeholder_label {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" rel="stylesheet" />


<div class="containter-fluid">
  <div class="h-100">
    <div class="d-flex flex-row-reverse flex-wrap justify-content-start">


      <div class="form-group justify-content-end text-right form-inline">
        <div class="d-flex flex-column align-items-end">
          <label for="select1" dir="rtl">select1:</label>
          <select title="select1" class="selectpicker">
            <option>option</option>
          </select>
        </div>
      </div>

      <div class="form-group justify-content-end text-right form-inline">
        <div class="d-flex flex-column align-items-end">
          <label for="select2" dir="rtl">select1:</label>
          <select title="select2" class="selectpicker">
            <option>option</option>
          </select>
        </div>
      </div>
      <div class="form-group justify-content-end text-right form-inline">
        <div class="d-flex flex-column align-items-end">
          <label for="select3" dir="rtl">select1:</label>
          <select title="select3" class="selectpicker">
            <option>option</option>
          </select>
        </div>
      </div>

      <div class="form-group justify-content-end text-right form-inline">
        <div class="d-flex flex-column align-items-end">
          <label class="placeholder_label" dir="rtl">
placeholder label
</label>
          <button type="button" class="btn btn-primary">Click</button>
        </div>
      </div>



    </div>
  </div>
</div>

Upvotes: 0

Views: 27

Answers (1)

Dave111
Dave111

Reputation: 437

Add a new class to the container div <div class="d-flex flex-row-reverse flex-wrap justify-content-start"> for example align-items, so you will have a new div <div class="d-flex flex-row-reverse flex-wrap justify-content-start align-items">

And then apply this CSS to the newly created role

.align-items{
  align-items:flex-end; //puts all items to the bottom of container - in your case it aligns them
}

Upvotes: 2

Related Questions