Solved

Bootstrap

Posted on 2013-11-08
1
545 Views
Last Modified: 2013-11-10
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
Comment
Question by:jnj_web_solutions
1 Comment
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39633218
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
The viewer will learn how to dynamically set the form action using jQuery.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question