Hot to set correct Margin/Padding with Bootstrap using Container and Columns
Using Bootstrap 4.1, I have spend hours to simply align some columns within a container. But I cannot seem to get the margins and paddings right:
On large screens I want a 2x3 grid, with items boxed and a "frame" around all of the items. But the code posted below, however creates a huge gap (assumingly 2x 15px) between the two columns. How can I get rid of that space?!
Neither editing padding nor margins work.
See code snippet below:
.test-container{
border: solid red 1px;
padding: 1px;
margin: auto;
}
.item{
border: solid 1px black;
height: 70px;
margin: 1px;
}
.row{
padding: 0px;
}<div class="container-fluid border-top bg-white shadow">
<div class="col-sm-9 test-container">
<div class="row">
<div class="col-md-6">
<div class="item">Select Unit</div>
</div>
<div class="col-md-6">
<div class="item">Unit 1 / Unit 2</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Input:</div>
</div>
<div class="col-md-6">
<div class="item">Value_Input</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Output</div>
</div>
<div class="col-md-6">
<div class="item">The result is...</div>
</div>
</div>
</div>
</div>There must be a simple solution - but I have obviously no clue. Help is much appreciated.
* EDIT *
Just saw, that the code-snipped generates a 1x6 column. Obviously that is the final result I want on small screens. On large screens however I would like that 2x3 grid with no gap in between.
html css bootstrap-4
asked Nov 24 '18 at 22:59
MarcusMarcus
277
add a comment |
Using Bootstrap 4.1, I have spend hours to simply align some columns within a container. But I cannot seem to get the margins and paddings right:
On large screens I want a 2x3 grid, with items boxed and a "frame" around all of the items. But the code posted below, however creates a huge gap (assumingly 2x 15px) between the two columns. How can I get rid of that space?!
Neither editing padding nor margins work.
See code snippet below:
.test-container{
border: solid red 1px;
padding: 1px;
margin: auto;
}
.item{
border: solid 1px black;
height: 70px;
margin: 1px;
}
.row{
padding: 0px;
}<div class="container-fluid border-top bg-white shadow">
<div class="col-sm-9 test-container">
<div class="row">
<div class="col-md-6">
<div class="item">Select Unit</div>
</div>
<div class="col-md-6">
<div class="item">Unit 1 / Unit 2</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Input:</div>
</div>
<div class="col-md-6">
<div class="item">Value_Input</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Output</div>
</div>
<div class="col-md-6">
<div class="item">The result is...</div>
</div>
</div>
</div>
</div>There must be a simple solution - but I have obviously no clue. Help is much appreciated.
* EDIT *
Just saw, that the code-snipped generates a 1x6 column. Obviously that is the final result I want on small screens. On large screens however I would like that 2x3 grid with no gap in between.
html css bootstrap-4
asked Nov 24 '18 at 22:59
MarcusMarcus
277
add a comment |
Using Bootstrap 4.1, I have spend hours to simply align some columns within a container. But I cannot seem to get the margins and paddings right:
On large screens I want a 2x3 grid, with items boxed and a "frame" around all of the items. But the code posted below, however creates a huge gap (assumingly 2x 15px) between the two columns. How can I get rid of that space?!
Neither editing padding nor margins work.
See code snippet below:
.test-container{
border: solid red 1px;
padding: 1px;
margin: auto;
}
.item{
border: solid 1px black;
height: 70px;
margin: 1px;
}
.row{
padding: 0px;
}<div class="container-fluid border-top bg-white shadow">
<div class="col-sm-9 test-container">
<div class="row">
<div class="col-md-6">
<div class="item">Select Unit</div>
</div>
<div class="col-md-6">
<div class="item">Unit 1 / Unit 2</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Input:</div>
</div>
<div class="col-md-6">
<div class="item">Value_Input</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Output</div>
</div>
<div class="col-md-6">
<div class="item">The result is...</div>
</div>
</div>
</div>
</div>There must be a simple solution - but I have obviously no clue. Help is much appreciated.
* EDIT *
Just saw, that the code-snipped generates a 1x6 column. Obviously that is the final result I want on small screens. On large screens however I would like that 2x3 grid with no gap in between.
html css bootstrap-4
asked Nov 24 '18 at 22:59
MarcusMarcus
277
Using Bootstrap 4.1, I have spend hours to simply align some columns within a container. But I cannot seem to get the margins and paddings right:
On large screens I want a 2x3 grid, with items boxed and a "frame" around all of the items. But the code posted below, however creates a huge gap (assumingly 2x 15px) between the two columns. How can I get rid of that space?!
Neither editing padding nor margins work.
See code snippet below:
.test-container{
border: solid red 1px;
padding: 1px;
margin: auto;
}
.item{
border: solid 1px black;
height: 70px;
margin: 1px;
}
.row{
padding: 0px;
}<div class="container-fluid border-top bg-white shadow">
<div class="col-sm-9 test-container">
<div class="row">
<div class="col-md-6">
<div class="item">Select Unit</div>
</div>
<div class="col-md-6">
<div class="item">Unit 1 / Unit 2</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Input:</div>
</div>
<div class="col-md-6">
<div class="item">Value_Input</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Output</div>
</div>
<div class="col-md-6">
<div class="item">The result is...</div>
</div>
</div>
</div>
</div>There must be a simple solution - but I have obviously no clue. Help is much appreciated.
* EDIT *
Just saw, that the code-snipped generates a 1x6 column. Obviously that is the final result I want on small screens. On large screens however I would like that 2x3 grid with no gap in between.
.test-container{
border: solid red 1px;
padding: 1px;
margin: auto;
}
.item{
border: solid 1px black;
height: 70px;
margin: 1px;
}
.row{
padding: 0px;
}<div class="container-fluid border-top bg-white shadow">
<div class="col-sm-9 test-container">
<div class="row">
<div class="col-md-6">
<div class="item">Select Unit</div>
</div>
<div class="col-md-6">
<div class="item">Unit 1 / Unit 2</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Input:</div>
</div>
<div class="col-md-6">
<div class="item">Value_Input</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Output</div>
</div>
<div class="col-md-6">
<div class="item">The result is...</div>
</div>
</div>
</div>
</div>.test-container{
border: solid red 1px;
padding: 1px;
margin: auto;
}
.item{
border: solid 1px black;
height: 70px;
margin: 1px;
}
.row{
padding: 0px;
}<div class="container-fluid border-top bg-white shadow">
<div class="col-sm-9 test-container">
<div class="row">
<div class="col-md-6">
<div class="item">Select Unit</div>
</div>
<div class="col-md-6">
<div class="item">Unit 1 / Unit 2</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Input:</div>
</div>
<div class="col-md-6">
<div class="item">Value_Input</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Output</div>
</div>
<div class="col-md-6">
<div class="item">The result is...</div>
</div>
</div>
</div>
</div>html css bootstrap-4
html css bootstrap-4
asked Nov 24 '18 at 22:59
MarcusMarcus
277
asked Nov 24 '18 at 22:59
MarcusMarcus
277
asked Nov 24 '18 at 22:59
MarcusMarcus
277
asked Nov 24 '18 at 22:59
MarcusMarcus
277
asked Nov 24 '18 at 22:59
MarcusMarcus
277
277
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Your html is fine. Columns in bootstrap have padding on the left and right of 15px by default and rows have padding on the left and right of -15px to counter this on the edge of the row. To get the result you desire, you need the following css:
.row{
padding: 0 15px;
}
.col-md-6 {
padding: 0;
}
This removes the padding on the columns in order to get rid of the gap between the columns and instead puts padding of 15px on each row in order to squeeze the columns into the test container that you made.
answered Nov 24 '18 at 23:42
Adam BAdam B
808
Jeez - I knew the solution would be simple, yet I couldn't find the answer. Thanks - works like a charm!
– Marcus
Nov 25 '18 at 5:58
No problem, glad I could help.
– Adam B
Nov 25 '18 at 9:44
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',
autoActivateHeartbeat: false,
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53463110%2fhot-to-set-correct-margin-padding-with-bootstrap-using-container-and-columns%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your html is fine. Columns in bootstrap have padding on the left and right of 15px by default and rows have padding on the left and right of -15px to counter this on the edge of the row. To get the result you desire, you need the following css:
.row{
padding: 0 15px;
}
.col-md-6 {
padding: 0;
}
This removes the padding on the columns in order to get rid of the gap between the columns and instead puts padding of 15px on each row in order to squeeze the columns into the test container that you made.
answered Nov 24 '18 at 23:42
Adam BAdam B
808
Jeez - I knew the solution would be simple, yet I couldn't find the answer. Thanks - works like a charm!
– Marcus
Nov 25 '18 at 5:58
No problem, glad I could help.
– Adam B
Nov 25 '18 at 9:44
add a comment |
Your html is fine. Columns in bootstrap have padding on the left and right of 15px by default and rows have padding on the left and right of -15px to counter this on the edge of the row. To get the result you desire, you need the following css:
.row{
padding: 0 15px;
}
.col-md-6 {
padding: 0;
}
This removes the padding on the columns in order to get rid of the gap between the columns and instead puts padding of 15px on each row in order to squeeze the columns into the test container that you made.
answered Nov 24 '18 at 23:42
Adam BAdam B
808
Jeez - I knew the solution would be simple, yet I couldn't find the answer. Thanks - works like a charm!
– Marcus
Nov 25 '18 at 5:58
No problem, glad I could help.
– Adam B
Nov 25 '18 at 9:44
add a comment |
Your html is fine. Columns in bootstrap have padding on the left and right of 15px by default and rows have padding on the left and right of -15px to counter this on the edge of the row. To get the result you desire, you need the following css:
.row{
padding: 0 15px;
}
.col-md-6 {
padding: 0;
}
This removes the padding on the columns in order to get rid of the gap between the columns and instead puts padding of 15px on each row in order to squeeze the columns into the test container that you made.
answered Nov 24 '18 at 23:42
Adam BAdam B
808
Your html is fine. Columns in bootstrap have padding on the left and right of 15px by default and rows have padding on the left and right of -15px to counter this on the edge of the row. To get the result you desire, you need the following css:
.row{
padding: 0 15px;
}
.col-md-6 {
padding: 0;
}
This removes the padding on the columns in order to get rid of the gap between the columns and instead puts padding of 15px on each row in order to squeeze the columns into the test container that you made.
answered Nov 24 '18 at 23:42
Adam BAdam B
808
answered Nov 24 '18 at 23:42
Adam BAdam B
808
answered Nov 24 '18 at 23:42
Adam BAdam B
808
answered Nov 24 '18 at 23:42
Adam BAdam B
808
808
Jeez - I knew the solution would be simple, yet I couldn't find the answer. Thanks - works like a charm!
– Marcus
Nov 25 '18 at 5:58
No problem, glad I could help.
– Adam B
Nov 25 '18 at 9:44
add a comment |
Jeez - I knew the solution would be simple, yet I couldn't find the answer. Thanks - works like a charm!
– Marcus
Nov 25 '18 at 5:58
No problem, glad I could help.
– Adam B
Nov 25 '18 at 9:44
Jeez - I knew the solution would be simple, yet I couldn't find the answer. Thanks - works like a charm!
– Marcus
Nov 25 '18 at 5:58
Jeez - I knew the solution would be simple, yet I couldn't find the answer. Thanks - works like a charm!
– Marcus
Nov 25 '18 at 5:58
No problem, glad I could help.
– Adam B
Nov 25 '18 at 9:44
No problem, glad I could help.
– Adam B
Nov 25 '18 at 9:44
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53463110%2fhot-to-set-correct-margin-padding-with-bootstrap-using-container-and-columns%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
