Bootstrap columns aren't displayed next to each other

Question

I'm using Bootstrap 4 and having some problem with the Footer part, I want to create three columns with the same width, using class col-md-6 as described in the documentation, this is my code:

<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <p>2018 © Hello World!</p>
      </div>
      <div class="col-md-6">
        <div class="text-md-right footer-links d-none d-md-block">
          <a href="javascript: void(0);">About</a>
          <a href="javascript: void(0);">Support</a>
          <a href="javascript: void(0);">Contact Us</a>
        </div>
      </div>
      <div class="col-md-6">
        <div>
          <select>
            <option>1</option>
            <option>2</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</footer>

and this is the CSS applied to stylize the footer:

.footer {
    border-top: 1px solid rgba(152,166,173,.2);
    bottom: 0;
    padding: 19px 30px 20px;
    position: absolute;
    right: 0;
    color: #98a6ad;
    left: 250px;
}

The result was completely incorrect, I should get the content perfectly aligned to the center of the column which contains the item but I get all the items as:

this is a fiddle .

The expected result should be like this:

| 2018© Hello World! | About Support Contact Us | 1

These | symbols are fake separator in which I have used as a delimiter for the column. These three columns should be enlarge based on the windows resolution.

Answer 1

Since grid rule follows - 12 Column system, so one should use grid in a way that it sums up to be 12 .

<footer class="footer">
<div class="container-fluid">
<div class="row">
  <div class="col-xs-4">
    <p>2018 © Hello World!</p>
  </div>
  <div class="col-xs-4">
    <div class="footer-links d-none d-md-block">
      <a href="javascript: void(0);">About</a>
      <a href="javascript: void(0);">Support</a>
      <a href="javascript: void(0);">Contact Us</a>
    </div>
  </div>
  <div class="col-xs-4">
    <div>
      <select>
        <option>1</option>
        <option>2</option>
      </select>
    </div>
  </div>
</div>

CSS

.footer {
border-top: 1px solid rgba(152,166,173,.2);
bottom: 0;
padding: 19px 30px 20px;
position: absolute;
right: 0;
color: #98a6ad;
/* left: 250px; */
}

Answer 2

You only need to use col ( https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns )

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" > <footer class="footer"> <div class="container-fluid"> <div class="row"> <div class="col"> <p>2018 © Hello World!</p> </div> <div class="col"> <div class="text-md-right"> <a href="javascript: void(0);">About</a> <a href="javascript: void(0);">Support</a> <a href="javascript: void(0);">Contact Us</a> </div> </div> <div class="col"> <div> <select> <option>1</option> <option>2</option> </select> </div> </div> </div> </div> </footer> 

Answer 3

The bootstrap grid system comes with 12 columns out of the box, so unless you change it it will be 12.

From the bootstrap documentation :

Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.

Since 12 / 3 = 4

---

But as of Bootstrap 4, you don't need to explicitly declare the column widths. It will calculate the width of your columns based on how many you have

So you would end up with something like this (from the Boostrap documentation ):

<div class="row">
  <div class="col">
      One of three columns
  </div>
  <div class="col">
      One of three columns
  </div>
  <div class="col">
      One of three columns
  </div>
</div>

And it should look like this:

Also, I wouldn't define unnecessary CSS rules.

Answer 4

The problem in your code is that "col-md" class only applies when the container width is greater than 768 that's the "md" breakpoint. If you're seeing the Fiddle in it's default layout you'll have your screen split into four areas, and the preview one is less than 768 pixels width, so you get the divs stacked... Furthermore, as stated above in other answers, you should use "-4" instead of "-6" on your classes, since the Bootstrap grid system is based on a 12 column layout.

So, change the "col-md-6" classes for "col-sm-4" and you'll get what you're looking for. (Here "col-sm-" stands for the small screen breakpoint)