CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-4
user8228592
user8228592

Reputation: 41

How to make bootstrap headings responsive?

I'm making a bootstrap website. Everything is working smooth on all the screen sizes but the heading(h1) remains fixed size. It is too big for small screens. How can I fix the bootstrap h1 or headings in general.

Upvotes: 3

Views: 5166

Answers (3)

Василий Буторин
Василий Буторин

Reputation: 111

That is my solution. Fully responsive bootstrap headings

@import "bootstrap/scss/functions.scss";
@import "bootstrap/scss/variables.scss";
@import "bootstrap/scss/mixins.scss";

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .h1#{$infix} { font-size: $h1-font-size!important; }
    .h2#{$infix} { font-size: $h2-font-size!important; }
    .h3#{$infix} { font-size: $h3-font-size!important; }
    .h4#{$infix} { font-size: $h4-font-size!important; }
    .h5#{$infix} { font-size: $h5-font-size!important; }
    .h6#{$infix} { font-size: $h6-font-size!important; }

    .display-1#{$infix} {
      font-size: $display1-size!important;
      font-weight: $display1-weight;
      line-height: $display-line-height;
    }
    .display-2#{$infix} {
      font-size: $display2-size!important;
      font-weight: $display2-weight;
      line-height: $display-line-height;
    }
    .display-3#{$infix} {
      font-size: $display3-size!important;
      font-weight: $display3-weight;
      line-height: $display-line-height;
    }
    .display-4#{$infix} {
      font-size: $display4-size!important;
      font-weight: $display4-weight;
      line-height: $display-line-height;
    }
  }
}

Upvotes: 1

jenson-button-event
jenson-button-event

Reputation: 18941

best use the bootstrap sass in your own sass, keep it DRY and maintainable

@import "../bootstrap-sass/bootstrap/variables";

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

Upvotes: -1

Binayak Das
Binayak Das

Reputation: 618

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.

Upvotes: 4

Related Questions