Align CSS Bootstrap Cards

Question

Align CSS Bootstrap Cards

Asked 5 years ago

Viewed 1,919 times

-1

Hello, I would like to align the cards in the center of my page Print:

Code:

*{
    font-family: "Ubuntu", sans-serif;
}

.logo{
    max-width: 27%;
}

.content-wrapper {
    max-width: 1250px;
    -webkit-box-shadow: 0 0 50px 5px rgba(0,0,0,0.15);
    box-shadow: 0 0 50px 5px rgba(0,0,0,0.15);
    position: relative;
    margin: -40px auto 0;
    background: #fff;
    z-index: 10;
    margin-bottom: 50px;
}

footer{
    background: #131313;
    height: 100px;
    display: flex;
    align-items: center;
}

footer p {
    color: #bdbdbd;
    font-size: 16px;
    margin-left: 100px;
    margin-top: 10px;
}

.card img {
    margin-top: 15px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 130px;
}

.card {
    margin-left: 20px;
    width: 400px;
    background: #fff;

}

.mid {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    
}

.presentation {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 60vh;
    background: url(../images/bg-1.jpg) top center;
}



.widget {
    background: white;
    margin: 25px 0px;
    width: 100%;
    text-align: center;
    border-radius: 4px;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="google" value="notranslate">
    <meta name="language" content="pt-br" />
    <meta http-equiv="Content-Language" content="pt-br" />
    <meta name="robots" content="index,follow,noodp,noydir">
    <meta name="revisit-after" content="1 week">
    <base href="/">
    <link rel="canonical" href="http://localhost/" />

    <title>Atlas Plugins - Início</title>
    <meta name="description" content="Atlas Plugins de Minecraft - Home">
    <meta name="keywords" content="Minecraft, Plugins de Minecraft, Plugins, Plugin, Servidor de Minecraft, Servidor, Plugins para servidor de minecraft, plugins para minecraft, pl para servidores de minecraft, pl minecraft, pl de factions, pl da redesky">
    <meta name="theme-color" content="#79C9F9">
    <link rel="shortcut icon" type="image/x-icon" href="http://localhost/app/content/assets/images/A.png">

    <meta property="og:title" content="Atlas Plugins" />
    <meta property="og:image" content="http://localhost/app/content/assets/images/logo.png" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="pt_BR" />
    <meta property="og:site_name" content="Atlas Plugins" />
    <meta property="og:description" content="Atlas Plugins de Minecraft - Home" />

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="Atlas Plugins" />
    <meta name="twitter:title" content="Atlas Plugins - Início" />
    <meta name="twitter:description" content="Atlas Plugins de Minecraft - Home" />
    <meta name="twitter:image" content="http://localhost/app/content/assets/images/logo.png" />

    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700|Ubuntu:300,400,500,700&subset=Latin" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="/app/content/assets/css/bootstrap/bootstrap-grid.min.css" rel="stylesheet" type="text/css">
    <link href="/app/content/assets/css/bootstrap/bootstrap-reboot.min.css" rel="stylesheet" type="text/css">
    <link href="/app/content/assets/css/normalize/normalize.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link href="/app/content/assets/css/waves/waves.min.css" rel="stylesheet" type="text/css">
    <link href="/app/content/assets/css/sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
    <link href="/app/content/assets/css/animate/animate.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <link href="/app/content/assets/css/atlas.css" rel="stylesheet" type="text/css">
    <script src="https://kit.fontawesome.com/4a0796fb5d.js" crossorigin="anonymous"></script>

</head>
<body>
<nav class="navbar menu navbar-expand-md">
    <div class="container">
        <a href="/" class="navbar-brand"><img src="/app/content/assets/images/A.png" class="logo" alt="Atlas Plugins - Logo"></a>
        <button class="navbar-toggler waves waves-effect waves-light" type="button" data-toggle="collapse" data-target="#menu"> <span class="ion-navicon"></span> </button>
        <div class="navbar-collapse collapse justify-content-stretch" id="menu">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"> <a class="nav-link" href="/"><i class="fas fa-home"></i> Início</a> </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="pluginsDropdown" data-toggle="dropdown" aria-expanded="false"> <i class="fas fa-plug"></i> Plugins </a>
                    <div class="dropdown-menu" aria-labelledby="pluginsDropdown"> <a class="dropdown-item" href="/loja">Pagos</a> <a class="dropdown-item" href="/loja/free">Gratuitos</a> </div>
                </li>
                <li class="nav-item"> </li>
                <li class="nav-item"> <a class="nav-link" href="/contato"><i class="fas fa-id-badge"></i> Contato</a> </li>
                <li class="nav-item private"> <a class="nav-link waves waves-effect waves-light" href="/client/login"><i class="fas fa-user"></i> Área do Cliente</a> </li>
            </ul>
        </div>
    </div>
</nav>

<header class="presentation">
    <div class="mid">
    <div class="row">
        
    <div class="col-md-3">
        <div class="card wow  zoomIn animated" style="visibility: visible; animation-name: zoomIn;"> <img src="/app/content/assets/images/upgrade.png" class="img-fluid" alt="Icone Indisponível">
            <br>
            <h4 class="text-center">Atualizações</h4>
            <p class="text-center">Todos os plugins recebem updates sempre que possível</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card wow  zoomIn animated" style="visibility: visible; animation-name: zoomIn;"> <img src="/app/content/assets/images/fast.png" class="img-fluid" alt="Icone Indisponível">
            <br>
            <h4 class="text-center">Agilidade</h4>
            <p class="text-center">Suporte, desenvolvimento e entrega rápida e no prazo estipulado.</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card wow  zoomIn animated" style="visibility: visible; animation-name: zoomIn;"> <img src="/app/content/assets/images/security.png" class="img-fluid" alt="Icone Indisponível">
            <br>
            <h4 class="text-center">Segurança</h4>
            <p class="text-center">Compra segura e plugins totalmente livre de malicia desenvolvidos em ambiente seguro.</p>
        </div>
    </div>
</div>
    </div>
</header>
<div class="content-wrapper">
<div class="blank">
    <div class="row">
        <div class="col-md-2"> <img src="https://minotar.net/avatar/gabriel_blink" class="img-fluid" alt="TintaDev - Ideia"> </div>
        <div class="col-md-10">
            <h3>Sobre Mim</h3>
            <p class="text-justify"> Olá, seja muito bem vindo ao Atlas Plugins!
                <br> Meu nome é Gabriel e sou desenvolvedor java desde 2014, 
                <br> Atualmente desenvolvo para muitos servidores de portes variados, e estou a disposição para melhorar seu servidor também.
                <br> Está esperando o que para conhecer mais sobre meu trabalho? Baixe meus <a href="/loja/free" target="_blank">plugins gratuitos</a> e aprove a qualidade.
                <br> Caso queira projetos para melhorar seu servidor ainda mais, veja alguns <a href="/loja" target="_blank">recursos pagos</a> e caso não encontre o que precisa entre em <a href="/contato" target="_blank">contato</a> e faça uma encomenda exclusiva como deseja. </p>
        </div>
    </div>
</div>
</div>
<footer>
   <div class="copyright">
      <p><i class="far fa-copyright"></i> Copyright Atlas Plugins 2020 - Todos os direitos reservados.</p>
   </div>
</footer>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/app/content/assets/js/jquery/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leonardosnt/mc-player-counter/1.0.0/dist/mc-player-counter.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>
<script src="/app/content/assets/js/popper/umd/popper.min.js"></script>
<script src="/app/content/assets/js/bootstrap/bootstrap.min.js"></script>
<script src="/app/content/assets/js/waves/waves.min.js"></script>
<script src="/app/content/assets/js/wow/wow.min.js"></script>
<script src="/app/content/assets/js/sweetalert/sweetalert.min.js"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>

3 answers

Browser other questions tagged css

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

by Sam • **79,597** points · Answer 1 · 2019-12-11T00:43:09+00:00

Put the class .justify-content-center in div.row where are the cards so that they are aligned to the center. A div.row is already flexbox and this class, native to Bootstrap 4, aligns the child elements to the center horizontally.

Remove the width: 400px; class .cards to make them responsive. They are already inside a responsive column, so you don’t need to set a fixed width for them otherwise one will be on top of the other if you reduce the width of the screen to a certain point before the breakpoint of .col-md-3.

by Juciano Victor • **143** points · Answer 2 · 2019-12-11T00:46:39+00:00

Use the flex display in the div you use as a container for your card and use "Justify-content: space-Around;". Following example.

I recommend you take a look at flex display and grid.

This code is pure css, I put it because you didn’t use the twitter bootstrap tag.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #eeeeee;
}

#container > div {
  width: 100px;
  height: 140px;
  border-radius: 10%;
  background-color: blue;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Teste de Página</title>
  </head>
  <body>
    <div id="container">
      <div></div>
      <div></div>
      <div></div>  
    </div>
  </body>
</html>

by João Gabriel Costa • 15 points · Answer 3 · 2019-12-11T00:57:16+00:00

I’m using the container but I put a margin-top: 100px; and according to the resolution the monitor looks different, how can I adjust this to a standard on all monitors? , follows examples in images of 2 prints from different monitors: