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 yesterday

asked yesterday

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 yesterday

asked yesterday

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 yesterday

asked yesterday

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 yesterday

asked yesterday

Yatin Pandit

New contributor

edited yesterday

asked yesterday

Yatin Pandit

New contributor

edited yesterday

asked yesterday

Yatin Pandit

New contributor

asked yesterday

Yatin Pandit

asked yesterday

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 yesterday

answered yesterday

DPS

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

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

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 yesterday

answered yesterday

DPS

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

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 yesterday

answered yesterday

DPS

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

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 yesterday

answered yesterday

DPS

456112

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 yesterday

answered yesterday

DPS

456112

edited yesterday

answered yesterday

DPS

456112

answered yesterday

DPS

456112

answered yesterday

DPS

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

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

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

Post as a guest

Name

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

搜尋此網誌

Myujth

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

Top Tejano songwriter Luis Silva dead of heart attack at 64

ReactJS Fetched API data displays live - need Data displayed static

Evgeni Malkin

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

Top Tejano songwriter Luis Silva dead of heart attack at 64

ReactJS Fetched API data displays live - need Data displayed static

Evgeni Malkin

1 Answer
1

1 Answer
1

1 Answer
1