Can someone kindly explain to me how to get a decent footer with Bootstrap Studio?

I used a column gave it an id of copyright and for the CSS
“position: absolute;”
“bottom: 0;”
“height: 60px;”
“padding-top: 15px;”
“background-color: #ccc;”

end result, it looks like a footer but it doesn’t work like a footer should. there’s this weird thing happening where the “footer” cuts some of the page’s content. not much, but lets say about 5cm worth of content space. It’s annoying. and as for the footer component. I have no idea whatsoever on how to work that.

I even tried starting with a container then putting the column in, but that’s even worse.

Since you are making what seems to be a “Sticky Footer”, you have to account for the overlapping space that your footer is making compared to your content. I think probably the thing you want to do is add some padding-bottom to the content of your page so as to effectively push up the rest of your content that is being overlapped.


<div class="container pageContent">

I think that would help with your overlapping. The padding-top of your footer being that it’s absolutely positioned does not push your footer down past your content.

Hope this helps :slight_smile:

any idea of how to create a footer, since I can’t actually write HTML?

Well a footer pretty much contains copyright and company name/logo/social media links and that sort of stuff.
As to the design that’s really entirely up to you.

You can start out with dragging the footer element and dropping it on to the body element. Then inside that you can use all the other available components that BSS has to offer, container with rows and columns etc…

I’d suggest in the Components pane select the User tab and then type in foot. Drag the Pretty Footer component on to the Body element that is in the Overview pane.
You can take a look at it’s html structure so you can see what you can do for a footer.

You could if you want to have a bottom navbar for a footer, just drag the navbar component to the Body element in the Overview pane and select that navbar and in the Options pane set position to fixed-bottom.

Hope this helps you out. :slight_smile: