Spaces between grids/columns in bootstrap4









up vote
0
down vote

favorite












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.



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






html css bootstrap-4







share|improve this question









New contributor




Yatin Pandit is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.























    up vote
    0
    down vote

    favorite












    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.



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






    html css bootstrap-4







    share|improve this question









    New contributor




    Yatin Pandit is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.





















      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      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.



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






      html css bootstrap-4







      share|improve this question









      New contributor




      Yatin Pandit is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      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.



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






      html css bootstrap-4




      html css bootstrap-4






      share|improve this question









      New contributor




      Yatin Pandit is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      Yatin Pandit is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited yesterday





















      New contributor




      Yatin Pandit is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked yesterday









      Yatin Pandit

      42




      42




      New contributor




      Yatin Pandit is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Yatin Pandit is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Yatin Pandit is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          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






          share|improve this answer






















          • 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
            yesterday










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );






          Yatin Pandit is a new contributor. Be nice, and check out our Code of Conduct.









           

          draft saved


          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237425%2fspaces-between-grids-columns-in-bootstrap4%23new-answer', 'question_page');

          );

          Post as a guest

















          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote













          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






          share|improve this answer






















          • 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
            yesterday














          up vote
          0
          down vote













          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






          share|improve this answer






















          • 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
            yesterday












          up vote
          0
          down vote










          up vote
          0
          down vote









          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






          share|improve this answer














          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







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited yesterday

























          answered yesterday









          DPS

          456112




          456112











          • 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
            yesterday
















          • 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
            yesterday















          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
          yesterday




          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
          yesterday










          Yatin Pandit is a new contributor. Be nice, and check out our Code of Conduct.









           

          draft saved


          draft discarded


















          Yatin Pandit is a new contributor. Be nice, and check out our Code of Conduct.












          Yatin Pandit is a new contributor. Be nice, and check out our Code of Conduct.











          Yatin Pandit is a new contributor. Be nice, and check out our Code of Conduct.













           


          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237425%2fspaces-between-grids-columns-in-bootstrap4%23new-answer', 'question_page');

          );

          Post as a guest

































































          -

          Popular posts from this blog

          Top Tejano songwriter Luis Silva dead of heart attack at 64

          Image
          Ramiro Burr's New Blog - to go back: www.ramiroburr.com From Latin rock to reggaeton, boleros to blues,Tex-Mex to Tejano, conjunto to corridos and beyond, Ramiro Burr has it covered. If you have a new CD release, a trivia question or are looking for tour info, post a message here or e-mail Ramiro directly at: musicreporter@gmail.com Top Tejano songwriter Luis Silva dead of heart attack at 64 By Ramiro Burr on October 23, 2008 8:40 AM | Permalink | Comments (12) | TrackBacks (0) UPDATE: Luis Silva Funeral Service details released Visitation 4-9 p.m. Saturday, Rosary service 6 p.m. Saturday at Porter Loring, 1101 McCullough Ave Funeral Service 10:30 a.m. Monday St. Anthony De Padua Catholic Church, Burial Service at Chapel Hills, 7735 Gibbs Sprawl Road. Porter Loring (210) 227-8221 Related New Flash: Irma Laura Lopez: long time record promoter killed in accident NewsFlash: 9:02 a.m. (New comments below) Luis Silva , one of the most well-known ...
          Read more

          政党

          Image
          政治主題的一部分 政党政治 政治光譜 左派 極左 中間偏左 中间派 中間偏左 激進中間 （ 英语 ： Radical centrism ） 中間偏右 右派 中間偏右 極右 政綱 極端 激进 （ 英语 ： Political radicalism ） 温和 （ 英语 ： Moderate ） 改良 混合 （ 英语 ： Syncretic politics ） 第三位置 保守 原教旨 反动 政党制度 无党制 （ 英语 ： Non-partisan democracy ） 一党制 一党优...
          Read more

          天津地下鉄3号線

          Image
          天津地下鉄3号線 3号線の電車 基本情報 通称 ？ 現況 営業中 国 中華人民共和国・ 中国 所在地 西青区・河西区・和平区・河北区・北辰区 路線網 天津地下鉄 起点 南駅 終点 小淀駅 駅数 26駅 路線番号 3 路線色 ■ 水色 開業 2012年10月1日 路線諸元 路線距離 34 km 営業キロ ？ 軌間 1,435 mm (標準軌) 線路数 複線 電化...
          Read more