Centralize Divs - Bootstrap

Asked

Viewed 75,169 times

3

Well, I divided the content part into two Ivs, col-Md-6, only they’re not centered in relation to the site, even though they’re in the center, they’re on the left side, leaving the right side a little 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 the CSS has this: 

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

Remember, these two Divs col-Md-6, are one side of the other, I want to be centered in relation to the screen! Content of the 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

  • You added a margin-right in the div that contains col-Md-6 this may be causing spacing, else, the class content has some css ?

  • I had already done the test, without the margin-right, the two Divs would be placed, so I added the margin right to the div that is on the left side of the screen, be a little separate from the right side.

  • I tried to put in another class the margin right, leaving only the div that is on the left side, even so, not the way I want! And in the content there’s this:

  • I added the content in the post.

  • Use relevant tags "doubt" please, each tag has a description for understanding. Note: bootstrap is a tag for a procedure (or series of procedures) when an application is started or a web request is made. For bootstrap "front-end framework" use twitter-bootstrap. Good luck with replies.

3 answers

4


You could do it this way:

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

This way the Ivfs were spaced and centered next to each other.

Container: Centralize the Ivs.

Col-Md-6: The cols create a padding of 15px for each side if you add one border next to div of col they will get stuck already if you add in a div within the col will work the way you want, I didn’t add the class ROW because she removes the padding added by col the Divs.

3

I recommend not touching margin laterias of the column class (col-Md-*) because it disturbs the grid structure.

You can center 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 further decrease the block (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
}

Placed div.centraliza in place div.container because it has almost even behavior but the .centraliza you enjoy with any size.

  • The Divs have been greatly reduced. Their size has to be W:555, H: 375, you can change that?

  • That’s another alternative, it’s more manual. div with margin:auto and fixed sizes that center. Gives a googlada with title centralizar DIV HTML, leaves bootstrap aside because the purpose of this Bootstrap framework is to structure and insert ready-made elements.

  • I updated the answer, from a look

  • There’s another object below, col-Md-12, you have to have a margin-bottom to avoid these two Divs, with this lower div. If I use fixed sizes, how is the responsive?...

  • Uses the Responsive design technique in CSS to change the class value .centraliza

0

See if this code solves your problem. Note that before col-Md-6 we have a div col-Md-12 and if you want to center the content 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>

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.