0

i don't have much experience with twitter bootstrap, but with so many good reviews i decided to use it for a new project i'm working on.

I was wondering how can i get a pixel perfect grid with this new bootstrap that has 1170px width. how do you guys work with that?

I'm in the design stage for now, and i wan't to make sure it will work fine when i build it with bootstrap, the only problem i'm finding is that i can't get 12 even columns with the width of 1170px.

What i mean by the grid not being pixel perfect is that the columns are not even, some of them are wider than the others.

Let me know if you guys have any suggestion to get around this.

Cheers, Thales

Thales Ribeiro
  • 49
  • 1
  • 10

2 Answers2

0

Read the documentation of bootstrap carefully from the begining . Bootstrap 3- Grid

If you have read then try 

    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Untitled Document</title>
     <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen" />
    </head>

<body>
  <div class="row"> 
    <div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
  </div>
</div>



  <script src="assets/js/jquery.js"></script>
  <script src="assets/js/bootstrap.js"></script>
  <script src="assets/js/dropdown.js"></script>
</body>
</html>

If you want a pixel perfect of 12 coloumns then you have to define a div with the class "col-md-1" for twelve times as above.

Do Read From getting started in Bootstrap 3

Karthikeyan
  • 323
  • 3
  • 7
0

try using x2 size designs in photoshop, you get rid of 0.5 pixels and can export retina assets if needed ;) It is easy enough to work of them for testers too.

Andrew Arnautov
  • 345
  • 3
  • 5