HomeОбразованиеRelated VideosMore From: kudvenkat

Bootstrap grid column offset

636 ratings | 145218 views
bootstrap offset column example bootstrap grid layout offset bootstrap grid offset examples twitter bootstrap 3 column offset bootstrap img responsive example bootstrap img not responsive offsetting bootstrap columns bootstrap image thumbnail bootstrap image round corner bootstrap image circle bootstrap image classes In this video we will discuss the concept of 1. Offsetting the Grid Columns 2. Bootstrap classes to style an img element Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2016/05/bootstrap-grid-column-offset.html
Html code for embedding videos on your blog
Text Comments (123)
Sue Xiang (1 year ago)
This is a superb tutorial, thank you so much for posting it.
kudvenkat (1 year ago)
Thank you very much for taking time to give feedback. This means a lot. I am very glad you found the videos useful. I have organised all the Dot Net & SQL Server videos in to playlists, which could be useful to you https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd If you need DVDs or to download all the videos for offline viewing please visit http://www.pragimtech.com/order.aspx Slides and Text Version of the videos can be found on my blog http://csharp-video-tutorials.blogspot.com Tips to effectively use my youtube channel. https://www.youtube.com/watch?v=y780MwhY70s If you want to receive email alerts, when new videos are uploaded, please subscribe to my youtube channel. http://www.youtube.com/subscription_center?add_user=kudvenkat If you like these videos, please click on the THUMBS UP button below the video. May I ask you for a favor. I want these tutorials to be helpful for as many people as possible. Please share the link with your friends and family who you think would also benefit from them. Good Luck Venkat
Abdoulanziz Ally (20 days ago)
This tutorial has helped me understanding the concept of offsetting bootstrap columns.
Chamindu Weerasinghe (1 month ago)
If "img-circle" is not working use only "rounded-circle" inside that class
Helder C (1 month ago)
Great content! Thank you!
Kandyland Holidays (2 months ago)
Superb
Adii Shukla (3 months ago)
abe col-md-offset is why not working
Anushka Kasera (4 months ago)
img-circle is not working
Rabi Manandhar (4 months ago)
Clases have changed in 4.1.3 , offset - * for col-md-offset-* , img-responsive to img-fluid , rounded-circle for rounding the image.
Rabi Manandhar (4 months ago)
Sir offset class not supporting on my bootstrap 4.13 , trying the same example. !! Seriously need help Sir !!
uzdarbis namuose (5 months ago)
how to fix blurry large image to fit size and do not strech image quality ?
Sujit Ambre (6 months ago)
superb tutorial
Sidhak Singh (6 months ago)
Those who are getting offset problem, class name has changed to offset-md-* instead of col-md-offset-* in bootstrap 4. Anyways thanks for the great tutorials venkat!!
LenTos1337 (5 months ago)
Thanks a lot!
Aashish Petkar (6 months ago)
hello sir offset class in not shown. how to fix it sir...
Gio Dev App (5 months ago)
Try this one <div class="row"> <div class="col-md-3 offset-md-3""> <div class="customdiv">Colmuns 1</div> </div> <div class="col-md-3"> <div class="customdiv">Colmuns 1</div> </div> </div>
Sai kishore Meda (6 months ago)
Write img tag with img-rounded class within the div and give grid classes on that div
add class="customDiv img-responsive img-rounded" . you did not mentioned customDiv.
Babita Bisht (7 months ago)
In bootstrap 4 img-rounded class has changed to class rounded and img-circle class has changed to rounded class....
aman jain (7 months ago)
img-responsive not working? how to resolve it? class="img-responsive"
Sabbir Ahmed (9 months ago)
Offset class isn't working... :( <div class="container"> <div class="row"> <div class="col-md-3 col-md-offset-3"> <div class="cus_c">Content area</div> </div> <div class="col-md-3"> <div class="cus_c">Content area</div> </div> </div> </div>
imran khan (9 months ago)
img-rounded circle even my offset not working please guide
CHAITHANYA GANDHAM (9 months ago)
col-md-offset-3 not working now it changed to "offset-md-3" ........
Raphael Bernard (9 months ago)
Vankat your question maybe solved by these solutions https://stackoverflow.com/questions/37404339/bootstrap-img-rounded-with-col-class-not-working This works <div class="container"> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <img src="Images/tulips.jpg" class="img-responsive img-rounded" /> </div> </div>
TheOnlyEmperor (9 months ago)
If you are using bootstrap 4.0 what more likely you gonna. The offset for 2:36 gonna look like this. <div class="row"> <div class="col-md-3 offset-md-3"> <div class="customDiv">Column1</div> </div> <div class="col-md-3"> <div class="customDiv">Column2</div> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="customDiv">Column1</div> </div> <div class="col-md-3"> <div class="customDiv">Column2</div> </div> <div class="col-md-3"> <div class="customDiv">Column3</div> </div> <div class="col-md-3"> <div class="customDiv">Column4</div> </div> </div> </div>
Cristian Morales (10 months ago)
New boot strap is "offset-md-6" Good tutorial needs to be updated a bit as the as software evolves.
suvankar Mondal (11 months ago)
Hi Kudvenkat, Please Help me.col-md-offset-3 Not Working in my HTML. I can't understand what is the problem. Please help me sir..
Gio Dev App (5 months ago)
Try this one <div class="row"> <div class="col-md-3 offset-md-3""> <div class="customdiv">Colmuns 1</div> </div> <div class="col-md-3"> <div class="customdiv">Colmuns 1</div> </div> </div>
vatsal joshi (1 year ago)
its changed in the newer version of bootstrap use only class .offset-md-3 to apply this
Wise Connoisseur (1 year ago)
Plzzz help sir... col-md-offset is not working in my case... i dont know why.... I am using bootstrap 4.0.0-beta.3
MARI (11 months ago)
its changed to class="col-md-3 offset-md-6"
Nahid Bin Ashraf (1 year ago)
for bootstrap 4 or higher , there was some changes. Here, we don't need prefix col-, just offset-md-3 like <div class="row"> <div class="col-md-3 offset-md-2"> first offset </div> </div>
Wise Connoisseur (1 year ago)
Aalif Khan thank you very much.... i was facing this problem... but now its working superb
Mital dhas (1 year ago)
Ppl watch it bt they forget to hit like :) but trust me sir, you are helping us soooo much ... thank you for all the efforts
jatin Nandwani (1 year ago)
with the same lines of code offset attribute is not working can someone tell me why? it's not working
Kevin Rainer (1 year ago)
Wow thank you this is very helpful!
haydar M.Al-samawe (1 year ago)
thank you sir for your amazing tutorial , just i want to note for new students if you use bootstrap 4 the code will be like this <div class="col-md-3 offset-md-3">
haydar M.Al-samawe (1 year ago)
thank you sir for your amazing tutorial , just i want to note for new students if you use bootstrap 4 the code will be like this <div class="col-md-3 offset-md-3">
pradeep budhathoki (1 year ago)
If <div class="col-md-3 col-md-offset-6"> is not working then replace it with <div class="col-md-3 offset-md-6"> No need to write the prefix col for the offset!!!
Chamindu Weerasinghe (1 month ago)
Hey Bro thank you very much...
Pranab Roy (2 months ago)
thanks bro appreciate
Siddharth Singh (3 months ago)
Thanks bro. same issue and same solution worked.
Arun kumar (3 months ago)
thanks bro
Anushka Kasera (4 months ago)
thanks a lot . I was facing the same problem.
yasin sheikh (1 year ago)
plz help plz help col-md-offset-* class not working on my project..............
Wise Connoisseur (1 year ago)
yasin sheikh use "offset-md-6"
Priyanka U (1 year ago)
Dear Sir... excellent class... thank you
Shanti Iyer (1 year ago)
Very good tutorials, one can easily learn through your videos. Thanks Venkat.
mutavakkil (1 year ago)
doesnt work
Ravi Krishna (1 year ago)
offset is not working
Gio Dev App (5 months ago)
Try this one <div class="row"> <div class="col-md-3 offset-md-3""> <div class="customdiv">Colmuns 1</div> </div> <div class="col-md-3"> <div class="customdiv">Colmuns 1</div> </div> </div>
Satya narayana (1 year ago)
Hi sir sir i want 5 columns in first div tag then how can i take sir all columns are should equal? and when i change screen like for mobile or tab or medium screen , the columns comes one by one but i want side to side in first row div tag ... please tell me sir and thnk you ...
sbarigeda (1 year ago)
If possible please add the text or notes content for this video 5. The script is missing for this video. Thanks in Advance
Rajeshkumar Reddy (1 year ago)
col-md-offset-6 is not working. I am getting output as normal. Im not getting space between first and second coloumns. <div class="container"> <div class="row"> <div class="col-md-3"><div class="custom">First</div></div> <div class="col-md-3 col-md-offset-6"><div class="custom">Second</div></div> </div> </div> </div>
aman jain (7 months ago)
remove col from col-md-offset-6
divyasri pantangi (1 year ago)
I have one solution for applying img-rounded along with col-md-* better to apply grid on a div(<div col-md-4>)) and place an image inside this div element with class img-rounded(<img class="img-rounded">and close the div after img element. it works fine for me.
Tay Kratzer (1 year ago)
Excellent series. Thank you so much for your work. I like all of the detail. I personally learn and remember best when I see all of the detail.
Chaînons Manquants (1 year ago)
Thank you !
Namah Shrestha (1 year ago)
Can we move the columns to the left too?
H Abdul Rauf (1 year ago)
i'm little bit confused plz telme about this code div class="container"> <div class="row" <img src="images.jpg" class="img-responsive img-rounded" class="col-md-4 col-md-offset-4"/> </div> </div> you have put image in first 4 col so why it will show in canter (2nd col)?
THOMAS GEORGE (1 year ago)
u have set the offset!
Javed Ahmed (1 year ago)
sir how to finish space b/w columns
LeNard Simmons (1 year ago)
Great tutorial, I'm learning a lot. Just a question about img. Should we also put the img in a div inside of our rows?
Daya (1 year ago)
thank you sir, this is supper tutorial.
Tom Evans (1 year ago)
Thank you for the video.
Mahfuzar Rahman (1 year ago)
MAN.. you are a HERO :D
Mohammad Suvo (1 year ago)
great tutorial....very specific and detailed explanation ..... i m grateful to the channel..
Simeon Spiridonov (1 year ago)
Hello and thank you for the nice guide! I would like to ask you guys for help with bootstrap. Let's say for example we have 3 divs in one row (lets call them 1, 2 and 3 and style them with borders and back-ground color so they appear as boxes) and we would like to make them responsive in that order: 1. 1,2,3 are shown all together while under < 768px (col-xs-4 I guess). 2. 1,3 are shown all together while in between 768px & 992px (col-sm-4) however №2 will be invisible for that range 3. 1,2,3 are shown all togetehr again while 992px+ I cannot use more than 2 adjustments in each div, for example {<div class="col-sm-4 col-md-offset-4">Field 3} It should be something like that. I would be very grateful if you help me with this one. Learning the logic behind the boostrap's code, even if it looks logical and simple it is not, there are some other behaviors/relations I cannot see between the elements. Thanks!
Lalami M'hamed (1 year ago)
we have to do that if we want to show rounded corner : <div class="col-md-4 col-md-offset-4 "> <img src="assets/images/mc_07_mg_2224.jpg" class="img-responsive img-rounded" /> </div>
Daminee Sao (1 year ago)
superb and awesome sir.thanks a lot
JAVED AHMED (1 year ago)
sir my concept was finally clear my seeing this tutorial i thank you sir for this great work
Vishal Aggarwal (1 year ago)
Nice Tutorial, thanks and keep it up.
Melwyn Rodrigues (1 year ago)
Thanks
krishna t (1 year ago)
Great effort! Thank you !
Helal Khan (1 year ago)
<div class="row"> <div class="col-md-4 col-md-offset-4"> <img src="Images/1.PNG" class="img-responsive img-rounded" /> </div> </div>
Mohammad Jaker Khan (1 year ago)
Sir you are awesome.
Hitasha Sidhwani (2 years ago)
Hi Sir, To solve the rounded corner issue, I use the following code and it works without removing the classes: <div class="row"> <div class="col-md-4 col-md-offset-4"> <img src="Sample Pictures/Penguins.jpg" class="img-responsive img-rounded"/> </div> </div>
THOMAS GEORGE (1 year ago)
u got the solution? please share !
Adam Szołtek (2 years ago)
Hello everybody :) I found the solution for the problem with img-rounded mention in above video. To solve the problem you need to put img in separate div. For this div you are using class="col-md-4 col-md-offset-4" And for the img you are using "class=img-responsive img-rounded" Then image will be responsive and rounded. Best Regards Adam
anthony adams (2 years ago)
col-offset does not work for me. Im just using regular chrome browser too. I have to put a blank white column in front of it to push over the offset column if i want it to work. Anyone else have this problem?
THOMAS GEORGE (1 year ago)
you got the solution? plz share
anthony adams (2 years ago)
nevermind...im using BS 5 alpha...they use push and pull now. Sorry.
Mohammad Faizan (2 years ago)
Sir, to solve rounded corner issue, <div class="col-md-4 col-md-offset-4> <img src="___" class="img-rounded"> </div>
Kimani Wa Ndirangu (10 months ago)
This works!!Thanks.
pure sorcery dude!
Alvin Miles (2 years ago)
Do not put col-md-4 col-md-offset-4 on the img tag. Put it on a Div then add the img tag. <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <img src="images/####.jpg" class="img-responsive img-rounded" /> </div> </div>
ram meena (2 years ago)
great tutorial
Alvin Rochafi (2 years ago)
I have been watch 5 videos from beginning of this series, and i love the way you explain bootstrap. Even your videos more easy to understand than the other video that use my native language (not-english). Thanks !
Osnaldy Vasquez (2 years ago)
<div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <img src="images/####.jpg" class="img-responsive img-rounded" /> </div> </div> Easy stuff!!
Marko Pojer (1 year ago)
ez
UMAROUT (1 year ago)
thank u very much
Excellent, only experienced prof. can teach with such nice examples....well done Venkat
Mohammad Jaker Khan (1 year ago)
Exactly.
Raja C (2 years ago)
Really al rounder in ms stack
Alvin Rochafi (2 years ago)
agree
kudvenkat (2 years ago)
Thank you very much for taking time to give feedback. This means a lot. I am very glad you found the videos useful. I have organised all the Dot Net & SQL Server videos in to playlists, which could be useful to you https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd If you need DVDs or to download all the videos for offline viewing please visit http://www.pragimtech.com/order.aspx Slides and Text Version of the videos can be found on my blog http://csharp-video-tutorials.blogspot.com Tips to effectively use my youtube channel. https://www.youtube.com/watch?v=y780MwhY70s If you want to receive email alerts, when new videos are uploaded, please subscribe to my youtube channel. http://www.youtube.com/subscription_center?add_user=kudvenkat If you like these videos, please click on the THUMBS UP button below the video. May I ask you for a favor. I want these tutorials to be helpful for as many people as possible. Please share the link with your friends and family who you think would also benefit from them. Good Luck Venkat
ram meena (2 years ago)
great tutorial you provide thanks for this..
KING LATEEF (2 years ago)
IE8 does not support img-rounded corners
Mohamed Yosry (2 years ago)
sir ".img-rounded" is working but the .col-md give the image a padding left and right . if anyone give a border color to img you will show the round . to solve it force the padding left and right for image to 0 .
Owaiz Yusufi (2 years ago)
img-rounded class of bootstrap is not working because in the main file it is set to 6px so we have to make changes from the main file of bootstrap thank u sir for your great support and explanation
Scientist (2 years ago)
amazing , Keep it up
raees ahmed (2 years ago)
Kudvenkat your awesome . Great work Man.We can use following option. <div class="row">             <div class="col-md-3 col-md-offset-3">                 <img src="Images/IMG_06443.JPG" class="img-responsive img-rounded" />            </div>         </div>
أحمد الخطيب (2 years ago)
sorry I didn't see it written in one of the bellow comments
أحمد الخطيب (2 years ago)
Sir first of all i really do appreciate your effort. and I really thank you a lot for these lovely videos Secondly, for the issue of rounded corners of the img, why not to wrap the img control within a div having columns and o ffset classes , it will work fine I expect
prerna zilpe (2 years ago)
to get .img-rounded we need to increase border radius px. By default it is 6 px.
Emin Menteş (2 years ago)
Hi venkat, this is how I fixed this issue.. <div class="row"> <div class="col-md-4 col-md-offset-4"> <img src="Images/Tulips.jpg" class="img-responsive img-rounded" /> </div> </div>
Christopher Chin (2 years ago)
Amazing Venkat. Thank you.
Hasan Siddiqui (2 years ago)
Hi Kudvenkat, you can try something like this. Remove col and col-offset classes from image and add div above image and add classes to div. this worked for me. <div class="row"> <div class="col-md-4 col-md-offset-4"> <img src="1.png" class="img-rounded" alt="Cinque Terre" width="304" height="236"> </div> </div>
Vasu web Media (6 months ago)
good and thank u
Siniša Jovčić (9 months ago)
but then my picture is bigger than div :(
LeNard Simmons (1 year ago)
I see you answered my question down here. Either way looks like it will work. Thank you sir, for a great tutorial.
SHYAM KUMAR (2 years ago)
Dear Sir, Please use this code for image rounding... <img src="Images/smm.jpg" class="col-md-4 col-md-offset-4 " style="border-bottom-left-radius:25px; border-bottom-right-radius:25px; border-top-left-radius:25px; border-top-right-radius:25px;"/> it would work as you are expecting.. Thank you So much Sir...
Eww Eww (2 years ago)
Obviously it work, but it not clean. You can see other answer in comment section.
Rohan Bhokare (2 years ago)
instead of applying col-md-offset-3 on <img> apply it on <div> and put <img> in that <div> n then apply img-rounded on the <img>
Sivasai Sambela (2 years ago)
Hello Venkat. Your videos are so helpful for interview going persons like me. Clear explanation with examples. I need one help. I want videos on (asp.net / c#.net commonly asked programmatical questions) and answers i.e like printing palindrome number and printing a text in reverse by word.
developernader (2 years ago)
Thank you sir
M Shoaib Waheed (2 years ago)
Nice ... keep it up
Bimal Das (2 years ago)
sir, ".img-rounded" class having style of "border-radius:5px". But I noticed that if I modify this value to 20px from Google Crome Developer tool(F12) , then the radius is observable. I don't know why It behaving like this.
RAQIBUL ALAM RASHED (2 years ago)
Thanks

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.