'Why does in Bootstrap 4 not put the col-4 in a row?

I can't figure out why the col-4 doesn't work to have all 3 items in a row

        <footer>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <h2><strong>Test</strong></h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="col-4">
                        <strong><b>Address</b></strong>
                        <p>
                            Test<br>
                            Test<br>
                            Test
                        </p>
                    </div>
                    <div class="col-4">
                        <strong><b>Contact</b></strong>
                        <p>
                            Tel: 123456<br>
                            Email: <a href="mailto:[email protected]">[email protected]</a>
                        </p>
                    </div>
                    <div class="col-4">
                        <strong><b>Legal</b></strong>
                        <p>
                            <a href="#" id="test">Test</a><br>
                            <a href="#" id="test1">Test</a><br>
                            <a href="#" id="test2">Test</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        © Copyright 2022
                    </div>
                </div>
            </div>
        </footer>

In the browser the whole thing looks like this

Click here

I use Bootstrap 4.0.0 and Firefox as browser. Please help me

Best regards

wediga

htmlcssbootstrap-4


Solution 1:[1]

Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.

Rows are wrappers for columns. rows align all columns in a row so you should always use .row class in outer div to wrap all col in a single row.

<div class="row">
            <div class="col-4"> </div>
              <div class="col-4"> </div>
              <div class="col-4"> </div>
          </div>

like this it will wrap all col-4 in a single row. so you need to add a div with class row. or just remove the div with col-12. here is the answer.

  1. with row above the col-4

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <footer>
      <div class="row">
        <div class="col-12">
          <div class="text-center">
            <h2><strong>Test</strong></h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-4">
                <strong><b>Address</b></strong>
                <p>
                  Test<br />
                  Test<br />
                  Test
                </p>
              </div>
              <div class="col-4">
                <strong><b>Contact</b></strong>
                <p>
                  Tel: 123456<br />
                  Email: <a href="mailto:[email protected]">[email protected]</a>
                </p>
              </div>
              <div class="col-4">
                <strong><b>Legal</b></strong>
                <p>
                  <a href="#" id="test">Test</a><br />
                  <a href="#" id="test1">Test</a><br />
                  <a href="#" id="test2">Test</a>
                </p>
              </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="text-center">© Copyright 2022</div>
        </div>
      </div>
    </footer>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

2 . removing col-12 from outer div.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <footer>
      <div class="row">
        <div class="col-12">
          <div class="text-center">
            <h2><strong>Test</strong></h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-4">
          <strong><b>Address</b></strong>
          <p>
            Test<br />
            Test<br />
            Test
          </p>
        </div>
        <div class="col-4">
          <strong><b>Contact</b></strong>
          <p>
            Tel: 123456<br />
            Email: <a href="mailto:[email protected]">[email protected]</a>
          </p>
        </div>
        <div class="col-4">
          <strong><b>Legal</b></strong>
          <p>
            <a href="#" id="test">Test</a><br />
            <a href="#" id="test1">Test</a><br />
            <a href="#" id="test2">Test</a>
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="text-center">© Copyright 2022</div>
        </div>
      </div>
    </footer>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 UNRIVALLEDKING

Related Questions