Bootstrap: flex:wrap/toggler position/content-between

Hi,

I have some issues I’ve been struggling with for a long time. Can somebody check out my code please?

  1. When I change screen size, my " Specials" disappeared under next section. I try to use flex-wrap but doesn’t work. I even rebuild my code before to make it more clear to look at.
  2. How i can change position of toggler?
  3. I cannot make justify-content-between to my “Specials” and "Filozofia - Section (picture - lorem). I tried to make d-flex with container and try that way - doesn’t work. Rows are by default display:flex but doesn’t work as well.

I try to change container to container-fluid in “Specials” but doesnt work as well.

I know on IO it wont work, but i don’t know here I can put my code for you to check-up. Link below.

IO

and pictures how it looks like:

You have a fixed height of 100vh on your div with class “backgroundimage”, that’s why you specials get cropped.

Toggler could be positioned with flexbox or position: relative. It depends.

1 Like

You’re right. Both fixed but still struggle with content-between. They really don’t want to have gaps.

I actually don’t understand what you mean in your last point. Try to rephrase.

I want to justify-content-between on my columns in “specials” and “filozofia” (green color) but it doesn’t work. They always stick to each other no matter what im going to do. Maybe width is wrong, but width depends on content inside?

I want to ask about toggler one more time. When I make “justify-content-end” then he appears on position yellow (on the picture). When I tried to position him onto pink position (on the picture -absolute) all my navigaton links went there as well (when I expand display screen size). Is it possible to change only position of toggler without moving all links with him?


I guess it has to do with how Bootstrap works (I haven’t done much Bootstrap, especially v4).
Try this: https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles

Regarding toggle moving with navbar - toggle is the part of navbar so logically they’ll move together.

I made it but finally I am a little disappointed.
I change values of columns on different size of a screen:
col-xs-12 col-sm-6 col-md-2 col-lg-2 Then I have an effect like this:
I want to achieve square shape columns instead of rectangle as you can see in “lg” and “md” size. Next point is, how i can make gaps between those square in “sm” and “xs” sizes? As tou can see, they stick to each other.

I would get rid of Bootstrap and use Grid/Flexbox. That way you’ll have much more control over the layout.
I know it doesn’t answer your question, but in 2019 there are really no reasons to use Bootstrap.

You can try to add some spacing classes: https://getbootstrap.com/docs/4.1/utilities/spacing/

Just FYI. There are no xs classes in bootstrap 4, it is just col-# now.

1 Like

I’ve fixed problems then I have another one. First I want to ask about a toggler button. So it’s impossible to move only a toggler button without moving all nav links?

Let;s get back to my issue. I have 6 members cards with setup like this:
<div class=“col-lg-4 col-md-6 col-sm-6 d-flex justify-content-center”>
Problem is in display on SM size. 1 and 2 are next to each other. After that 3rd one i alone when there is a place next to him. Next couple (4-5) are fine and 6th is alone just like 3rd. They should be paired by 2 (1-2/ 3-4/ 5-6). I tried to change paddings/sizes and other stuff but nothing works.
Any1 can see a solution?

updated IO:
IO LINK

I came back here just only to say to you that you was right about BS :wink: