Centra divs in bootstrap

Question

Centra divs in bootstrap

Navigation

#1 by (2 votes)

0

I have the following structure:

<div class="container">
 <div class="row">
                            <div class="col-md-4 col-sm-6">
                            </div>
                            <div class="col-md-4 col-sm-6">
                            </div>
                            <div class="col-md-4 col-sm-6">
                            </div>
                        </div>
                    </div>

The problem is that desktop devices do not center the elements if they are less than 3. I would like them to focus even if only one element.

css3 bootstrap-3

asked by Raymond Medina 22.01.2018 в 15:59

source

1 answer

Transactions or queries prepared in PHP How to do an accountant recursively?

score 2 · Accepted Answer

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
.red {background:red;color:white;}
.blue {background:blue;color:white;}
.green {background:green;color:white;}
/** siempre recomiendo tener una clase con fondos resaltantes para visualizar mejor lo que uno quiere lograr o arreglar */
</style>
</head>
<body>
<div class="container">
 <div class="row m-auto">
                            <div class="col-md-4 col-sm-4 text-center m-auto red">
                            <p>Contenido</p>
                            </div>
                            <div class="col-md-4 col-sm-4 text-center m-auto green">
                            <p>Contenido 2</p>
                            </div>
                            <div class="col-md-4 col-sm-4 text-center m-auto blue">
                            <p>Contenido 3</p>
                            </div>
                        </div>
                    </div>
</body>
</html>

Another option is to use m-auto (margin: 0 auto):

   <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
    .red {background:red;color:white;}
    .blue {background:blue;color:white;}
    .green {background:green;color:white;}
    /** siempre recomiendo tener una clase con fondos resaltantes para visualizar mejor lo que uno quiere lograr o arreglar */
    </style>
    </head>
    <body>
    <div class="container">
      <div class="row">
       <div class="col-md-4 m-auto blue">
          Contenido
       </div>
       <div class="col-md-4 m-auto red">
         Contenido 2
       </div>
      </div>
    </div>
 </body>
 </html>

The other solution is the offset-md-x

   <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
    .red {background:red;color:white;}
    .blue {background:blue;color:white;}
    .green {background:green;color:white;}
    /** siempre recomiendo tener una clase con fondos resaltantes para visualizar mejor lo que uno quiere lograr o arreglar */
    </style>
    </head>
    <body>
    <div class="container">
      <div class="row">
       <div class="col-md-4 offset-md-2 blue">
          Contenido
       </div>
       <div class="col-md-4 red">
         Contenido 2
       </div>
      </div>
    </div>
 </body>
 </html>

Bootstrap has margins and paddings classes, as well as text centering.

Add those classes with colors and linkie the bootstrap 4.0 css to test it directly here.

Since bootstrap is responsive and when executed in the window that is approximately 600-700px long, it will be positioned differently.

More info about the "Grid System" of Bootstrap