Lines and columns in html

Question

Lines and columns in html

Navigation

#1 by (2 votes)

1

I can not get the columns to be on the same line, I'm using the code below, but the columns come out side by side, and I want it to stay on the same line.

    <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-4">
            <p>algo aqui 1</p>
        </div>
        <div class="col-4">
            <p>algo aqui 2</p>
        </div>
        <div class="col-4">
            <p>algo aqui 3</p>
        </div>
    </div>
</div>

</body>
</html>

html bootstrap-3

asked by anonymous 07.03.2018 / 16:33

1 answer

Find values in the page source code Change bgcolor according to class

score 2 · Accepted Answer

It's because you're using the Grid classes wrongly in <div>

It should not be col-4 should be like this: col-md-4 (where MD is, can be lg, md, sm, or xs)

Official Bootstrap3 Grid Documentation: link

That way it will work, see:

<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    
<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <p>algo aqui 1</p>
        </div>
        <div class="col-xs-4">
            <p>algo aqui 2</p>
        </div>
        <div class="col-xs-4">
            <p>algo aqui 3</p>
        </div>
    </div>
</div>

NOTE: In the example I used XS to always stay in 3 columns, even on small screens

If you are using Bootstrap 4 you can use the columns only as col-4 itself. In that case your problem would be with Bootstrap indexing on your page.

See the example in Bootstrap4

<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" />

<div class="container">
    <div class="row">
        <div class="col-4">
            <p>algo aqui 1</p>
        </div>
        <div class="col-4">
            <p>algo aqui 2</p>
        </div>
        <div class="col-4">
            <p>algo aqui 3</p>
        </div>
    </div>
</div>