How to leave bootstrap columns under each other’s collars

Asked

Viewed 282 times

3

<style>
#a1 {
    background-color:#05466f;
    height:120px;
}
#a2 {

}
#a3 {

    height:303px;
    background-color:red;
    margin-top:57px;
}
#a4 {
    width:100%;
    height:51px;
    background-color:pink;
    line-height:51px;
    color:#757575;
    font-size:24px;

}


</style>

</head>
<div class='container-fluid'> 

    <div class='row justify-content-center align-items-center' id='a1'>
        <div class='col' id='a2'>
            <center><img src='http://pressdozero.esy.es/Wyden.png' style='width:191px; height:80px;'/> </center>
        </div>
    </div>

    <div class='row justify-content-center' id='a3'>
        <div class='col-8' id='a4'>
            Você é aluno de...
        </div>
        <div class='col-8' id='a4'>
            Você é aluno de...
        </div>
    </div>

</div>

Ta so:

How to leave the parts you are student of, one under the other coladinhas with a hint of margin?

inserir a descrição da imagem aqui

php html5 css3 twitter-bootstrap bootstrap-4

  • Anyone help pf, already tried to td

  • It’s answered friend, I hope it helps, be sure to read the link of the documentation I left

1 answer

6

It’s in the documentation. A row is a flex container by nature, that is, Bootstrap already sets the default to row with display:flex; then to align the contents of a row at the top you have to use the class align-content-start. Soon your div would be like this: <div class='row justify-content-center align-items-start' id='a3'>

You can see the official documentation here: https://getbootstrap.com/docs/4.3/utilities/flex/#align-content

See applied in your code as it would look

<!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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<style>
    #a1 {
        background-color: #05466f;
        height: 120px;
    }

    #a2 {}

    #a3 {

        height: 303px;
        background-color: red;
        margin-top: 57px;
    }

    #a4 {
        width: 100%;
        height: 51px;
        background-color: pink;
        line-height: 51px;
        color: #757575;
        font-size: 24px;

    }

</style>
</head>

<body>

    <div class='container-fluid'>

        <div class='row justify-content-center align-items-center' id='a1'>
            <div class='col' id='a2'>
                <center><img src='http://pressdozero.esy.es/Wyden.png' style='width:191px; height:80px;' /> </center>
            </div>
        </div>

        <div class='row justify-content-center align-content-start' id='a3'>
            <div class='col-8' id='a4'>
                Você é aluno de...
            </div>
            <div class='col-8' id='a4'>
                Você é aluno de...
            </div>
        </div>

    </div>

</body>

</html>

Browser other questions tagged php html5 css3 twitter-bootstrap bootstrap-4

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