Cards with smaller content breaking

Navigation
1

I'm using Bootstrap 4 to set up a page, and at the time of making some cards they're getting bigger or smaller than the others, even though they use the same col-sm-4 class. He is breaking because their content is less. my doubts are how to leave those cards of the same size regardless of their content, and also how to put h2 of them in the middle, since the text-center class only worked in p 

    <div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="box-shadow-full">
        <div class="row">
          <!-- icone -->
          <h2>1</h2>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat dolor fuga neque obcaecati reiciendis doloribus ipsa dicta itaque aperiam quasi vero, quo quam eum enim repellendus magnam iusto iure perferendis.,</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box-shadow-full">
        <div class="row">
          <!-- icone -->
          <h2>2</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, facere doloribus. Repudiandae iste deserunt odio ullam vitae voluptate nihil itaque ex culpa ab, quos blanditiis fugiat magni sequi debitis fuga?,</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box-shadow-full">
        <div class="row">
          <!-- icone -->
          <h2>3</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam suscipit reiciendis nesciunt tenetur excepturi accusantium maiores fugit, illo  possimus sunt nihil. Fugiat corporis quod id nemo aliquam?</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box-shadow-full">
        <div class="row">
          <!-- icone -->
          <h2>4</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ab debitis saepe ad dicta? Quis maxime nemo sapiente fugit, quo ratione ad perferendis quaerat, ipsa dolore, dolor molestiae iusto officia?.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box-shadow-full">
        <div class="row">
          <!-- icone -->
          <h2>5</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut tempore sunt natus ab perspiciatis ea beatae commodi optio voluptas porro vero aspernatur debitis, corrupti, libero eius doloremque quae repellendus. Alias!,</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box-shadow-full">
        <div class="row">
          <!-- icone -->
          <h2>6</h2>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qu.</p>
        </div>
      </div>
    </div>
  </div>

    
asked by anonymous 20.12.2018 / 23:01

2 answers

2

There is already natively in Bootstrap 4 a way to "align" the height of the cards, and it is with Card Group as you can see here: link

Thenyoucanuseothernativeclassessuchasborderandm-n°toadjustthespacingbetweenthemetc.

Anotherthingisthattext-centerworksperfectlyontheHn°tagasyoucanseeintheexamplebelow.AnotherthingisthatBSalsohasabox-shadowclassfromversion4.1asyoucanseehere link

Notice that there is no CSS in the example, foitudo with the same BS classes ... 

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

<div class="container">
	<div class="row">
		<div class="card-group col-12">
			<div class="card m-3 border shadow-sm">
				<img class="card-img-top" src="..." alt="Card image cap">
				<h2 class="text-center">meu h2</h2>
				<div class="card-body">
					<h5 class="card-title">Card title</h5>
					<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.
						This content is a little bit longer.</p>
					<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
				</div>
			</div>
			<div class="card m-3 border shadow-sm">
				<img class="card-img-top" src="..." alt="Card image cap">
				<h2 class="text-center">meu h2</h2>
				<div class="card-body">
					<h5 class="card-title">Card title</h5>
					<p class="card-text">This card has supporting text below as a natural lead-in to Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus similique quibusdam quasi repellendus consequatur tenetur molestias quo perferendis quam iure. additional content.</p>
					<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
				</div>
			</div>
			<div class="card m-3 border shadow-sm">
				<img class="card-img-top" src="..." alt="Card image cap">
				<h2 class="text-center">meu h2</h2>
				<div class="card-body">
					<h5 class="card-title">Card title</h5>
					<p class="card-text">This is a wider card with supporting text below as a natution.</p>
					<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
				</div>
			</div>
		</div>
	</div>
</div>
    
21.12.2018 / 00:08
0

Dude, I advise you not to get stuck in bootstraps all the time, and learn how to code your own CSS for when this type of problem comes up and you do not get plastered to do something.

No h2 just you do: 

h2 {
    text-align: center;
}

On the part of the cards, you can put it like this: 

.container > .row {
    display: flex;
    flex-wrap: wrap;
}
    
21.12.2018 / 01:31
Input spacing when fields are hidden How to set the percentage on top of the chart using ChartJS?