How can I make 3 columns in full size in a row?

user_11169942 0
Viewed 91

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:wght@400;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.

bootstrap-4 css html
3 Answers

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>

user_167266270

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 */
}
user_167266270

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;
user_111699420
Related