Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by nicholas maddren
nicholas maddren
12,793 Points

Bootstrap makes my elements inside a row have a border the same size as a row?

Why is it when I add a border to any element within a row it doesn't wrap around the element and wraps around the row?

I simply have a H3 tag and want a white border around it however it spans the whole row instead of wrapping the H3 tag.

Any idea how you prevent this?

Thanks

4 Answers

Colin McGraw
Colin McGraw
15,337 Points
Colin McGraw
Colin McGraw
15,337 Points

It could be because headings are block-level elements by default, have you tried setting that h3 to: display: inline-block;?

Grant Zabriskie
Grant Zabriskie
11,017 Points
Grant Zabriskie
Grant Zabriskie
11,017 Points

Hey Nicholas,

Can you give us an example of your code, both HTML and CSS? I'm guessing this has something to do with floats, but it's hard to know without some code to inspect.

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

Here is the live example just look at the orange outline at the top and you will see :)

http://www.dealerbyte.co.uk

Grant Zabriskie
Grant Zabriskie
11,017 Points
Grant Zabriskie
Grant Zabriskie
11,017 Points

Nicholas, I can pull up your live example but I don't see an orange outline anywhere on the page. Am I missing something?