Center divs - Bootstrap

Question

Center divs - Bootstrap

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (0 votes)

3

Well, I split the content part into two divs, col-md-6, but they are not centralized relative to the site, although they are in the center, they are placed on the left side, leaving the right side a bit empty. Follow the divs code.

        <div class="content">

            <div class="container clearfix">
                                <div class="col-md-6 configdiv">
                                    <img src="/layout/images/imagem1.png" />
                                    <h5>TITULO 1</h5>
                                    <p>
                                    Oi, tudo bem? Oi, tudo bem? Oi, tudo bem?
                                    Oi, tudo bem?
                                    Oi, tudo bem?
                                    <p>
                                    <div>
                                        <img src="/layout/images/iconemail.png" />
                                        <img src="/layout/images/iconefb.png" />
                                        <img src="/layout/images/iconett.png" />
                                    </div>
                                </div>
                                <div class="col-md-6 configdiv">
                                    <img src="/layout/images/imagem2.png" />
                                    <h5>TITULO 2</h5>
                                    <p>
                                        Oi, tudo bem?
                                    <p>
                                    <div>
                                    <img src="/layout/images/iconemail.png" />
                                    <img src="/layout/images/iconefb.png" />
                                    <img src="/layout/images/iconett.png" />
                                    </div>
                                </div>
            </div>

        </div>

    </section><!-- #content end -->

And CSS has this:

    .configdiv {border: 1px solid #DDDDDD;
           margin-right: 28px;
           margin-bottom: 25px;
           padding: 10px;

Remembering these two col-md-6 divs stand side by side, I want you to be centered on the screen! Content of content:

        Content----------------------------------------------------*/
        #content {
    position: relative;
    overflow: hidden;
     background-color: #FFF;
    }

     #content p { line-height: 1.8; }

    .content-wrap {
    position: relative;
    padding: 80px 0;
    }

    #content .container { position: relative; }


       /* ----------------------------------------------------------------

html css twitter-bootstrap

asked by anonymous 16.07.2015 / 14:28

3 answers

3

I recommend not to tweak the column's later side of the column class (col-md- *) because it disrupts the grid structure.

You can center the texts using the class .text-center or col-md-offset-* to push the block on the left side, for example:

<div class="row">
    <div class="col-md-5 col-md-offset-1>
        ...
    </div>
    <div class="col-md-5>
        ...
    </div>
</div>

Or narrow the block more (center more):

<div class="row">
    <div class="col-md-4 col-md-offset-2>
        ...
    </div>
    <div class="col-md-4>
        ...
    </div>
</div>

Or so, a little gambiarra:

<div class="row">
    <div class="centraliza">
        <div class="col-xs-6">
            ...
        </div>
        <div class="col-xs-6">
            ...
        </div>
    </div>
</div>

.centraliza {
    width: 555px;
    margin: auto;
    height: 375px; //Se quer altura automática, é só deletar essa linha
}

I put div.centraliza in place div.container because it has almost same behavior but .centraliza you take advantage of any size.

16.07.2015 / 15:34

0

See if this code solves your problem. Note that before col-md-6 we have a col-md-12 div and if you want to center the content the text-align: center.

.configdiv 
{
  border: 1px solid #DDDDDD;
  //margin-right: 28px;
  //margin-bottom: 28px;
  padding: 10px;
}

//caso queira uma div md-6 lado a lado na tela margin-right e margin-bottom devem estar comentados ou retirados do seu código. Caso queira distancia entre eles use col-md-offset-1 2 ou 3...

<div class="content">
            <div class="col-md-12 container clearfix">
                <div class="row">
                    <div class="col-md-6 configdiv" style="text-align:center">
                        <img src="/layout/images/imagem1.png" />
                        <h5>TITULO 1</h5>
                        <p>
                            Oi, tudo bem? Oi, tudo bem? Oi, tudo bem?
                            Oi, tudo bem?
                            Oi, tudo bem?
                        <p>
                        <div>
                            <img src="/layout/images/iconemail.png" />
                            <img src="/layout/images/iconefb.png" />
                            <img src="/layout/images/iconett.png" />
                        </div>
                    </div>

                    <div class="col-md-6 configdiv" style="text-align:center">

                        <img src="/layout/images/imagem2.png" />
                        <h5>TITULO 2</h5>
                        <p>
                            Oi, tudo bem?
                        <p>
                        <div class="center-block">
                            <img src="/layout/images/iconemail.png" />
                            <img src="/layout/images/iconefb.png" />
                            <img src="/layout/images/iconett.png" />
                        </div>

                    </div>
                </div>                
            </div>
        </div>

27.07.2015 / 02:47

How to structure the hibernate Entity relationship annotations? Initial values in the nls function in R

score 4 · Accepted Answer

You could do this as follows:

<div class="container">
    <div class="col-md-6">
        <div class="configdiv">
            ...
        </div>
    </div>
    <div class="col-md-6">
        <div class="configdiv">
            ...
        </div>
    </div>
</div>

In this way the divs were spaced and centered next to each other.

Container: Centralize the divs.

Col-md-6: Cols create a padding of 15px for each side if you add a border along div of col they will stay pasted If you add in a div within col will work the way you want, I have not added the ROW class since it removes the padding added by col the divs.