I am using Bootstrap and wanted a colored background for my h2 title like this:

enter image description here

So I wrapped the text in a tag. The problem is on mobile devices it shows like this, which is not good

enter image description here

Can you please help with a solution ? Thank you

  • CSS display: block; – Cai Dec 20 '15 at 22:02
  • I'm not entirely sure why you'd wrap the h2 text inside yet another element (tag), so here's an example of how you could do that with just the h2 tag – Joonas Dec 20 '15 at 22:21
  • sorry for not putting all the details .. The thing is I need it to be CENTERED .. and if I set display as inline-block, text-align: center is not working :(( – Cornel Nita Dec 23 '15 at 18:00
  • bloomberg.com/news/articles/2015-12-03/… this is how I need it to be .. and they also wrap the title in a span tag ... – Cornel Nita Dec 23 '15 at 18:06
  • This question is very confusing. The example image of your current result is almost identical to the heading in the website you linked. It's just that the line-height is no good and the text is centered, which you say you want, but can't achieve, even though it's very much centered in your example image. Then there's the desired result example, which is nothing like the site you linked... – Joonas Dec 29 '15 at 11:09

I believe the problem is that you're applying the background color to the inner tag (a span?) instead of to the outer h2. You haven't said exactly how you're using Bootstrap, so I put together an example (codepen) that I think shows what you have and what you want with just basic CSS.

Here's the HTML:

<h2 id="bad"><span>Restaurant Reservations & Take-Aways</span></h2>
<h2 id="good">Restaurant Reservations & Take-Aways</h2>

And the CSS; ignore the width=10em; that's just to simulate a narrow/mobile screen:

h2 { width: 10em; text-align: center; line-height: 0.9;  color: white;}
h2#bad span {background-color: black;}
h2#good {background-color: black;}

So, the idea is to make sure the background applies to the block-level element, the h2, not the inline text, the span. Hope you can easily work that back into your Bootstrap setup.

  • the thing is on desktop (if you delete the width) the background color will go on all container's width .. it works on mobile screen though .. but I need it on both – Cornel Nita Dec 23 '15 at 18:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.