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 4 Basics (Retired) Getting to Know Bootstrap 4 Introducing Bootstrap 4

Posted by A X
A X
12,842 Points

What is a Responsive Grid?

In Bootstrap Guil mentions that you can use Bootstrap to create a responsive grid, but then just leaves that phrase unexplained....what is a responsive grid? I assume it's a type of layout, but why/when does one use a grid based website?

Michal Janek
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Michal Janek
Front End Web Development Techdegree Graduate 30,654 Points
Michal Janek
.a{fill-rule:evenodd;}techdegree seal-36
Michal Janek
Front End Web Development Techdegree Graduate 30,654 Points

I am pretty sure he explains it later. But if he does not here we go.

Responsive grid is the general frame of the website, layout as you said. If you continue that course you will encounter it but it is an extremely common layout for current web designs. The main point of it is that the webpage is divided into columns, usually twelve but can be a different amount - depends how complex you want your website. I could explain more but this website has a simplified version of the explanation check it out. http://www.w3schools.com/css/css_rwd_grid.asp

When do you use it? Basically whenever you want to have your site symmetrical, precise and well...in the end responsive. It helps you to better place HTML elements (visually, you still have to do the job yourself)

2 Answers

Kyle Jensen
PLUS
Kyle Jensen
Courses Plus Student 6,293 Points
Kyle Jensen
Kyle Jensen
Courses Plus Student 6,293 Points

This might be a bit late, but checkout bootstraps website https://v4-alpha.getbootstrap.com/layout/grid/ for info on the grid and other questions. The site covers everything you need to know about bootstrap. Basically, bootstrap is a mobile first framework called with classes(pre-determined by the creators of bootstrap) after the CDN is linked in the <head> of your document. Say you have three sections in your document. With bootstrap, each section is a row and each part of the x-axis(width) is a column. Lets say the top has a logo on the left, a header and a paragraph in the middle, and some buttons on the right. With bootstrap you place all of this in a couple of separate <div>'s. There's the container which holds everything inside of the section. Inside is the row and 3 columns, one column for each of your elements, or grouped elements. See my example below - typical bootstrap grid... 

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-4"> 
            <img class="logo" src="link-to-your-file.jpg" alt="bootstrap is great!">
        </div>
        <div class="col-xs-12 col-md-4">
            <h1>Catch the users attention</h1>
            <p>subtext to header can also be an &lt;h2&gt;</p>
        </div> 
        <div class="col-xs-12 col-md-4">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div> 
    </div> <!-- end row -->
</div> <!-- end container -->

<!-- Ok, the breakdown. 12 total columns are predetermined by the framework. Putting 3 columns in one row and sizing them at 4 (1/3 of 12) is essentially asking to have your row broken up into 3 equal parts with gutters("whitespace") around each one. So, setting the breakpoints is as simple as calling the class for the specified viewport. xs-12 would be full width of viewport on a cell and up md-12 would be full width of viewport on a laptop and up. xs-12 sm-6 md-3 is saying that I want my element to cover the whole page on a cell, split down the middle (2 columns) on a tablet, and have four separate columns on a laptop. You can add sm as a third option or set your upper limit to sm, instead of md, and everything above that viewport breakpoint will maintain that column setting. so xs-12 and sm-4 together will give you full width on cell 3 columns on a tablet and 3 columns on a laptop. Just be careful to resize your viewport to check that it doesn't look like dog poo if you use this type of method - which is a good habit to get into anyways. --> They are going to, or have updated the layout system(I haven't used it in while). So it might have some ways to align your elements even further, but I'm not sure. I heard its going to incorporate flex-box. Also, look into the pull-right and pull-left classes too, they can be useful in positioning, cards for images, and button classes for easy styling of standard buttons. As you get further into using it try and read up on what the default settings are for the things you use most, if you really get into using bootstrap. This will come in handy when you want to modify it to suit your personal layout needs. I would avoid W3schools. They have a lot of syntax issues and have no relationship to W3 at all, just a couple of guys who put together a website. Also, a great resource for CSS is CSS-tricks.com by Chris Coyier, who is pretty well known. sorry for the novella. Hope this was somewhat useful.

Raymond Medrano
Raymond Medrano
7,690 Points
Raymond Medrano
Raymond Medrano
7,690 Points

In simple terms, A responsive website is one that responds and adjusts its layout based on the size and style of the device it's being viewed on. So if you are looking at a website on a phone screen vs a full size monitor the website will respond and display appropriately. The grid is simply the system that is used to laying out your website design and positioning the elements on the page. Hope that helps.