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

































































          -

          這個網誌中的熱門文章

          How to read a connectionString WITH PROVIDER in .NET Core?

          圖片
          6 I added .AddJsonFile("Connections.json", optional: true, reloadOnChange: true) in public Startup(IHostingEnvironment env) Connections.json contains: "ConnectionStrings": "DefaultConnection": "Server=(localdb)\mssqllocaldb;Database=DATABASE;Trusted_Connection=True;MultipleActiveResultSets=true", "COR-W81-101": "Data Source=DATASOURCE;Initial Catalog=P61_CAFM_Basic;User Id=USERID;Password=PASSWORD;Persist Security Info=False;MultipleActiveResultSets=False;Packet Size=4096;", "COR-W81-100": "Data Source=DATASOURCE;Initial Catalog=Post_PS;User Id=USERID;Password=PASSWORD;Persist Security Info=False;MultipleActiveResultSets=False;Packet Size=4096;", "MSEDGEWIN10": "Data Source=DATASOURCE; Initial Catalog=COR_Basic; Persist Security Info=False;Integrated Security=true;MultipleActiveResultSets=False;Packet Size=4096;Application Name="COR_Basic"", "server...
          閱讀完整內容

          Node.js Script on GitHub Pages or Amazon S3

          圖片
          0 I'm wondering if I can run a Node.js script in my Jekyll page from GitHub Pages or Amazon S3? I think it can't run on GitHub Pages since it doesn't support server side code. Not too sure. The code is below: var Airtable = require('airtable'); var base = new Airtable(apiKey: 'YOUR_API_KEY').base('appAnZVyYqusNPV5Q'); base('Invitee list').select( // Selecting the first 3 records in Complete list: maxRecords: 3, view: "Complete list" ).eachPage(function page(records, fetchNextPage) // This function (`page`) will get called for each page of records. records.forEach(function(record) console.log('Retrieved', record.get('Email')); ); // To fetch the next page of records, call `fetchNextPage`. // If there are more records, `page` will get called again. // If there are no more records, `done` will get called. fetchNextPage(); , function done(err) if (err) console.error(err); return; ); node.js ...
          閱讀完整內容

          Museum of Modern and Contemporary Art of Trento and Rovereto

          圖片
          Art museum in Rovereto TN, Italy Museum of Modern and Contemporary Art of Trento and Rovereto Museo d'arte moderna e contemporanea di Trento e Rovereto MART, Entrance Location Corso Angelo Bettini, 43, 38068 Rovereto TN, Italy Coordinates 45°53′38″N 11°02′42″E  /  45.8940°N 11.0450°E  / 45.8940; 11.0450 Coordinates: 45°53′38″N 11°02′42″E  /  45.8940°N 11.0450°E  / 45.8940; 11.0450 Type Art museum Director Gianfranco Maraniello Public transit access Trento train station. Taxis outside station. Website mart.trento.it The Museum of Modern and Contemporary Art of Trento and Rovereto (MART) ( Museo d'Arte Moderna e Contemporanea di Trento e Rovereto , in Italian) is a museum centre in the Italian province of Trento. The main site is in Rovereto, and contains mostly modern and contemporary artworks, including works from renowned Giorgio Morandi, Giorgio de...
          閱讀完整內容