Spaces between grids/columns in bootstrap4

Question

I am new to stack overflow and bootstrap. I am trying to to use two columns of size 2 and 10. But when i use it they overlap each other and when I change it to 3 and 9 there is too much space in between.

I tried searching in stack overflow and found this bootstrap columns overlapping

but as per this my column sum is equal to 12 and my every row as a column still it is over lapping.

Here is my HTML code:

<!doctype html> <html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
          crossorigin="anonymous">
    <link rel="stylesheet" href= "css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="customcss.css" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>
<body>
        <div class="container-fluid">
                 <div class="row">
                     <div class="col-lg-2">
                         <div id="sidebar" class="customdiv" style="background-color: green; ">
                             <ul>
                                 <li><h1 style="margin-left: -15px">project</h1></li>
                                 <li><h1 style="margin-left: 15px">part1</h1></li>
                             </ul>
                                 <hr style="background-color: gold; height:2px">
                                 <br>
                             <ul id="list-header">
                                 <li>project</li>
                                 <li>project</li>
                                 <li>project</li>
                                 <li>project
                                     <ul>
                                             <li>project</li>
                                             <li>project</li>
                                             <li>project</li>
                                         </ul>
                                 </li>
                                 <li>project
                                     <ul>
                                             <li>project</li>
                                             <li>project</li>
                                             <li>project</li>
                                             <li>project</li>
                                         </ul>
                                 </li>
                             </ul>
                         </div>
                     </div>

                     <div class="col-lg-10">
                         <div class="customdiv">
                             <img src="zoo.jpg" class="img-fluid">
                         </div>
                     </div>
                 </div>
             </div>
</body> 
</html>

and this is my CSS code

 html,body {
     height: 100%;
      }

 #sidebar{
     width: 250px;
     position: fixed;
     left: 250px;
     height:100%;
     margin-left: -250px;

 }


 #list-header li{
     padding-top: 10px;
     padding-bottom: 10px; }

 .customdiv li {
     display: block 
}

and here is my output

this is the output

and this is when i reduce the size of the window.

i tried using the method as per your suggestion but it shows too much white space in between.

DPS · Accepted Answer · 2018-11-10T09:21:45.547

0

You have to use column grids as below and also make sure to use "img-responsive" class which scales image nicely to the parent element

 <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
    //sidebar content
 </div>

<div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
    //image content
    <img class=".img-responsive" src="zoo.jpg" />
 </div>

I suggest you to check these references before developing.

Reference 1

Reference 2

image reference 1

edited Nov 10 '18 at 09:21

answered Nov 10 '18 at 09:16

DPS

943
11
22

thank you so much for this answer. Yep I tried the columns grids the same way you said. but it shows too much white space in between. I have uploaded the picture. Regarding the img-responsive is it available in bootstrap4? because I am not able to find it in the bootstrap.css – Yatin Pandit Nov 10 '18 at 09:58

Spaces between grids/columns in bootstrap4

i tried using the method as per your suggestion but it shows too much white space in between.

1 Answers1