Container width – How to edit bootstrap.min.css using a child theme?

  • Resolved Mr Ben X

    (@mr-ben-x)


    8 years, 6 months ago

    Hi, I’m trying to change the width of the container. I have tried to make some changes in the style.css but without the desired result.
    Then I found the following segment in this file \css\bootstrap\bootstrap.min.css:

    .container{margin-right:auto;margin-left:auto;padding-
left:15px;padding-right:15px}@media (min-width:768px)
{.container{width:750px}}@media (min-width:992px)
{.container{width:970px}}@media (min-width:1200px)
{.container{width:1170px}}.

    After a very careful little test of editing the parent theme’s bootstrap.min.css I found out that changing the width there does the job. But for obvious reasons I don’t want to modify the original file.

    So how on earth can I edit the bootstrap.min.css using the child theme?

    Thanks!

    Ben

Viewing 2 replies - 1 through 2 (of 2 total)
  • codemovement.pk

    (@codemovementpk)

    8 years, 6 months ago

    Hi

    it will be better if you use your desire css in style.css with !important so then it may start taking effect, but changing directly in bootstrap is not a good idea.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 6 months ago

    If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then do the following:

    1. Install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin
    2. use its “CSS Code” section of the dashboard to hold your CSS modifications:
    3. (put this code in)

      .container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

@media (min-width: 768px) {
    .container {
        width: 750px
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px
    }
}
    4. Save

    Alternatively use your Child Theme style.css file to hold your CSS modifications

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Container width – How to edit bootstrap.min.css using a child theme?’ is closed to new replies.