Column alignment (within rows) issue with bootstrap 4

Question

I am using Bootstrap 4.6 to create a responsive page - and I am having problems getting the columns withing rows to align as I want.

I want my page to look something like this:

                                 Topics  |  Gallery One  Gallery Two  Gallery Three

Most Popular Photos                                        * Most Popular  o Latest

However, I have the following issues:

1. The form is displayed on the same row (visually), as the row containing the "Topics..." line
2. The form is not floated right within it's own row

Here is my code:

HTML

<div class="container">

  <div class="row float-right">
    <ul class="theme">Topics
      <li>Gallery One</li>
      <li>Gallery Two</li>
      <li>Gallery Three</li>
    </ul>
  </div>

  <div class="row">
    <div>
      <h2 class="font-weight-light text-center text-lg-left mt-4 mb-0">Most Popular Photos</h2>
    </div>
    <div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
        <label class="form-check-label" for="inlineRadio1">Most Popular</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
        <label class="form-check-label" for="inlineRadio2">Latest</label>
      </div>
      <div class="form-check form-check-inline">
        <button type="submit" class="btn btn-sm btn-success" id="submit" name="submit"/>Submit</button>
      </div>
    </div>  
  </div>

  <hr class="mt-2 mb-5">
  </div>
</div>

CSS

/* theme */
  ul.theme {
    padding: 5px 0px;
  }
  
  ul.theme li > a {
    color: #CACACA;
    text-decoration: none;
  }
  
  ul.theme li {
    display: inline;
    padding: 0px 4px;
  }
  
  ul.theme li a:hover {
    color: #275d9c;
  }
  
  ul.theme li:first-child { 
      border-left: 1px solid #CACACA;
      padding: 0px 4px;
  }
  
  ul.theme li.highlight {
    border-bottom: solid 1px red;
  }

How do I fix these issues?

Answer 1

Here you go...

First of all, when you want to position content with Bootstrap, I suggest you to use justify-content- for horizontal positioning and align-items- for vertical positioning instead of using floating.

You have two rows inside the same container (the same as in your original code):

• Topics|Gallery One Gallery Two Gallery Three and
• Most Popular photos • Most Popular • Latest Submit

All content in the first row should be positioned on the right side so simply add class d-flex justify-content-end to the first row which moves everything to the right side.

For the second row it's a little bit tricky because you want " Most Popular photos " in the same row as " • Most Popular • Latest Submit " but " Most Popular photos " should be positioned on the left side and " • Most Popular • Latest Submit " should be positioned on the right side. Adding d-flex justify-content-end or d-flex justify-content-start to the second row won't work because it would move both either to the left side or both to the right side. So, how can you kind of "separate" these two so that you can position " Most Popular photos " to the left side and " • Most Popular • Latest Submit " to the right side yet still having both of them in the same row ? Solution: use Bootstrap's grid system. You need to have two columns (ie use col-6 twice) which makes up to 12 (6 + 6 = 12). You can have maximum of 12 columns per row , so if you use col-6 twice, that means you separated your content into two same width columns. If you would use col-2 and col-10 that would result in narrow left part and wide right part.

Now that your content in the second row is "separated" into two same width columns, you can simply add d-flex justify-content-start to the first col-6 (which moves " Most Popular photos " to the left side inside the second row ) and d-flex justify-content-end to the second col-6 (which moves " • Most Popular • Latest Submit " to the right side inside the second row ).

Regarding this white space in-between these two rows, you can solve this by applying a negative margin to the second row like this:

.move_up {
  margin-top: -3.5%;
}

 /* theme */ ul.theme { padding: 5px 0px; margin-right: 22px; } ul.theme li>a { color: #CACACA; text-decoration: none; } ul.theme li { display: inline; padding: 0px 4px; } ul.theme li a:hover { color: #275d9c; } ul.theme li:first-child { border-left: 1px solid #CACACA; padding: 0px 4px; } ul.theme li.highlight { border-bottom: solid 1px red; }.move_up { margin-top: -3.5%; }

 <,DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width. initial-scale=1:0'> <title>Document</title> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> </head> <body> <div class='container'> <div class='row d-flex justify-content-end'> <ul class='theme'>Topics <li>Gallery One</li> <li>Gallery Two</li> <li>Gallery Three</li> </ul> </div> <div class='row d-flex align-items-end move_up'> <div class='col-6 d-flex justify-content-start'> <h2 class='font-weight-light text-center text-lg-left mt-4 mb-0'>Most Popular Photos</h2> </div> <div class='col-6 d-flex justify-content-end'> <div class='form-check form-check-inline'> <input class='form-check-input' type='radio' name='inlineRadioOptions' id='inlineRadio1' value='option1'> <label class='form-check-label' for='inlineRadio1'>Most Popular</label> </div> <div class='form-check form-check-inline'> <input class='form-check-input' type='radio' name='inlineRadioOptions' id='inlineRadio2' value='option2'> <label class='form-check-label' for='inlineRadio2'>Latest</label> </div> <div class='form-check form-check-inline'> <button type='submit' class='btn btn-sm btn-success' id='submit' name='submit' />Submit</button> </div> </div> </div> <hr class='mt-2 mb-5'> </div> </body> </html>