The rows come out of the jumbotron
0
I'm a bit new using Bootstrap and I'm having a problem with the jumbotron, div class row surpasses the left edge of the jumbotron
This is a sample of how i'm doing it
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>why the text exceeds the edge of the jumbotron?
what am i doing wrong?
Edit: codepen to see the problem in diferent resolution
Thanks
css html5 twitter-bootstrap layout bootstrap-4
asked Nov 12 at 12:40
Juan Salvador Portugal
3702317
add a comment |
0
I'm a bit new using Bootstrap and I'm having a problem with the jumbotron, div class row surpasses the left edge of the jumbotron
This is a sample of how i'm doing it
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>why the text exceeds the edge of the jumbotron?
what am i doing wrong?
Edit: codepen to see the problem in diferent resolution
Thanks
css html5 twitter-bootstrap layout bootstrap-4
asked Nov 12 at 12:40
Juan Salvador Portugal
3702317
it's because of.rowclass, it's added margin left and right -15px in css, just remove the.rowclass
– Manish Patel
Nov 12 at 12:42
@ManishPatel hi, thanks, i know the problem its caused because of row class, the thing is the layout of my jumbotron are a little complex so i need that functionality did exist some way to use it?
– Juan Salvador Portugal
Nov 12 at 12:44
it's important to add row class?
– Manish Patel
Nov 12 at 12:46
I'm using to use the layout, if i want to jump to new row should i replace it forcol-**-12instead?
– Juan Salvador Portugal
Nov 12 at 12:49
just removejumbotron-fluidclass
– Manish Patel
Nov 12 at 12:49
add a comment |
0
0
0
I'm a bit new using Bootstrap and I'm having a problem with the jumbotron, div class row surpasses the left edge of the jumbotron
This is a sample of how i'm doing it
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>why the text exceeds the edge of the jumbotron?
what am i doing wrong?
Edit: codepen to see the problem in diferent resolution
Thanks
css html5 twitter-bootstrap layout bootstrap-4
asked Nov 12 at 12:40
Juan Salvador Portugal
3702317
I'm a bit new using Bootstrap and I'm having a problem with the jumbotron, div class row surpasses the left edge of the jumbotron
This is a sample of how i'm doing it
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>why the text exceeds the edge of the jumbotron?
what am i doing wrong?
Edit: codepen to see the problem in diferent resolution
Thanks
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>css html5 twitter-bootstrap layout bootstrap-4
css html5 twitter-bootstrap layout bootstrap-4
asked Nov 12 at 12:40
Juan Salvador Portugal
3702317
asked Nov 12 at 12:40
Juan Salvador Portugal
3702317
asked Nov 12 at 12:40
Juan Salvador Portugal
3702317
asked Nov 12 at 12:40
Juan Salvador Portugal
3702317
asked Nov 12 at 12:40
Juan Salvador Portugal
3702317
3702317
it's because of.rowclass, it's added margin left and right -15px in css, just remove the.rowclass
– Manish Patel
Nov 12 at 12:42
@ManishPatel hi, thanks, i know the problem its caused because of row class, the thing is the layout of my jumbotron are a little complex so i need that functionality did exist some way to use it?
– Juan Salvador Portugal
Nov 12 at 12:44
it's important to add row class?
– Manish Patel
Nov 12 at 12:46
I'm using to use the layout, if i want to jump to new row should i replace it forcol-**-12instead?
– Juan Salvador Portugal
Nov 12 at 12:49
just removejumbotron-fluidclass
– Manish Patel
Nov 12 at 12:49
add a comment |
it's because of.rowclass, it's added margin left and right -15px in css, just remove the.rowclass
– Manish Patel
Nov 12 at 12:42
@ManishPatel hi, thanks, i know the problem its caused because of row class, the thing is the layout of my jumbotron are a little complex so i need that functionality did exist some way to use it?
– Juan Salvador Portugal
Nov 12 at 12:44
it's important to add row class?
– Manish Patel
Nov 12 at 12:46
I'm using to use the layout, if i want to jump to new row should i replace it forcol-**-12instead?
– Juan Salvador Portugal
Nov 12 at 12:49
just removejumbotron-fluidclass
– Manish Patel
Nov 12 at 12:49
it's because of
.row class, it's added margin left and right -15px in css, just remove the .row class– Manish Patel
Nov 12 at 12:42
it's because of
.row class, it's added margin left and right -15px in css, just remove the .row class– Manish Patel
Nov 12 at 12:42
@ManishPatel hi, thanks, i know the problem its caused because of row class, the thing is the layout of my jumbotron are a little complex so i need that functionality did exist some way to use it?
– Juan Salvador Portugal
Nov 12 at 12:44
@ManishPatel hi, thanks, i know the problem its caused because of row class, the thing is the layout of my jumbotron are a little complex so i need that functionality did exist some way to use it?
– Juan Salvador Portugal
Nov 12 at 12:44
it's important to add row class?
– Manish Patel
Nov 12 at 12:46
it's important to add row class?
– Manish Patel
Nov 12 at 12:46
I'm using to use the layout, if i want to jump to new row should i replace it for
col-**-12 instead?– Juan Salvador Portugal
Nov 12 at 12:49
I'm using to use the layout, if i want to jump to new row should i replace it for
col-**-12 instead?– Juan Salvador Portugal
Nov 12 at 12:49
just remove
jumbotron-fluid class– Manish Patel
Nov 12 at 12:49
just remove
jumbotron-fluid class– Manish Patel
Nov 12 at 12:49
add a comment |
1 Answer
1
active
oldest
votes
2
Just remove jumbotron-fluid class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>answered Nov 12 at 12:49
Manish Patel
3,1641721
Ty! that was exactly the solution, do you know whyjumbotron-fluidwas provoking the issue?
– Juan Salvador Portugal
Nov 12 at 12:53
1
In css padding right and left equal to 0 injumbotron-fluidclass.. so that it not getting space in left and right side..
– Manish Patel
Nov 12 at 12:55
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
);
);
draft saved
draft discarded
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%2f53262404%2fthe-rows-come-out-of-the-jumbotron%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
2
Just remove jumbotron-fluid class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>answered Nov 12 at 12:49
Manish Patel
3,1641721
Ty! that was exactly the solution, do you know whyjumbotron-fluidwas provoking the issue?
– Juan Salvador Portugal
Nov 12 at 12:53
1
In css padding right and left equal to 0 injumbotron-fluidclass.. so that it not getting space in left and right side..
– Manish Patel
Nov 12 at 12:55
add a comment |
2
Just remove jumbotron-fluid class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>answered Nov 12 at 12:49
Manish Patel
3,1641721
Ty! that was exactly the solution, do you know whyjumbotron-fluidwas provoking the issue?
– Juan Salvador Portugal
Nov 12 at 12:53
1
In css padding right and left equal to 0 injumbotron-fluidclass.. so that it not getting space in left and right side..
– Manish Patel
Nov 12 at 12:55
add a comment |
2
2
2
Just remove jumbotron-fluid class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>answered Nov 12 at 12:49
Manish Patel
3,1641721
Just remove jumbotron-fluid class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="jumbotron mt-2 pt-4">
<div class="row">
<h4>Simple Title</h4>
</div>
<div class="row">
<p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
</div>
<div class="row">
<p class="small">Last revision: 12-11-2018</p>
</div>
</div>
</div>answered Nov 12 at 12:49
Manish Patel
3,1641721
answered Nov 12 at 12:49
Manish Patel
3,1641721
answered Nov 12 at 12:49
Manish Patel
3,1641721
answered Nov 12 at 12:49
Manish Patel
3,1641721
3,1641721
Ty! that was exactly the solution, do you know whyjumbotron-fluidwas provoking the issue?
– Juan Salvador Portugal
Nov 12 at 12:53
1
In css padding right and left equal to 0 injumbotron-fluidclass.. so that it not getting space in left and right side..
– Manish Patel
Nov 12 at 12:55
add a comment |
Ty! that was exactly the solution, do you know whyjumbotron-fluidwas provoking the issue?
– Juan Salvador Portugal
Nov 12 at 12:53
1
In css padding right and left equal to 0 injumbotron-fluidclass.. so that it not getting space in left and right side..
– Manish Patel
Nov 12 at 12:55
Ty! that was exactly the solution, do you know why
jumbotron-fluid was provoking the issue?– Juan Salvador Portugal
Nov 12 at 12:53
Ty! that was exactly the solution, do you know why
jumbotron-fluid was provoking the issue?– Juan Salvador Portugal
Nov 12 at 12:53
1
1
In css padding right and left equal to 0 in
jumbotron-fluid class.. so that it not getting space in left and right side..– Manish Patel
Nov 12 at 12:55
In css padding right and left equal to 0 in
jumbotron-fluid class.. so that it not getting space in left and right side..– Manish Patel
Nov 12 at 12:55
add a comment |
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53262404%2fthe-rows-come-out-of-the-jumbotron%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
it's because of
.rowclass, it's added margin left and right -15px in css, just remove the.rowclass– Manish Patel
Nov 12 at 12:42
@ManishPatel hi, thanks, i know the problem its caused because of row class, the thing is the layout of my jumbotron are a little complex so i need that functionality did exist some way to use it?
– Juan Salvador Portugal
Nov 12 at 12:44
it's important to add row class?
– Manish Patel
Nov 12 at 12:46
I'm using to use the layout, if i want to jump to new row should i replace it for
col-**-12instead?– Juan Salvador Portugal
Nov 12 at 12:49
just remove
jumbotron-fluidclass– Manish Patel
Nov 12 at 12:49