Not centered logo and login. Upgrade from v6 to v7

Hello. I’m having trouble aligning my company log and login button to the center of the page. My header code seems to be correct. In google devtools there is an extra div as highlighted in the screenshot. How do i correct this? Thanks!

Add a class “center-block” to make image in center in div.

I’m still a beginner in CSS. This is the short code found in the Header:

<br><div style="text-align: center;"><a href="/"><img src="/files/SKSlogo.png" style="max-width: 200px;"></a><h4>Quality for Life</h4><br><p><a class="btn btn-primary" href="/login">Login</a></p></div>

Where do i place center-block?

The logo seems to be already inside a div. I don’t know where to adjust or remove that outer div.

This should work.

<div class="center-block" style="text-align: center;"><a href="/"><img src="/files/SKSlogo.png" style="max-width: 200px;" class="img-responsive"></a><h4>Quality for Life</h4><br><p><a class="btn btn-primary" href="/login">Login</a></p></div>

Note: I’m not sure whether is it appropriate to discuss Bootstrap question on ERPNext forum. A rich Bootstrap discussion is out there on Internet. A little bit of googling will definitely help you. :slight_smile:

Thanks for that, but this was the result of that code.

This issue might be within ERP. But I might be wrong. :slight_smile:

No, it’s not an ERPNext issue.
Share your instance URL.

By instance URL. You mean the link to my website?

:slight_smile: