Create three unequal Columns with Bootstrap grid layout



To create three unequal columns in Bootstrap, you can try to run the following code −

Example

Live Demo

<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script>       <script src = "/bootstrap/js/bootstrap.min.js"></script>    </head>    <body>       <div class = "container-fluid">          <h2>Bootstrap Grid Unequal Columns</h2>          <div class="row">             <div class = "col-sm-8" style = "background-color:green; color: white;">Column One</div>             <div class = "col-sm-2" style = "background-color:orange; color: white;">Column Two</div>             <div class = "col-sm-2" style = "background-color:gray; color: white;">Column Three</div>          </div>       </div>    </body> </html>
Updated on: 2020-06-12T19:12:12+05:30

551 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements