Hi everyone,
I’m very very new to this and stuck on an early stage of the project. I’m having issues placing my buttons on the row and they continue to end up stacked. I’ve searched, read, researched and I think my issue is in my lack of understanding of the col ( s , m, lg). Any help or guide in the right direction would be very much appreciated. Thanks all!
1 Like
Because you are using divs.
Try an unordered list.
Hey JohnnyBizzel,
I tried
- before my the first <div class="row> and also tried
- within the col classes and they stayed stacked. Am I misunderstanding your instruction?
Not sure what layout you are looking for.
col-xl-3 class are set to have width 300px if your screen 1200px and larger. Any screen resolution below 1200px, the div column will stack on top of each other which is exactly what you are getting right now.
Change col-md-3 and you will see them all next to each other. If you resize your screen to 768px and below, it will stack.
1 Like
Yea…I’m not sure what layout I’m looking for either. But I think I’ve figured out how to get those buttons in a row. Thanks for the feedback!
1 Like
Can you explain better please…
Your class: container-fluid background-image have some padding left and right… Your hamburger does not show up nicely because of that paddings.
Now cols:
Read all of documentation for bootstrap grid(cols) here
But in your case, if you have 4 divs with class “col” , col will automatically calculate your width…
If you have width: 100% and 4 divs with class “col” it will bee 100/4 = 25% each, and that’s why you will have such space.
My opinion, you dont have to use bootstrap cols for navigation. Just use ul and li tags
Can you explain better please…
Hopefully this will be a better explanation,
I wanted my about, portfolio, contact, and dropdown menu to be next to each other at the top. I read up some more and added the nav bar and made the cols so that it will automatically calculate the width.
Your class: container-fluid background-image have some padding left and right… Your hamburger does not show up nicely because of that paddings.
I’m so sorry, but could I get clarification on this? Are you referring to the spacing of the bar on the left and right side?
Now cols:
Read all of documentation for bootstrap grid(cols) here
I did read that doc and a lot on w3schools.
My opinion, you dont have to use bootstrap cols for navigation. Just use ul and li tags
This is what I need to read up on b/c JohnnyBizzel suggested that as well. I think it’ll just take me some time and trial and error to see how I would use that.
Thank you for the thorough feedback!
Your white box in header is not in full width because of your class: container-fluid background-image. And half of your hamburger disappears.
Bootstrap have default paddings(You can see that on inspect element), padding-left: 15px and padding-right: 15px. You should kill that paddings in your css, just: padding: 0 …And your hamburger will be fine, now half disappears.
Now col navigation:
Did you mean this? Only you want that with cols?
Or you want to your navigation be on center of white box but using cols still?
I have a better understanding now. After all that and I don’t even use cols. This project is definitely challenging for me. Thank you so much for the explanations.