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 19 hours ago

asked 20 hours ago

Yatin Pandit

New contributor

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 19 hours ago

asked 20 hours ago

Yatin Pandit

New contributor

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 19 hours ago

asked 20 hours ago

Yatin Pandit

New contributor

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 19 hours ago

asked 20 hours ago

Yatin Pandit

New contributor

edited 19 hours ago

asked 20 hours ago

Yatin Pandit

New contributor

edited 19 hours ago

asked 20 hours ago

Yatin Pandit

New contributor

asked 20 hours ago

Yatin Pandit

asked 20 hours ago

Yatin Pandit

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.

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 20 hours ago

answered 20 hours ago

DPS

452112

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
19 hours ago

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

}
});

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

draft saved

draft discarded

Sign up or log in

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

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

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 20 hours ago

answered 20 hours ago

DPS

452112

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
19 hours ago

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 20 hours ago

answered 20 hours ago

DPS

452112

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
19 hours ago

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 20 hours ago

answered 20 hours ago

DPS

452112

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 20 hours ago

answered 20 hours ago

DPS

452112

edited 20 hours ago

answered 20 hours ago

DPS

452112

answered 20 hours ago

DPS

452112

answered 20 hours ago

DPS

452112

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
19 hours ago

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
19 hours ago

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
19 hours ago

add a comment |

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.

draft saved

draft discarded

Sign up or log in

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

Post as a guest

Name

Sign up or log in

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

Sign up or log in

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

Sign up or log in

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

Name

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

搜尋此網誌

Nrthugu

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

Full-time equivalent

Bicuculline

さくらももこ

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

Full-time equivalent

Bicuculline

さくらももこ

1 Answer
1

1 Answer
1

1 Answer
1