Small white space at bottom of bootstrap site
I have tried over and over debugging with chrome tools. When I hover over the "P" element in my footer it shows that it is pushing down and creating the space. However I have no Margin bottom (mb- is the bootstrap for margin bottom) in my footer at all.
Here is the element that chrome tools says is the problem.
<p class="text-white pb-5 fs-3">Copyright © Frontend Bootcamp</p>
Link to marge documentation in bootstrap
https://getbootstrap.com/docs/5.3/utilities/spacing/#margin-and-padding
and here is the netlify link to it so you can use chrome tools.
https://melodious-sundae-96dca8.netlify.app/
thanksSpacing
Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.
3 Replies
There are default styles on many elements, that’s why there’s often a global reset where one takes off margin and padding from everything and adds it back in where it’s needed. Not on pc but my guess is something is overflowing or has default margin/padding to make that space
as @clevermissfox says some elements have default styling and a p tag is one of them by default it's 1em for margin top and bottom. But bootstrap has it's own reset to set the margin on top to 0 and on bottom to 1rem. So if you want to get rid of that extra space you need to add
mb-0 class on that p tag
All of this information can be easily found using dev tools 😉Thanks alot this helped