Twitter Bootstrap Question posted in

Twitter Bootstrap default too spacious for me

My task is to replace a web ui piece by piece. Each new piece comes from a different code base, and is integrated into the old ui through iframes.
The new ui, is built with the Bootstrap framework. And it looks fine when the new ui pieces are viewed on their own. But when inserted into the iframe where they’re supposed to live, things look very crammed and things doesn’t really fit into that space.
I should say I am very much not a front end developer. So the answer to this is probably very basic.
So, what is the best approach, given I want to leverage bootstrap, but need to customize the default styles. Can i switch bootstrap css files to some other set of styles adjusted for spatially tighter circumstances? Or should I override the css myself? Or are there other ways?

Tags:

2

Answers


  1. 0

    You should not alter the default bootstrap.css file. Create your own styles.css file to override any of bootstrap’s default CSS.
    In your HTML, always call your custom css file after bootstrap.css

    Login or Signup to reply.
  2. 0

    You should make a new style.css file, and than overwrite the bootstrap classes. Always put your style.css below your bootstrap file otherwise it will not overwrite anything in the bootstrap.min.css. So now, if the default color of your <div class="nav"> is black from your bootstrap file, you can easily overwrite it like this

    HTML

    <link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>

    bootstrap.min.css 

    .nav {background-color: black;}

    overwrite:

    style.css

    .nav {background-color: red;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search