last day (14 days later) » 

8:45 AM
2
A: container-fluid in Bootstrap 3.4 not stretching horizontally 100%

VuckoIf you look at the bootstrap source you would see that .container has fixed widths for every media breakpoint except for extra small devices, and .container-fluid has full width for all media breakpoints: .container { padding-right: 15px; padding-left: 15px; margin-right: auto; m...

 
Ok, so I'm using container-fluid. I read somewhere that using row (which has -15 margins and will offset the default margins for container-fluid) should suffice, but it isn't working. Is there a solution for this?
 
Yes, .row adds negative left/right margin, which is good. To "fix" that, you must use bootstraps .col- elements. So, to properly use bootstrap, your grid must look like - .container/.container-fluid > .row > .col-. Look at the documentation for grid system for more info
 
Took a look at the documentation and followed the structure of .container-fluid > .row > .col-xs-12 but it's displaying the same results :/
 
Yes, my bad - .col- elements also adds some padding. It should work using only .container-fluid > .row. Check the bootply.
Or another way would be to remove container-fluid padding - bootply
 
I tried to override the padding in my CSS file for container-fluid class, and it still isn't working and I'm getting extremely frustrated why such a simple task is causing such a huge headache. I set padding: 0 and margin: 0.
 
8:45 AM
Maybe some styles are overriding it? To be sure, you can add padding: 0 !important which will have the highest priority.
 
Hey. I have no idea what the hell is going on, and it would be great if you can step me through this. I set the CSS rule as !important and did not work.
 
Right click on the container-fluid element and inspect it to see which styles are applied to it.
The padding: 0 !imporant should be visible
 
They're both applied.
 
Then something other is causing the problem. Try to inspect which element adds that "gap"
 
I went through every single one of the container-fluid earlier, and checked/unchecked each of them and none of them undid the gap
Let me try again.
 
8:48 AM
Do you have a live link to your web?
 
Umm no, unfortunately I don't. You can clone it off my Github and run it locally if it's not too much trouble.
 
I unfortunately don't have a react environment. But something must be causing the issue. If you have padding: 0 important on .container-fluid element then it must work (the style should not be lined through).
Try just adding those classes, so html > body > container-fluid > p and then .container-fluid{ height: 500px; background-color: #foo } and p { border: 1px solid black }
Create the same situation like in the bootply - bootply.com/Wo8zh8JK1m
 
Did the exact same thing, ran it on my site, still gets the gaps
:(
This is such strange behavior. I've built other sites without a problem.
 
Hm... It should work :D
 
That's what I've been telling myself for the past hour hahah
 
8:59 AM
Can you c/p your markup and styles and create a fiddle?
 
The width of the <p> is 970, but the main body is 1036
Wait, is 970 a magic number for one of the screen sizes?
 
Yes, 970px is the fixed width for the .container (not .container-fluid)
 
Does it have something to do with the Bootstrap version?
 
Not really, bootstrap 3 and 4 use the same grid
Put your web live so I can inspect it, if you can
 
I just commented every single style markups except the ones I needed, and it was still failing.
I could, but it would take a while to set up on my domain :(
And I'd rather not push it to the live set because my old website with the same domain has traffic
 
9:03 AM
add it to a folder on your main domain?
yourdomain.com/some_folder/
 
I'm gonna sit on this for a bit before heading to bed. If I still fail to succeed by tomorrow (and if you're still wiling to help), I'll push it onto the site :)
Didn't realize it was 2am already
Thanks a lot for sticking with me!
 
no problem man :)
if you have still issues, ping me
adelivuk@gmail.com
i'm here to help :)
 
For sure. Thanks a bunch!
 
good luck and good night :D
 
Night man!
Quick observation: don't think it has to do with container-fluid. I saw the default margin settings for it, unchecked it, and realized 15px is not that big of a difference and isn't causing the white gaps on the side
 

last day (14 days later) »