Doubt about the new version of bootstrap

Asked

Viewed 261 times

1

Guys I’m having a question here about the new version of bootstrap that would be the 4 currently I’m enjoying quite saw that changed a lot more I would like to know if any of you know informs me if in this new version there is any class that makes one element be the same size as the other? I know that the version 3 had not there had to use a plugin jQuery to do what is called match height someone would tell me if with this new version of bootstrap we can do it without needing external files?

twitter-bootstrap

1 answer

2

There is a way yes and is in the official documentation, you can use the Cards Decks for this. Remember that now this is easier to do pq the Grid of Bootstrap 4 a based on the Flex-Box.

Documentation link: https://getbootstrap.com/docs/4.0/components/card/#card-decks

Us Utilities Bootstrap there are several other classes of Flex-Box that you can use inside the Grid https://getbootstrap.com/docs/4.0/utilities/flex/

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
/* estilo apenas para vc visualizar as 3 colunas em telas pequenas */
    .card-deck {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    background:silver;
    padding:1rem;
}
</style>
</head>
<body>
    <div class="card-deck">
        <div class="card">
          <img class="card-img-top" src="..." alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer 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">
          <img class="card-img-top" src="..." alt="Card image cap">
          <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 additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <div class="card">
          <img class="card-img-top" src="..." alt="Card image cap">
          <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 card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Browser other questions tagged twitter-bootstrap

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