0

I have been looking over other questions posted on SO and tried the CSS however I cannot seem to align the "box" HxV within the container.

What is the best way to get it to display HxV responsive?

HTML:

<div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 center-block"> 
                box
            </div>
        </div>
    </div>
Jess McKenzie
  • 8,345
  • 27
  • 100
  • 170
  • Align it how? Centered completely? Check here http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ – Deryck Jul 24 '14 at 02:11
  • @Deryck Thanks but I am wanting it to be center of the browser window etc – Jess McKenzie Jul 24 '14 at 02:16
  • centered like a modal (fixed position, no scrolling) or centered just...centered – Deryck Jul 24 '14 at 02:24
  • @Deryck Fixed centered no scrolling – Jess McKenzie Jul 24 '14 at 02:26
  • OK well first try this: instead of `col-md-offset-2` use `col-md-offset-1` or `col-md-offset-3` and you can remove that `center-block` since the offset and column size will determine its placement – Deryck Jul 24 '14 at 02:43
  • If that doesn't work, see [this past answer](http://stackoverflow.com/questions/18153234/center-a-div-using-bootstrap-3-markup-or-css) and worst-case, [this is beautiful](http://www.minimit.com/demos/bootstrap-3-responsive-centered-columns) – Deryck Jul 24 '14 at 02:44

2 Answers2

0

Using .container centers and auto margins your grid to begin with, there should be no need for offsets:

<div class="container">
    <div class="row">
        <div class="col-xs-12"> 
            box
        </div>
    </div>
</div>

Note: .col-xs-12 will set your column to the full width after container margins from the XS size to the LG size.

Documentation: Bootstrap CSS Documentation under "Containers".

Wes King
  • 627
  • 4
  • 7
0

Create an class like .centred-col and write an rule like

.centred-col{ float: none; margin:auto;}add this after ur .col classes.

Vivek Vikranth
  • 3,265
  • 2
  • 21
  • 34