Why is this Bootstrap col removing white space?2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceHow do I remove the space between inline-block elements?Why does HTML think “chucknorris” is a color?How to make Twitter Bootstrap menu dropdown on hover rather than clickCenter a column using Twitter Bootstrap 3How do I add spacing between columns in Bootstrap?How can I make Bootstrap columns all the same height?What is sr-only in Bootstrap 3?What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?vertical-align with Bootstrap 3
Recursively updating the MLE as new observations stream in
How do researchers send unsolicited emails asking for feedback on their works?
What will the Frenchman say?
Determine voltage drop over 10G resistors with cheap multimeter
What are the rules for concealing thieves' tools (or items in general)?
Was World War I a war of liberals against authoritarians?
If I cast the Enlarge/Reduce spell on an arrow, what weapon could it count as?
Could any one tell what PN is this Chip? Thanks~
Nested Dynamic SOQL Query
label a part of commutative diagram
Animating wave motion in water
Why is indicated airspeed rather than ground speed used during the takeoff roll?
Have the tides ever turned twice on any open problem?
PTIJ: Which Dr. Seuss books should one obtain?
Is xar preinstalled on macOS?
Does fire aspect on a sword, destroy mob drops?
Are hand made posters acceptable in Academia?
How do you justify more code being written by following clean code practices?
Why didn’t Eve recognize the little cockroach as a living organism?
Pre-Employment Background Check With Consent For Future Checks
Did Nintendo change its mind about 68000 SNES?
Why is there so much iron?
Hackerrank All Women's Codesprint 2019: Name the Product
What (if any) is the reason to buy in small local stores?
Why is this Bootstrap col removing white space?
2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceHow do I remove the space between inline-block elements?Why does HTML think “chucknorris” is a color?How to make Twitter Bootstrap menu dropdown on hover rather than clickCenter a column using Twitter Bootstrap 3How do I add spacing between columns in Bootstrap?How can I make Bootstrap columns all the same height?What is sr-only in Bootstrap 3?What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?vertical-align with Bootstrap 3
I am trying to design a profile page ui, I want the profile name next to the avatar. I am using bootstrap's grid system but getting white space in between each column.
This is the link:
https://studentvend.co.uk/profile/test for those who want to see the source code.
html css twitter-bootstrap multiple-columns
edited Mar 7 at 5:01
Jodast
1
asked Mar 6 at 23:09
Christopher PantelliChristopher Pantelli
142
add a comment |
I am trying to design a profile page ui, I want the profile name next to the avatar. I am using bootstrap's grid system but getting white space in between each column.
This is the link:
https://studentvend.co.uk/profile/test for those who want to see the source code.
html css twitter-bootstrap multiple-columns
edited Mar 7 at 5:01
Jodast
1
asked Mar 6 at 23:09
Christopher PantelliChristopher Pantelli
142
1
Please show code here directly, instead of only linking it.
– Yunnosch
Mar 7 at 5:01
add a comment |
I am trying to design a profile page ui, I want the profile name next to the avatar. I am using bootstrap's grid system but getting white space in between each column.
This is the link:
https://studentvend.co.uk/profile/test for those who want to see the source code.
html css twitter-bootstrap multiple-columns
edited Mar 7 at 5:01
Jodast
1
asked Mar 6 at 23:09
Christopher PantelliChristopher Pantelli
142
I am trying to design a profile page ui, I want the profile name next to the avatar. I am using bootstrap's grid system but getting white space in between each column.
This is the link:
https://studentvend.co.uk/profile/test for those who want to see the source code.
html css twitter-bootstrap multiple-columns
html css twitter-bootstrap multiple-columns
edited Mar 7 at 5:01
Jodast
1
asked Mar 6 at 23:09
Christopher PantelliChristopher Pantelli
142
edited Mar 7 at 5:01
Jodast
1
asked Mar 6 at 23:09
Christopher PantelliChristopher Pantelli
142
edited Mar 7 at 5:01
Jodast
1
edited Mar 7 at 5:01
Jodast
1
edited Mar 7 at 5:01
Jodast
1
1
asked Mar 6 at 23:09
Christopher PantelliChristopher Pantelli
142
asked Mar 6 at 23:09
Christopher PantelliChristopher Pantelli
142
asked Mar 6 at 23:09
Christopher PantelliChristopher Pantelli
142
142
1
Please show code here directly, instead of only linking it.
– Yunnosch
Mar 7 at 5:01
add a comment |
1
Please show code here directly, instead of only linking it.
– Yunnosch
Mar 7 at 5:01
1
1
Please show code here directly, instead of only linking it.
– Yunnosch
Mar 7 at 5:01
Please show code here directly, instead of only linking it.
– Yunnosch
Mar 7 at 5:01
add a comment |
1 Answer
1
active
oldest
votes
It is normal because you are using a col of size 4 and col of size 6. So that basically means that it is going to take 40% of the card and then 60% of the card. It is not exact because Bootstrap is based on 12 columns.
I recommend you use a Media Object instead: https://getbootstrap.com/docs/4.0/layout/media-object/
<div class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
answered Mar 7 at 4:31
glrodaszglrodasz
225212
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%2f55033632%2fwhy-is-this-bootstrap-col-removing-white-space%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
It is normal because you are using a col of size 4 and col of size 6. So that basically means that it is going to take 40% of the card and then 60% of the card. It is not exact because Bootstrap is based on 12 columns.
I recommend you use a Media Object instead: https://getbootstrap.com/docs/4.0/layout/media-object/
<div class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
answered Mar 7 at 4:31
glrodaszglrodasz
225212
add a comment |
It is normal because you are using a col of size 4 and col of size 6. So that basically means that it is going to take 40% of the card and then 60% of the card. It is not exact because Bootstrap is based on 12 columns.
I recommend you use a Media Object instead: https://getbootstrap.com/docs/4.0/layout/media-object/
<div class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
answered Mar 7 at 4:31
glrodaszglrodasz
225212
add a comment |
It is normal because you are using a col of size 4 and col of size 6. So that basically means that it is going to take 40% of the card and then 60% of the card. It is not exact because Bootstrap is based on 12 columns.
I recommend you use a Media Object instead: https://getbootstrap.com/docs/4.0/layout/media-object/
<div class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
answered Mar 7 at 4:31
glrodaszglrodasz
225212
It is normal because you are using a col of size 4 and col of size 6. So that basically means that it is going to take 40% of the card and then 60% of the card. It is not exact because Bootstrap is based on 12 columns.
I recommend you use a Media Object instead: https://getbootstrap.com/docs/4.0/layout/media-object/
<div class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
answered Mar 7 at 4:31
glrodaszglrodasz
225212
answered Mar 7 at 4:31
glrodaszglrodasz
225212
answered Mar 7 at 4:31
glrodaszglrodasz
225212
answered Mar 7 at 4:31
glrodaszglrodasz
225212
225212
add a comment |
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%2f55033632%2fwhy-is-this-bootstrap-col-removing-white-space%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
1
Please show code here directly, instead of only linking it.
– Yunnosch
Mar 7 at 5:01