I’m confused about how to get bootstrap grid to respond to different screen sizes with varying col-sz-* configurations.
Essentially, I want my “Connect” section to:
and
- be
col-sm-1 / col-sm-10 / col-sm-1 on larger screens (where the middle column is what contains the actual content)
The purpose is just to create some responsive margin: to help viewers avoid having to read a sentence across an entire desktop screen, etc, but be able to read across entire width on smaller devices).
Maybe there’s a better way to do this than using the grid, but it’s my understanding that this is bootstrap best practice.
Here’s my pen: http://codepen.io/kris-lyle/pen/WpRoOW?editors=1100
It looks like you’ve used the container-fluid class for each section. I’m not sure it’s really necessary though, typically you would have one container div encompassing your entire page with that class. Then you would add the appropriate width (ie: col-xs-1) following your row div.
If you want to use the full screen on small devices you should give your div the class col-xs-12 this means that for devices under 576px your section will display across all 12 bootstrap columns. To make margins on the side for larger devices you could add the class ``col-sm-10 col-sm-offset-1``` to that same div. That will mean if the viewport is larger than 576px your content will be 10 columns long, with an empty column on each end. You have 3 larger sizes from there where you can further customize the look for larger devices.
This page could be a useful resource: https://v4-alpha.getbootstrap.com/layout/grid/ Hope that helps!
2 Likes
Totally agree… wrap up whole page in “container-fluid” first. Then do the mock with what you want your app to look on different important targeting screens. After that each section of page wrap-up either in div or section element. Divs or sections wrap up in bootstrap “row” class and assign separate div to each column. Columns can have multiple classes for predefined bootstrap widths so apply class=“col-xs-12 col-md-10 col-lg-8” which is the example of multiple classes that bootstrap will divide depends on the screen size. Like Doug stated you can use offsets and push, pull classes to make your UX very impressive. Check out the bootstrap layout - it is fundamental. After that consider fine tuning your layout with different CSS media query selectors. Doug well done 
1 Like
Ok. This is starting to make sense. (I’ve read over that link you shared and others so much the past few weeks, but something new sinks in every other go-around.)
Anyways, I think what was confusing me is that it was my assumption that any container could only max-out with 12 columns. So for instance, I’m not allowed to have a two column section (col-sm-6 x2), that’s then followed by a twelve column section (col-xs-12) because that tallies to 24 columns for that container.
I’ll go back and tinker with my code with your suggestions and see what I get. I know the grid is fundamentally important to web design with bootstrap so I don’t want to skimp out on this aspect of my design process.
Thanks again, @doug20000, for the clear response and for taking the time to do so. (Hats off to you too, @mirkoacimovic.) I’ll keep you both posted. Cheers 
Also, the reason fwiw I chose to wrap each section in a container element is because W3Schools recommended that in their portfolio example here: https://www.w3schools.com/bootstrap/bootstrap_theme_me.asp
Alright. I got everything sorted and can officially say my portfolio is finished! Thanks so much for your help (you too M!).
I’m really happy with the finished product.
Note: I ended up keeping multiple containers since that’s how my color scheme is divided up; and when I tried removing them, something funky happened with how the different sections were displayed.
SOLVED: I followed Dough’s advice and added multiple grid configurations in a single div element to account for how I wanted the grid to respond to varying screen sizes.
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-lg-4 col-lg-offset-4 ">
1 Like
Glad that worked out for you. Great work on the portfolio!
