Full size for col-md-2

[shabzadeh97]

hi

<div class="row">
<div class="col-md-10"></div>
<div class="col-md-2"></div>
</div>

I have the following code .
and I want to get the whole page space when the page gets smaller and the col-md-2 column goes down the page.

[donboe]

@shabzadeh97

I want to get the whole page space when the page gets smaller and the col-md-2 column goes down the page.

Hi @shabzadeh97. What is happening when you try? What you want is a default behaviour in Bootstrap

[ronpat]

@shabzadeh97

I want to get the whole page space when the page gets smaller and the col-md-2 column goes down the page.

Are you saying that you always want both columns to be the same height on the page? or are you saying that you always want col-md-10 to be the same height as col-md-2 ? or are you saying something else altogether?

It would be best if you can post a “working page” (starts with doctype, contains URL to BS CDN and URL to any other resources needed, and ends with /html) that demonstrates the problem.

[PaulOB]

@shabzadeh97

I have the following code .
and I want to get the whole page space when the page gets smaller and the col-md-2 column goes down the page.

That is exactly what will happen with your code at 768px smaller width. As Donboe said that is the default behaviour for those classes.

[shabzadeh97]

I want the column to be only two units of row when the page is in desktop mode, and in the mobile page , this column will take the entire row.

[PaulOB]

Yes that’s what you have got already

Can you clarify your problem with full code and a screenshot of where it isn’t working as it seems we may not 'understand the question

[shabzadeh97]

@shabzadeh97

<div class=“row”> <div class=“col-md-10”></div> <div class=“col-md-2”></div> </div>

this is my page in desktop page

and in mobile page

I want this column to take all the width of the page

[PaulOB]

@shabzadeh97

<div class=“row”> <div class=“col-md-10”></div> <div class=“col-md-2”></div> </div>

Your screenshot shows that col-md-2 is now 100% wide as expected. Just give it a background colour and you will see it stretches full width.

Your image doesn’t stretch full width but as we don’t have any code for the image and its container (if any) then we can’t tell what the problem or solution is

It could be as simple as setting the image to width:100% and height:auto for that column.

e.g.

.images {box-shadow:0 0 10px 10px rgba(0,0,0,0.2);}
.images img {width:100%;height:auto;}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10">testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing </div>
    <div class="col-md-2 images">
      <figure><img src="images/test.jpg" width="500" height="285" alt="test">
        <figcaption>Image 1</figcaption>
      </figure>
      <figure><img src="images/test.jpg" width="500" height="285" alt="test">
        <figcaption>Image 1</figcaption>
      </figure>
      <figure><img src="images/test.jpg" width="500" height="285" alt="test">
        <figcaption>Image 1</figcaption>
      </figure>
      <figure><img src="images/test.jpg" width="500" height="285" alt="test">
        <figcaption>Image 1</figcaption>
      </figure>
    </div>
  </div>
</div>

Or at the 767px media query breakpoint if you have other things going on but without a working demo we are just guessing.

Here’s a codepen of the adaptive bootstrap (.container) method and an example of how you can best present your problem to us to make it easy for us to give you the right answer