[ad_1]
https://i.ytimg.com/vi/e5VQampkqdg/hqdefault.jpg
In this tutorial we take a look at how to use the Bootstrap grid. I explain what happens if you add more than 12 columns to the grid, and how break points work from smallest break points first to large.
Sponsored by DevMountain. Get yourself career ready, check out their website: http://goo.gl/enNbQV
Useful links:
———————————–
Don’t forget to subscribe:
www.youtube.com/QuentinWatt
Follow me on Twitter:
www.twitter.com/QuentinWatt
Follow me on Facebook:
www.facebook.com/quentin.watt
Feel free to donate:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CH68DBULMJ37N
————————————
Original source
36 responses to “Bootstrap tutorial 5 – Using the grid”
Great
Really found useful !
I’m so put off by you spelling container wrong right at the start haha
great tutorial on new bst4 features
tnx sir. its verry good your tuto
Fantastic explanation! Really helpful tutorial! Please keep up your work!
I'm so glad I found your videos !Love from South Africa 😏
excellent tutorial sir thank you so much from Bangladesh
I didn't go through the recent comments but still, I thought to give a heads-up about the col-xs-. If you are using the latest Bootstrap version (>= 4.*) then you would notice that the col-xs- is not working as expected. That is expected because col-xs-* has been deprecated since BS version >= 4. You simply need to replace any col-xs-* with col-* (for ex:- col-xs-4 should be replaced with col-4). Note:- You can still use can-lg-* as usual.
so if you only define (col-lg-1) do the other sizes (md, sm, xs) default to 12?
You are not an idiot. Thanks for the videos.
For some reason my col-xs command is not working where as col-lg or col-med are all working..any idea why this is happening?
Thank you so much. Much love browww
it's awesome man . you spoke well and I completely got everything you said . I was confused about bootstrap theory and now I'm clear of it 😀
In version 4, you need yo use col-4 instead of col-xs-4.
Thank you so much, your tutorials are really helpful. Your Tutorials are way more better than other tutorials on youtube. So thanks again. And im going to watch next tutorial.
Good job really love the tutorials well explained
very clear and useful
thanks
Clear crystal explained..nobody explains clear this as you!
please help me about text align;
first i need my text align on left when i use col-lg-4
but when i go to col-xs-4 i need to my text on align center
please guide me
The output is different i.e. Chrome(displays 12 rows from 1 – 12 one on top of the other ) and Firefox (displays 12 columns each side to side) can anyone explain this
Does anyone know why my rows are horizontal (I opened it in google chrome) and not vertical? Do I fix it in css ? I wrote the exact same thing. When I open it in Firefox it’s fine… so why is it like that in google chrome? Pretty interesting though. At 75% in google chrome it’s fine, lol I’ll just complete the video first of all. LOL okay I know why, I was opening the tab but not fully, so basically the tab wasn’t fully open. Thanks!
The bootstrap v4.0.0-beta.3 changed the xs class to always display as horizontal. Issues you might encounter trying to do what the tutorial suggests will arise because of this.
btw, col-xs-* has been dropped in Bootstrap 4 in favor of col-*
Your mistake on the container part explained what container is for me.
Superb video…very helpful!!!! Thanks. 🙂
haha – before I continue watching – i'm at 30 seconds… I wanted to say – FINALLY!!
Great tutorial! It isn't working properly when i add the col-xs-4 though, any idea why?
Hey Quentin: Two questions for ya and I am a beginning front end web developer.
First: Would you recommend using bootstrap of many of the other programs "skeleton" that just offer a grid system for responsiveness.
Second: If you're in the game for profit, do your recommend building from scratch your own websites or do you recommend templates etc.
Thanks for the awesome tutorials, they are the bomb!
Best,
Erik R.
Thanks Quentin for such awesome videos!!
Can you please give me the source file ?
great tutorials!!!!, but you need to write container at least a thousand times like old kids used to do to learn to write hehhehee.
You sound South African 🙂
Thank you for your tutorial. It is great. I can understand.
this has been literally the only boot strap related tutorial that actually makes sense, will watch them all thanks mate! you should consider making one with linking boot strap and django because it is a little different of a set up with the static folders and that might really help a lot of people, cheers
hi all,
i have a problem that shift control m doesnt work with chrome on my computer. is there another solution for this problem?