CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Styxin
Styxin

Reputation: 115

Bootstrap row is not stacking divs on small screen sizes

I'm using bootstrap row for two divs. I want them to be in a row on large devices but stacked on small devices. Bootstrap isn't stacking it on small devices it's still keeping both of them at 50%. The divs I am referring to are the ones with an ID of left and themebox.

  <div class="container">
  <div class="row">
    <div id="left" class="col-sm-12 col-lg-3">
     <br>
     <br>
     <h3> Mine Style</h3>
     <br>
     <br>
    <button id="customize">Customize</button>
   </div>
   <div class="col-sm-12 col-lg-9" id="themebox"></div>



#themebox{
  height: 500px;
  background-color: white;
  float: right;
  box-shadow: 0 15px 45px 0 rgba(0,0,0,.1);
  padding-left: 0;
  padding-right: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.row{
 margin-left: 0 !important;
 margin-right:0 !important;
 }

Upvotes: 0

Views: 167

Answers (1)

doğukan
doğukan

Reputation: 27451

Are you wanted this?

#themebox{
  height: 500px;
  background-color: white;
  float: right;
  box-shadow: 0 15px 45px 0 rgba(0,0,0,.1);
  padding-left: 0;
  padding-right: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.row{
 margin-left: 0 !important;
 margin-right:0 !important;
 }

h3 {
  margin:20px 0 !important;
}

#left {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
}

@media (max-width: 992px) { 
  #left {
  align-items:center;
  flex-direction:row;
  justify-content:flex-start;
}
  
  #customize {
    margin:0 20px;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div id="left" class="col-12 col-sm-12 col-lg-3">
     <h3> Mine Style</h3>
    <button id="customize">Customize</button>
   </div>
   <div class="col-12 col-sm-12 col-lg-9" id="themebox"></div>

Upvotes: 1

Related Questions