Bootstrap 3 Responsive H1 Tag

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

How to make bootstrap headings responsive?

You can use @media for this

@media screen and (max-width: 768px) {
    h1{
        font-size:14px;
    }
}

That means less than 768px the h1 tag font size will be 14px.

Like this you can set for all pixel you required.

Responsive HR alignment in Bootstrap 3

Using pseduo element css you can achieve this. Give h1 position:relative and using :after add a line of width:60px and giving it position:absolute set its position to achieve the desired result :)

.title-block {  display: block;    text-align:left;}.title-block h1 {  margin: 0px;  font-size: 35px; position:relative;  display: inline-block;
}.title-block h1:after{content:'';width:60px; height:1px; background:red; position:absolute; bottom:-5px;left:0px; right:auto; margin:0px auto;}
@media(max-width:768px){.title-block{ text-align:center}.title-block h1:after{left:0px; right:0px;}}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="title-block text-xs-center text-lg-left">  <h1>My Title</h1>
</div>

How would you have a single h1 tag with different styling for mobile and desktop? (Using bootstrap)

Refer to link bootsrap

Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries. Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.

Then Best way as I know is to use media queries.
Viewport is another way for this. But not all browsers supports link info. Then most reliable way is to use media queires

---

Related Topics