0

I tried to center a Bootstrap form, actually having .form-inline. I wanted to center it and use Bootstrap classes, offset ones in this case.

I created a div which got .container as class, so within I marked down the proper <div class="row"> and then(this is when it comes to ask):

<div class="col-xs-10 col-xs-offset-1">

or

<div class="col-xs-8 col-xs-offset-2">

or

<div class="col-xs-6 col-xs-offset-3">

or

<div class="col-xs-4 col-xs-offset-4">

finally

<div class="col-xs-2 col-xs-offset-5">

I tried with all these and the one I wrote bold is which worked better, my question is, is my aproach ok? Is there any other class which states put this centered?

This is my whole markdown:

<div class="container">

    <h1>Solución de ecuaciones lineales.</h1>
    <h3>Elige un método y el número <i>n</i> de ecuaciones e incógnitas</h3>

    <div class="row">

        <div class="col-xs-4 col-xs-offset-4">

            <form class="form-inline" role="form" id="argumentos">

                <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default">
                    <input type="radio" name="options" id="btnGauss"> Gauss
                  </label>
                  <label class="btn btn-default">
                    <input type="radio" name="options" id="btnGaussJordan"> Gauss Jordan
                  </label>
                  <label class="btn btn-default">
                    <input type="radio" name="options" id="btnMatrizInversa"> Matriz Inversa
                  </label>
                </div>

                <input type="text" class="form-control input-mini" placeholder="n" id="input-n">

            </form>

        </div>
    </div>
</div>
diegoaguilar
  • 8,179
  • 14
  • 80
  • 129
  • To center elements, there is a Bootstrap class titled "class='text-center'", which you can use in the parent element to center the child elements. Take a look at the following accepted answer: http://stackoverflow.com/questions/10088706/twitter-bootstrap-how-to-center-elements-horizontally-or-vertically – dgp Apr 03 '14 at 04:27
  • @dgp That's not what's he's asking. – royhowie Apr 03 '14 at 04:29
  • @Luxelin his offset calc seems to result in centered content. Also the question title is asking for centering methods. Though, `text-center` will not solve the issue unless applied to the parent of an `inline-block` element in this case. – Fabrício Matté Apr 03 '14 at 04:34
  • Right - I was thinking along the lines of what Fabricio just mentioned. Anyway, I took a look at your answer @Luxelin, I see what you mean now. – dgp Apr 03 '14 at 04:41

1 Answers1

3

Yes, that's how it's intended to be done. The basic rule of thumb is that you set the class to col-lg-X col-lg-offset-((12-X)/2), if you want to center it. You will, however, need to either manually evaluate the arithmetic as you write the page or have it scripted in. You can't put ((X-12)/2) into the class of, say, a <div>.

Bootstrap uses the grid system. If you don't like how they have implemented it, you can always look into other grid-based systems, e.g., unsemantic.

royhowie
  • 11,075
  • 14
  • 50
  • 67
  • Aha, I get it. The main problem I see there is that for example, if I think about `X=2` in the case of my form elements it'll stack, I also have to *think/guess/calculate* that – diegoaguilar Apr 03 '14 at 04:37
  • You can align `
    `s with the `.*-offset-*` class. For example, if you have three `
    `s of width `col-lg-2`, you could put them next to one another with: `
    `.
     – royhowie Apr 03 '14 at 04:40
  • I don't understand that last, can you explain or extend your answer a bit, please :) – diegoaguilar Apr 03 '14 at 04:45
  • @diegoaguilar Basically, you can offset columns by whatever amount you want. Think of it like a grid where you slot different size pieces. If you put a `
    ` of size `.col-lg-2` first, you now only have 10 `col-lg-*`s left to work with. If you put a `.col-lg-11` div after the `*-2` one, it's going to get pushed to the next row because it can't fit. You just always need to think of the grid system in terms of blocks and whether you can fit all your blocks (are they less than 12).
     – royhowie Apr 03 '14 at 04:59