The rows come out of the jumbotron - css

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


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>

Related

Bootstrap 5 - problem changing column order

I'm upgrading to Bootstrap 5 and can't get the column re-ordering to behave how I want. I have 3 columns: a title, an image, and a paragraph of text. On larger screens I want the image on the left with the title on the right and the paragraph of text directly below the title. On smaller screens, I want the three columns stacked vertically in the order of title, image, paragraph of text. Using .order I can mostly get things working how I want, except on larger screens I can't get the paragraph of text to appear directly below the title, rather it appears under the title but below the image albeit on the right. How can I push this third column up beside the image to appear directly below the title?
Here's my code so far:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xxl-8 col-xl-8 col-lg-8 order-1 order-lg-2">
<div align="justify">
<p>title</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 order-2 order-lg-1">
<div><img src="image.jpg" width="200" height="300"></div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 order-3 order-lg-3 ms-auto">
<div align="justify">
<p>lorem ipsum</p>
</div>
</div>
</div>
</div>

Basically not possible with display flex and order only.
So either you need to:
Switch to grid
Display with 2 different blocks or lines using .d-{breakpoint}-{value}
Bootstrap 5 display doc
Different options, but the first is the most light:
Option 1 - Added only 1 line and some display class
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xxl-8 col-xl-8 col-lg-8 order-1 order-lg-2">
<div align="justify">
<p>title</p>
<!--------------------->
<!-- ADDED this line -->
<!--------------------->
<p class="d-none d-lg-block">lorem ipsum</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 order-2 order-lg-1">
<div><img src="image.jpg" width="200" height="300"></div>
</div>
<!--------------------- ADDED d-lg-none -------------------------->
<div class="col-xxl-8 col-xl-8 col-lg-8 order-3 d-lg-none ms-auto">
<div align="justify">
<p>lorem ipsum</p>
</div>
</div>
</div>
</div>
Option 2 - Added only 1 block and some display classes
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xxl-8 col-xl-8 col-lg-8 order-1 d-lg-none">
<div align="justify">
<p>title</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 order-2 order-lg-1">
<div><img src="image.jpg" width="200" height="300"></div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 order-3 d-lg-none ms-auto">
<div align="justify">
<p>lorem ipsum</p>
</div>
</div>
<!-- ADDED block -->
<div class="col-xxl-8 col-xl-8 col-lg-8 order-4 order-lg-2 d-none d-lg-block">
<div align="justify">
<p>title</p>
<p>lorem ipsum</p>
</div>
</div>
</div>
</div>
Option 3 - Display grid
#media (min-width: 992px){
.grid-temp-1{
grid-template: "a b" 0fr
"a c" 1fr
"a c" 1em / 33% 1fr;
}
.grid-temp-1 > div:nth-child(1) {
grid-area: b;
}
.grid-temp-1 > div:nth-child(2) {
grid-area: a;
}
.grid-temp-1 > div:nth-child(3) {
grid-area: c;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row d-lg-grid grid-temp-1">
<div class="">
<div align="justify">
<p>title</p>
</div>
</div>
<div class="">
<div><img src="image.jpg" width="200" height="300"></div>
</div>
<div class="ms-auto">
<div align="justify">
<p>lorem ipsum</p>
</div>
</div>
</div>
</div>

Go with two column layout. You can nest the heading and the paragraph inside one column.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xxl-8 col-xl-8 col-lg-8 order-1 order-lg-2">
<div align="justify">
<p>Hello World</p>
</div>
<div align="justify">
<p>Lorem ipsum</p>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 order-2 order-lg-1">
<div><img src="image.png" width="200" height="300"></div>
</div>
</div>
</div>

How do I make this bootstrap 4 full-span row responsive on small screens?

I've problems with this Bootstrap 4 full-span row definition:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
<div class="container my-5">
<div class="row">
<div class="col-lg-6 col-md-12">
<img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
</div>
<div class="col-lg-6 col-md-12 p-4">
<div style="position: absolute; bottom: 0;"> <!-- this breaks responsiveness -->
<h2>Together, we empower software development around the world.</h2>
<p class="lead py-2">Join our unique team of developers.</p>
</div>
</div>
</div>
</div>
</div>
It works properly WITHOUT the right column bottom alignment as in the following code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
<div class="container my-5">
<div class="row">
<div class="col-lg-6 col-md-12">
<img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
</div>
<div class="col-lg-6 col-md-12 p-4">
<h2>Together, we empower software development around the world.</h2>
<p class="lead py-2">Join our unique team of developers.</p>
</div>
</div>
</div>
</div>
How can I align the right column content bottom without breaking responsiveness? On my page the columns content overlap instead of splitting in two independent lines.

You may achieve your goal by adding align-self-end class to the second column.
Here's a live demo:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container my-5">
<div class="row mx-0">
<div class="col-lg-6 col-md-12">
<img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" />
</div>
<div class="col-lg-6 col-md-12 align-self-end">
<h2>Together, we empower software development around the world.</h2>
<p class="lead mb-0 pt-2">Join our unique team of developers.</p>
</div>
</div>
</div>
You may play with margins and paddings the way you see fit, I have removed the paddings and margins from the second column's content.
I have also removed some unnecessary tags as the task can be achieved without any extra markup. Some tags that were removed are actually wrong (only the closing tags is present so the tag is assumed a typo and I removed it).

Why float: right/ pull-right dont work in the below code?

<div class="col-xs-12" style="padding:0px">
<div class="col-xs-6 pull-left">
<div class="col-xs-12"><strong>Cooking Details</strong></div>
<div class="col-xs-12">
<span class="col-xs-6 pull-left">Ingredient</span>
<span class="pull-right col-xs-6 " style="padding-right:0px">Quantity</span>
</div>
<div>
<div>
Pull-right works fine for cooking details line, but for ingredient and quantity I am unable to format it with pull-right/float: right.
I am expecting quantity to be at the end of the div it is in. It is getting the 50% width but float:right is not working

Bootstrap 3: https://www.codeply.com/p/OSJMu17P9a
<div class="col-xs-12" style="padding:0px">
<div class="col-xs-12"><strong>Cooking Details</strong></div>
<div class="col-xs-6">
<span class="pull-left">Ingredient</span>
<span class="pull-right" style="padding-right:0px">Quantity</span>
</div>
</div>
Bootstrap 4: https://www.codeply.com/p/BrGeGl9mZi#
<div class="col-12" style="padding:0px">
<div class="col-12"><strong>Cooking Details</strong></div>
<div class="col-6">
<span class="float-left">Ingredient</span>
<span class="float-right" style="padding-right:0px">Quantity</span>
</div>
</div>

I'm not sure if you wanted something like this. When you add the col you have to use a div with row class a wrapper
#EDITED: WAY BETTER SOLUTION
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<div style="padding: 0px;">
<h4>
<strong>Cooking Details</strong>
</h4>
<div>
<span class="pull-left">Ingredient</span>
<span class="pull-right">Quantity</span>
</div>
</div>
Or Bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div>
<h4>
<strong>Cooking Details</strong>
</h4>
<div>
<span class="float-left">Ingredient</span>
<span class="float-right">Quantity</span>
</div>
</div>

bootstrap 4 grid system, first two columns get overlapped on mobile

With this, I want to achieve stacked columns on mobile devices, but I run on a problem here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row border-top border-bottom border-info">
<div class="col-lg-1 col-md-1 col-sm-1 col-12 my-1 sortable position-relative">
<a class="position-absolute" href="#">rb</a>
</div>
<div class="col-12 col-sm-11 col-md-11 col-lg-3 my-1 sortable position-relative">
<a class="position-absolute" href="#">folder</a>
</div>
<div class="col-6 col-sm-3 col-md-3 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">modtime</a>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 my-1 ">
img
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">width</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">height</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">filesize</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">linked</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1">
delete?
</div>
</div>
</div>
</body>
</html>
where you can see that the first two columns are overlapped without any particular reason. Why?
Thanks,
Dejan
UPDATE
as was mentioned down bellow, positioning was causing the problem, thanks all for contributing

You can use with col class only for that don't put extra CSS class on it. It will create a problem here is what u want without overlapping to each other simply use this code
<div class="container">
<div class="row border-top border-bottom border-info">
<div class="col">
rb
</div>
<div class="col">
folder
</div>
<div class="col">
modtime
</div>
<div class="col">
<p>
img
</p>
</div>
<div class="col">
width
</div>
<div class="col">
height
</div>
<div class="col">
filesize
</div>
<div class="col">
linked
</div>
<div class="col">
<p>
delete?
</p>
</div>
</div>
</div>
</body>
if u want on navbar then simply use this code
<nav class="navbar navbar-expand-md navbar-light bg-light">
Brand
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
rb
folder
modtime
img
width
height
<a href="#" class="nav-item nav-link" tabindex="-1">
filesize</a>
linked
delete?
</div>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row border-top border-bottom border-info">
<div class="col">
rb
</div>
<div class="col">
folder
</div>
<div class="col">
modtime
</div>
<div class="col">
<p>
img
</p>
</div>
<div class="col">
width
</div>
<div class="col">
height
</div>
<div class="col">
filesize
</div>
<div class="col">
linked
</div>
<div class="col">
<p>
delete?
</p>
</div>
</div>
<br><br>
<nav class="navbar navbar-expand-md navbar-light bg-light">
Brand
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
rb
folder
modtime
img
width
height
<a href="#" class="nav-item nav-link" tabindex="-1">
filesize</a>
linked
delete?
</div>
</div>
</nav>
</div>
</body>
</html>
Edit or preview Here
More about Bootstrap 4 Grid System Here
More about Bootstrap 4 Navbar Code and Example Here

Bootstrap image position in jumbotron

Seems like I can't get that image to be aligned with the Text.
I am trying to get that logo aligned with those two sentences.
Also, There was no style setting. Just the default Bootstrap.css file.
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<img src="../img/bg.png" style="float:left;width:150px;height:150px;margin-left:20px;margin-right:20px;margin-bottom:20px;">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>

You can do that with bootstrap media object, no need to use any css for that.
Check that link you can have a better idea
https://getbootstrap.com/docs/4.0/layout/media-object/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Media</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="media p-3">
<img src="https://i.imgur.com/v9f1nS2.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You can use something like this
<style>
.align{
width:150px;
height:150px;
margin-left:20px;
margin-right:20px;
margin-bottom:20px;
}
<style>
In HTML use this
<a class="align"><img src="../img/bg.png" alt=""></a>

Use the grid system: https://jsfiddle.net/wwWaldi/3xy4woq7/13/
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="row">
<div class="col-1"></div>
<div class="col-4 text-right">
<img src="../img/bg.png" id="myImg" >
</div>
<div class="col-6">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
<div class="col-1"></div>
</div>
</div>
</div>

Resources