Bootstrap footer

Question

I'm trying to add a footer to my webapp with bootstrap.

I use the following html:

<footer class="container-fluid footer">
  <div class="row">
    <div class="col-xs text-center">Voltooid:</br>40/80 taken</div>
    <div class="col-xs text-center">Ongepland:</br>5 taken</div>
  </div>
</footer>

With the following CSS:

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: green;
   color: white;
   text-align: center;
}

The problem I have is that the width of the columns is not half of the screen. I want 2 columns of 50%.

What am I doing wrong?

Answer 1

If you are using boostrap 4, I recomend this changes:

<footer class="container-fluid footer">
  <div class="row">
    <div class="col-12 col-sm-6 text-center">Voltooid:<br>40/80 taken</div>
    <div class="col-12 col-sm-6 text-center">Ongepland:<br>5 taken</div>
  </div>
</footer>

If you in mobile version you want two columns, change the col-12 for col-6

If you are using boostrap 3, the code will be:

<footer class="container-fluid footer">
  <div class="row">
    <div class="col-xs-12 col-sm-6 text-center">Voltooid:<br>40/80 taken</div>
    <div class="col-xs-12 col-sm-6 text-center">Ongepland:<br>5 taken</div>
  </div>
</footer>

Similarly, if you want two columns in mobile version, change col-xs-12 for col-xs-6 in both blocks.

Answer 2

Is it bootstrap 4?

If it is, col-xs-6 doens't exist anymore. They removed the xs property and now is col-6 for the smaller size.