Rows and columns in html

Asked

Viewed 1,148 times

1

I’m not getting 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 be 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

  • You imported the bootstrap styles on the page ?

  • I added the code below to import bootstrap <meta name="viewport" content="width=device-width,initial-Scale=1"/> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/slider.css">

  • Even with Bootstrap it won’t work with the col-4 class, it has to be col-size-number (where size is lg, Md, etc... and number is the number of columns you want to occupy, from 1 to 12). See my answer to better understand.

  • You ta using the bootstrap 4 or the 3 ? for the 3 you need to use the size indicator col-Md-3 or other size, in the 4 Voce can use only col-3

  • 1

    @Anthraxisbr on the question tag this Bootstrap-3, but includes that note of BS3 or BS4 in the answer to make it clearer.

  • @hugocsl didn’t pay attention to that, I positive the answer there

Show 1 more comment

1 answer

2


It’s because you’re using the Grid classes the wrong way in <div>

Shouldn’t col-4 it must be so: col-md-4 (where the MD is, it can be lg, Md, Sm, or Xs)

Bootstrap3 Grid Official Documentation: https://getbootstrap.com/docs/3.3/css/#grid

That way it’ll work out:

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

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

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

See 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>

  • It worked thanks I’m using Bootstrap 4 and had not indexed as in your last reply

Browser other questions tagged html bootstrap-3

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