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.

edited Nov 10 at 9:57

asked Nov 10 at 8:56

Yatin Pandit

add a comment |

up vote
0
down vote

favorite

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.

edited Nov 10 at 9:57

asked Nov 10 at 8:56

Yatin Pandit

add a comment |

up vote
0
down vote

favorite

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.

edited Nov 10 at 9:57

asked Nov 10 at 8:56

Yatin Pandit

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.

html css bootstrap-4

edited Nov 10 at 9:57

asked Nov 10 at 8:56

Yatin Pandit

edited Nov 10 at 9:57

asked Nov 10 at 8:56

Yatin Pandit

edited Nov 10 at 9:57

asked Nov 10 at 8:56

Yatin Pandit

asked Nov 10 at 8:56

Yatin Pandit

asked Nov 10 at 8:56

Yatin Pandit

add a comment |

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

edited Nov 10 at 9:21

answered Nov 10 at 9:16

DPS

481112

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 at 9:58

add a comment |

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

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

edited Nov 10 at 9:21

answered Nov 10 at 9:16

DPS

481112

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 at 9:58

add a comment |

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

edited Nov 10 at 9:21

answered Nov 10 at 9:16

DPS

481112

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 at 9:58

add a comment |

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

edited Nov 10 at 9:21

answered Nov 10 at 9:16

DPS

481112

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 at 9:21

answered Nov 10 at 9:16

DPS

481112

edited Nov 10 at 9:21

answered Nov 10 at 9:16

DPS

481112

answered Nov 10 at 9:16

DPS

481112

answered Nov 10 at 9:16

DPS

481112

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 at 9:58

add a comment |

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 at 9:58

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 at 9:58

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk

Spaces between grids/columns in bootstrap4

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.

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.

1 Answer
1

Your Answer

Post as a guest

1 Answer
1

1 Answer
1

Post as a guest

Popular posts from this blog

Guess what letter conforming each word

Port of Spain

Run scheduled task as local user group (not BUILTIN)

Spaces between grids/columns in bootstrap4

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.

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.

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

1 Answer 1

1 Answer 1

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Guess what letter conforming each word

Port of Spain

Run scheduled task as local user group (not BUILTIN)

1 Answer
1

1 Answer
1

1 Answer
1