Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Bootstrap 3 question | Responsive col width and height.

Hi all,

I'm working on a Bootstrap page for the first time. Used to working in HTML/CSS and all just not bootstrap. I'm having some difficulty with the following:

I created a fluid ( full width ) container that spans 4 columns. The 1st column contains an image, the 2nd text, the 3rd an image and the 4th text again. The next row of columns is alternating. I want my columns to have a responsive width and height so that if i adjust the viewport, the colums are always squared and stretching the full page. I just can't seem to get this to work. Tried various things. Setting max width, using percentages, background images, img scr tags that scale to 100% etc. but nothing seems to work.

Can anyone tell me how i can make this happen? Greatly appreciated. No problem if JS or JQuery is needed to make it work. I got the basics covered so i know how to do that if someone points me in the right direction ( not a JS wizard to figure this one out on my own just yet ).

For example, i provided my HTML markup. The CSS is pretty basic. Just provided the background images in the ft-img columns and some styling for the fonts. Also, currently all col have a fixed height of 400 pixels but that is abviously not the way to go. :P

    <div class="container-fluid main-content">
        <div class="row">
          <div class="col-md-3 ft-img ft-1">  
          </div> 
          <div class="col-md-3 ft-text">
            <h1>Heading</h1>
            <hr>
            <p>Paragraph </p>
          </div> 
          <div class="col-md-3 ft-img ft-2">  
          </div> 
          <div class="col-md-3 ft-text">
            <h1>Heading</h1>
            <hr>
            <p>Paragraph </p>
          </div> 
        </div>
        <div class="row">
          <div class="col-md-3 ft-text">
            <h1>Heading</h1>
            <hr>
            <p>Paragraph </p>
          </div> 
          <div class="col-md-3 ft-img ft-1">  
          </div> 
          <div class="col-md-3 ft-text">
            <h1>Heading</h1>
            <hr>
            <p>Paragraph </p>
          </div>
          <div class="col-md-3 ft-img ft-2">  
          </div>  
        </div>
      </div>

3 Answers

I feel like the best way of achieving your desired outcome (if I understand it correctly) is just by adjusting the the sizing of the headings and paragraphs.

I have a provided a sample I used to create what I think you are looking. I adjusted the structure of html slightly because it made more sense to me that way but it should still work with the original structure you provided.

I hope this is helpful and let me know how it works our for you!

<div class="container-fluid main-content">
        <div class="row">
            <div class="col-md-6">
                <div class="col-md-6 ft-img">
                    <img src="image.png">
                </div>
                <div class="col-md-6 ft-text">
                    <h1>Heading</h1>
                    <hr>
                    <p>Lorem ipsum dolor sit amet, ad illud nostrud patrioque
                    mea. Legere percipitur vel et, pro natum nobis at, qui eu
                    inimicus ocurreret. An vim viris sanctus, cum te error
                    sonet deleniti.</p>
                </div>
            </div>

            <div class="col-md-6">
                <div class="col-md-6 ft-img">
                    <img src="image.png">
                </div>
                <div class="col-md-6 ft-text">
                    <h1>Heading</h1>
                    <hr>
                    <p>Lorem ipsum dolor sit amet, ad illud nostrud patrioque
                    mea. Legere percipitur vel et, pro natum nobis at, qui eu
                    inimicus ocurreret. An vim viris sanctus, cum te error
                    sonet deleniti.</p>
                </div>
            </div>

        </div> <!-- END OF ROW 1 -->

       <div class="row">
           <div class="col-md-6">
               <div class="col-md-6 ft-text">
                   <h1>Heading</h1>
                   <hr>
                   <p>Lorem ipsum dolor sit amet, ad illud nostrud patrioque
                   mea. Legere percipitur vel et, pro natum nobis at, qui eu
                   inimicus ocurreret. An vim viris sanctus, cum te error
                   sonet deleniti.</p>
               </div>
               <div class="col-md-6 ft-img">
                   <img src="image.png">
               </div>
           </div>

           <div class="col-md-6">
                <div class="col-md-6 ft-text">
                    <h1>Heading</h1>
                    <hr>
                    <p>Lorem ipsum dolor sit amet, ad illud nostrud patrioque
                    mea. Legere percipitur vel et, pro natum nobis at, qui eu
                    inimicus ocurreret. An vim viris sanctus, cum te error
                    sonet deleniti.</p>
                </div>
                <div class="col-md-6 ft-img">
                    <img src="image.png">
                </div>
           </div>

       </div>   <!-- END OF ROW 2 -->
    </div>  <!-- END OF CONTAINER -->
    img {
      max-width: 100%;
    }
    p {font-size: 16px;
    }
    .row {
        margin-bottom: 40px;
    }
    .main-content {
        padding: 0;
    }
    h1 {
        font-size: 26px;
        margin: 0;
    }
    hr {
        margin: 10px 0;
    }

Wow, seriously i cannot thank you enough for this Thanks a lot, man! This was pretty much what i was looking for! I adjusted it a tiny bit to fit the content i have and it worked like a charm!

I followed the course on Bootstrap since i'd never worked with it before but the col height had me a bit confused. Getting the hang of, i guess but this helps a lot!

Thanks again, man! Really appreciated!

Hi Elian,

I believe to create this layout with Bootstrap you should only need the following

            img { max-width: 100%; }
            .main-content { padding: 0; }

Bootstrap will float each column for you automatically since you provided the class col-md-3. Also, there is no need to set a fixed height.

I hope this works for you!

David

Hi David!

Thanks for the answer! This does help me scale the images a lot better than it did ( thanks for that :D ) but can you tell me how i can make the columns that have text in them the same height? What i am trying to accomplish is 4 columns in 1 row. 2 containing images, 2 containing text. And i want them to be of the same height and width and let them scale evenly.

Having a hard time understanding how Bootstrap deals with this.

Thanks in advance!

I'm glad it was able to help a little!

I feel like that would depend on the dimension of the images you are trying to use and the amount of text for each paragraph.

If you know that then I think it'd be easier to provide a better answer for you.

The images are all squared. I can make them the size i want. Currently they are at 500X500 pixels.

The amount of text isn't much. Each column has one H1 tag, followed by a HR tag and finally 1 or or 2 paragaphs. Each paragraph is about one sentence. ( And a bit of padding at the moment, of course )

Hope i'm explaining like you meant.