CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Wilf
Wilf

Reputation: 2315

How to center all divs in bootstrap 3

I need to center align every divs in Bootstrap3. To make it an accounting report. There're 3 level of divs - Header, subheader and detail list. Each level I use col-md-* to limit the width. I've tried text-align but it's not help.

Here's the code :

<div class="container">
<div class="header text-info">
        <h1>Heading</h1><br />
        <h2>Acc. Type</h2><br />
        <h3>Month</h3>
    </div>
<legend>Income</legend>
    <div class="acc-content row">
        <div class="col-md-12">
            <b>col-md-12</b>
            <span class="pull-right">#@#</span>
        </div>
    </div>
<legend>Expense</legend>
    <div class="acc-content row">
        <div class="col-md-12">
            <b>col-md-12</b>
            <span class="pull-right">#@#</span>
        </div><!-- /col-md-12 -->
        <div class="col-md-10">
            <b>col-md-10</b>
            <span class="pull-right">#@#</span>
        </div><!-- /col-md-10 -->
        <div class="col-md-8">
            <b>col-md-8</b>
            <span class="pull-right">#@#</span>
        </div><!-- /col-md-8 -->
    </div><!-- /acc-content -->
</div>

DEMO : http://fiddle.jshell.net/nobuts/mshwa1yt/1/show/ (please view in desktop).

I expect all the divs to center aligned like this : (red border is just a test)

Please be adviced.

enter image description here

Upvotes: 0

Views: 194

Answers (6)

Victor Sitnic
Victor Sitnic

Reputation: 380

in this example replace this 

     <div class="col-md-10">
        <b>col-md-10</b>
        <span class="pull-right">#@#</span>
    </div><!-- /col-md-10 -->
    <div class="col-md-8">
        <b>col-md-8</b>
        <span class="pull-right">#@#</span>
    </div><!-- /col-md-8 -->

with this

<div class="col-md-10 col-md-offset-1">
        <b>col-md-10</b>
        <span class="pull-right">#@#</span>
    </div><!-- /col-md-10 -->
    <div class="col-md-8 col-md-offset-2">
        <b>col-md-8</b>
        <span class="pull-right">#@#</span>
    </div><!-- /col-md-8 -->

add class col-md-offset-"number of cols" to col- divs

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

Add col-md-offset-*. For example:

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

and

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

You must also change your margin: 5px on .acc-content div[class*='col-md-'] to margin-top: 5px; margin-bottom: 5px because it overwrites Bootstrap's margin-left for col-md-offset-*.

Upvotes: 1

marswoody
marswoody

Reputation: 41

Bootstrap 3 has a mixin called center-block found in utilities.less.

First, add class center-block to elements that should be centered.

Then, if using Less, add to CSS:

.center-block {
.center-block();
}

If using plain CSS, add:

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Upvotes: 0

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10163

You need to add this to the divs:

.acc-content div[class*='col-md-'] {
    float: none;
    margin: 5px auto;
}

First one overwrites the float: left rule that's pretty much the opposite of center aligning it, the second one actually aligns it to center.

Upvotes: 0

Gho
Gho

Reputation: 568

all the col classes from bootstrap have the float left property. either remove them (not adivsed) and add margin:auto to the divs...or add more divs:

if u have a col-8 add col-2 left and col-2 right (offsets)...so you keep the grid system in place

Upvotes: 0

peterpeterson
peterpeterson

Reputation: 1325

using block-center class wrapping using row

Upvotes: 0

Related Questions