0

Não estou conseguindo fazer com que esses cards fiquem centralizados quando no dispositivo mobile, já me disseram para eu usar media queries, porém nesse sentido eu teria que criar uma nova classe para atribuir o código css, ou seja, não estaria tirando proveito do que o bootstrap oferece. Há algum nome de classe que me possibilite realizar esse tipo de coisa.

Segue o código:

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
<div class="container">

				<div class="row">

					<div class="col-sm-12 col-md-6 col-lg-4">
						<!--first card-->
						<div class="card mb-5 curadoria-card" style="width: 18rem;">

							<img src="img/festcasa/people-01.jpg" class="card-img-top" alt="...">

							<div class="card-body text-center">

								<h5 class="card-title"><strong style="color: #08979b; font-weight: bold">Nome da pessoa</strong><br/></h5>

								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

								<a href="#" class="btn btn-primary">Currículo em anexo</a>

							</div>

						</div>

					</div>
					<div class="col-sm-12 col-md-6 col-lg-4">
						<!--secondary card -->
						<div class="card mb-5" style="width: 18rem;">

							<img src="img/festcasa/people-02.png" class="card-img-top" alt="...">

							<div class="card-body text-center">

								<h5 class="card-title"><strong style="color: #08979b; font-weight: bold">Nome da pessoa</strong><br/></h5>

								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

								<a href="#" class="btn btn-primary">Currículo em anexo</a>

							</div>

						</div>

					</div>

					<div class="col-sm-12 col-md-6 col-lg-4">
						<!--third card-->
						<div class="card mb-5" style="width: 18rem;">

							<img src="img/festcasa/people-03.png" class="card-img-top" alt="...">

							<div class="card-body text-center">

								<h5 class="card-title"><strong style="color: #08979b; font-weight: bold">Nome da pessoa</strong><br/></h5>

								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

								<a href="#" class="btn btn-primary">Currículo em anexo</a>

							</div>

						</div>
					</div>

				</div>

			</div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

Notem que eles estão responsivos, porém não ficaram centralizados!

1 Resposta 1

2

Use a classe nativa .mx-auto nos cards:

Informações sobre classes de espaçamento você encontra na documentação oficial, em português.

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
<div class="container">

				<div class="row">

					<div class="col-sm-12 col-md-6 col-lg-4">
						<!--first card-->
						<div class="card mb-5 curadoria-card mx-auto" style="width: 18rem;">

							<img src="img/festcasa/people-01.jpg" class="card-img-top" alt="...">

							<div class="card-body text-center">

								<h5 class="card-title"><strong style="color: #08979b; font-weight: bold">Nome da pessoa</strong><br/></h5>

								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

								<a href="#" class="btn btn-primary">Currículo em anexo</a>

							</div>

						</div>

					</div>
					<div class="col-sm-12 col-md-6 col-lg-4">
						<!--secondary card -->
						<div class="card mb-5 mx-auto" style="width: 18rem;">

							<img src="img/festcasa/people-02.png" class="card-img-top" alt="...">

							<div class="card-body text-center">

								<h5 class="card-title"><strong style="color: #08979b; font-weight: bold">Nome da pessoa</strong><br/></h5>

								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

								<a href="#" class="btn btn-primary">Currículo em anexo</a>

							</div>

						</div>

					</div>

					<div class="col-sm-12 col-md-6 col-lg-4">
						<!--third card-->
						<div class="card mb-5 mx-auto" style="width: 18rem;">

							<img src="img/festcasa/people-03.png" class="card-img-top" alt="...">

							<div class="card-body text-center">

								<h5 class="card-title"><strong style="color: #08979b; font-weight: bold">Nome da pessoa</strong><br/></h5>

								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

								<a href="#" class="btn btn-primary">Currículo em anexo</a>

							</div>

						</div>
					</div>

				</div>

			</div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

2
  • era exatamente disso que estava precisando, já estou lendo a doc, porém as vezes leio por demanda, o que exatamente irei utilizar. Vou dar uma lida no que me mandou! 10/09/2019 às 14:06
  • 1
    Realmente não precisa ler toda a doc. Ele serve mais para referência quando precisa. Boa sorte!
    – Sam
    10/09/2019 às 14:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .