CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sofia Lazrak
Sofia Lazrak

Reputation: 314

Responsive columns in Bootstrap with main column in the center

I want to use Bootstrap to have this configuration

configuration

This needs to be responsive like the image shows. I tried this code but block 2 is not centered in the page

<div class="row" style="margin: 0 auto; width: 800px; margin-top: 20px; max-width:800px;position:relative" >
    <div class="col" style="top:420px;background: white; z-index:100;position:fixed; width: 194px;">
                
                   block 1
    </div>
    <div class="col">
              block 2
    </div>
</div>

Also I need block 1 on the left to follow as I scroll up and down the page

Any suggestions?

Upvotes: 0

Views: 69

Answers (2)

Jane N.
Jane N.

Reputation: 37

You can achieve that using media queries without any bootstrap. Here is the code:

<html>
<head>
<style>

@media (max-width:850px){
.mycontainer{
  display: flex;
  flex-direction: column-reverse;
}

.myleft{
  order: 1;
  width: 97%;
  margin-right: 1.5%;
  margin-left: 1.5%;
  background-color: white;
}

.mymain{
  order: 2;
  width: 97%;
  margin-right: 1.5%;
  margin-left: 1.5%;
  background-color: white;
}

}


@media (min-width:850px){


.mycontainer{
  display: flex;
  flex-direction: row;
}

.myleft{
  order: 1;
  width: 30%;
  margin-right: 2%;
  margin-left: 2%;
  background-color: white;
}

.mymain{
  order: 2;
  width: 60%;
  margin-right: 2%;
  padding-left: 2%;
  background-color: white;
  border-left: 1px solid #e9ecef;
}

}

</style>
</head>
<body>


<div class="mycontainer">
      <div class="myleft">left column content</div>
      <div class="mymain">my main content</div>
</div>




</body>
</html>

To center the main column content you can just style it with css.

Upvotes: 1

Shashank Adhatrao
Shashank Adhatrao

Reputation: 77

  1. You can Use This Bootstrap Styling for create Responsive Column
<div class="row">
   <div class="col-12">
          <div class="col-4">
          <p>Block-1 Left</p>
          </div>
          <div class="col-8">
          <p>Block-2 Right</p>
          </div>
        </div>
</div>

Upvotes: 0

Related Questions