0

Bootstrap.min.css is overriding everything I write in external CSS files. Inline seems to be the only thing that overrides Bootstrap. Does anyone know how I can use the following CSS script with inline scripting?

@media (min-width:768px){.container{width:80%}}
@media (min-width:992px){.container{width:80%}}
@media (min-width:1200px){.container{width:80%}}
DitR
  • 123
  • 1
  • 10

1 Answers1

0

/*
Uncomment for option 1
@media (min-width:768px){.container{width:50% !important}}
@media (min-width:992px){.container{width:50% !important}}
@media (min-width:1200px){.container{width:50% !important}}
*/
/*Option 2.. own style*/
@media (min-width:768px){.myclass{width:50% !important}}
@media (min-width:992px){.myclass{width:50% !important}}
@media (min-width:1200px){.myclass{width:50% !important}}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class='container' style='background-color:red'>Hi Option 1</div>
<div class='container myclass' style='background-color:red'>Hi Option 2</div>

This should override Bootstrap styles (!important)

@media (min-width:768px){.container{width:80% !important}}
@media (min-width:992px){.container{width:80% !important}}
@media (min-width:1200px){.container{width:80% !important}}
Mohamed Farouk
  • 1,089
  • 5
  • 10