Twitter Bootstrap Question posted in

I am attempting to place two columns beside each other in a row in bootstrap, but they keep stacking. Suggestions?-Twitter bootstrap

I am unable to get the columns to align next to each other. Instead, they are just stacked on top of each other.

.col-sm-4{
  background-color: black;
  opacity:0.9;
  height: 100%;
  margin: auto;
  position: absolute
}

.container-fluid{
  padding: 0;
}
.row{
  margin: auto;
}

.col-sm-8{
  background-color: darkred;
  opacity: 0.9;
  position: absolute;
  text-align: right;
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
      <div class="row">
          <div class=" col-xs-2 col-sm-4 col-lg-2">


          </div>

          <div class="col-xs-10 col-sm-8 col-lg-10" >


          </div>
      </div>
      </div>
Tags:

2

Answers


  1. 0

    just a quick note that Bootstrap 4 is a mobile-first design. So col-xs-2 doesn’t work. Instead, use col-2 which will apply it’s effect from 0px till the next breakpoint you make such as col-sm-4 in your case.

    Also, you don’t need extra CSS you can just delete it. Remember that col-xs does not exist in bootstrap 4.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<div class="container-fluid">
  <div class="row">
    <div class=" col-2  col-sm-4 col-lg-2">
      hi 1

    </div>

    <div class="col-10 col-sm-8 col-lg-10">

      hi 2
    </div>
  </div>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
    Login or Signup to reply.
  2. 0

    Remove position: absolute; in the classes .col-sm-4 and .col-sm-4 and you’re done.

    Here you can see the result: https://jsfiddle.net/yz96fgje/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search