Solution 1 :

Please take reference from below code snippet:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>

</head>
<body>

<h2>Three Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    Logo
  </div>
  <div class="column" style="background-color:#bbb;">
    Logo
  </div>
  <div class="column" style="background-color:#ccc;">
    Logo
  </div>
</div>

</body>
</html>

Solution 2 :

You could change the height property value to get the preferred column size you want:

.column {
        float: left;
        width: 33.33%;
        padding: 10px;
        height: 300px; /* Change this height property according to your need */
}

Solution 3 :

I changed the height to my preference but its not in the center.

.column {
        float: left;
        width: 33.33%;
        padding: 10px;
        height: 750px; /*Changed*/
}
This is how it looks now:[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/FTnpI.jpg


My idea is that to be in the center with height: 750px;

Problem :

I’m trying to create an account dashboard using Html Css(Bootstrap) and also php lavarel for backend.
My idea is that to create one row and three columns and put the content inside the three columns.
This is the html:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Pop</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>
            html{
                background: #01ACAD;
            }

            .container{
                background-color: white; 
                width: 95%;
                height: auto;
                position: relative;
                left: 40px;
                top: 15px;
            }

            .row{
                background:;
                padding: 22.875rem;
                margin: 6.188rem;
                margin-left: 134px;
                position: relative
            }

            .col-6 {
                float: left;
                width:30%;
                background: grey;
            }
            
        </style>

    </head>



    <body class="container">
       <div class="row">
            <div class="col-6 .col-md-4">
                <h2>LOGO</h2>
            </div>
            <div class="col-6 .col-md-4">
                <h2>LOGO</h2>
            </div>
            <div class="col-6 .col-md-4">
                <h2>LOGO</h2>
            </div>
       </div>
    </body>

</html>

This is how it looks like:enter image description here

This is what I want:enter image description here

Any response I would appreciate it.

Comments

Comment posted by Wh1T3h4Ck5

Try to set row to 100% width, remove padding/margins from it. Set row-6 width to 33.33% or to

Comment posted by Anshuman Yadav

Just add the required CSS properties and you are good to go. Change the IDs and classes according to your preference and you could always modify other required CSS properties according to your need. Let me know is you have any question. Thanks!

Comment posted by Anshuman Yadav

Thank you @M.Margjini. Please accept it as answer so that others could also get help from it.

Comment posted by Community

Please add further details to expand on your answer, such as working code or documentation citations.

By