Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 553
  • Last Modified:

Bootstrap

Am used bootstrap frame work on my website. but i have problem  with  using div [width]
size. Basically bootstrap have  fixed width and sizes[like div id="span 3"] 220 px;
But i need more than that 250 px; if i give span 3 is 250 px the boost trap indicate error

check my link and give a solution to  div alignment problem

http://design.jnj.net.in/bloom/
0
jnj_web_solutions
Asked:
jnj_web_solutions
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
Bootstrap uses 12 columns.  You are using version 2 and version 3 is the newest.  If you are just starting your project, I would switch.  Version 3 http://getbootstrap.com/ or version 2 http://getbootstrap.com/2.3.2/

First thing you should do is check your code in the validator. You have a lot of errors. Many are duplicate ID's.  Judging by your question, you are probably getting confused on how to use an ID vs CLASS.  First look here:
http://validator.w3.org/check?uri=http%3A%2F%2Fdesign.jnj.net.in%2Fbloom%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

The coding errors shown above matters in order to make your site behave the way you expect.  In your question you show, div id="span 3".  That should be a class div class="span3"

For the code, if you look on their example for version 2 http://getbootstrap.com/2.3.2/scaffolding.html you want to use the class=span throughout your code. I don't see where you have done that in your own code.  You only have bootstrap span classes in a couple of places.  

The example below is in percentages because it uses the class row-fluid.  If you don't use row-fluid, then you will be  using fixed widths.  
<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

Open in new window


I did find bootstrap2 a little confusing, if you go to version3, the classes are set up differently but I like the site up much better.

I hope this helps.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now