Bootstrap 3 responsive h1 tag
You can use this : CSS : h1 { word - wrap : break - word ; - webkit - hyphens : auto ; - moz - hyphens : auto ; - ms - hyphens : auto ; - o - hyphens : auto ; hyphens : auto ; } DEMO : http://jsfiddle.net/ckq04r5q/ Or if you want more browser compatibiliy you can sibling your h1 with id or class and reduce font-size with media query on < 768px CSS : @media screen and ( max - width : 768px ) { h1 { font - size : 14px ; } } When your screen as less to 768px of width the property has running ============================================================== I've had the same problem, which I've solved with jQuery: function resize () { var n = $ ( "body" ). width () / 17 + "pt" ; $ ( "h1" ). css ( 'fontSize' , n ); } $ ( window ). on ( "resize" , resize ); $ ( document ). ready ( resize ); The ratio can be adjusted by r