I have a Bootstrap grid of two columns, one col has a responsive image, the second one has a heading, and some other elements. I'd like the content of the second column to always align vertically to the image. Here's the test case:
.align-this {
//?..
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-5 col-md-6 col-lg-7">
<img class="img-responsive" src="https://dummyimage.com/200x600/000/fff">
</div>
<div class="col-sm-7 col-md-6 col-lg-5">
<div class="align-this">
<h1 class="main-title">Title</h1>
<p>
Description text here. Lorem ipsum or whatever.
</p>
<div>
main cta
</div>
</div>
</div>
</div>
Try this code
.row{
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-5 col-md-6 col-lg-7">
<img class="img-responsive" src="https://dummyimage.com/200x600/000/fff">
</div>
<div class="col-sm-7 col-md-6 col-lg-5">
<div class="align-this">
<h1 class="main-title">Title</h1>
<p>
Description text here. Lorem ipsum or whatever.
</p>
<div>
main cta
</div>
</div>
</div>
</div>
have a link http://codepen.io/santoshkhalse/pen/oBjZyG
Related
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>
I have a simple footer with contact information that contains of three rows. The first two appear at the top, the last one should be placed on the very bottom of the container.
So what I did was using an absolute positioning:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row verybottom">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</footer>
The positioning works fine, but whatever I do - the last row is only a wide as the col above it. can someone help me align the content with the rows above?
You need to put a container inside to get it to work... and then introduce another .row since we want the col-md-XX classes to work
working snippet:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
padding-left: -15px;
}
.row {
border: 1px dotted red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row">
<div class="container verybottom">
<div class="row">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</div>
</div>
</footer>
I have a container with several rows. And in each row I have several columns.
I would like to increase the space between each column
<div class="main" style="margin-bottom:0px">
<div class="container">
<div class="row">
<div class="col-md-4 card ">
Colonne 1
</div>
<div class="col-md-4 card">
Colonne 2
</div>
<div class="col-md-4 card">
Colonne 3
</div>
</div>
</div>
<div>
instead usind col-x while you want the same width, you may only use col and they will span the row with an equal width and let you add horizontal margins .
example
.card {
border: solid;/* to show where they are*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main" style="margin-bottom:0px">
<div class="container">
<div class="row">
<div class="col card mx-1 ">
Colonne 1
</div>
<div class="col card mx-1">
Colonne 2
</div>
<div class="col card mx-1">
Colonne 3
</div>
</div>
</div>
<div>
ressources :
https://getbootstrap.com/docs/4.0/utilities/spacing/
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
which is the reason of the mx-1 class added
https://getbootstrap.com/docs/4.0/layout/grid/
where you can find col class which is used to auto-size the columns , if all box receive the col class, they should be of equal width.
<div class="container">
<div class="card-deck text-center mb-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">test</h5>
<hr class="w-50">
<p class="text-left ml-3 mt-3"></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">test</h5>
<hr class="w-50">
<p class="text-left ml-3 mt-3"></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">test</h5>
<hr class="w-50">
<p class="text-left ml-3 mt-3"></p>
</div>
</div>
</div>
</div>
I used this with cards, I think this what you're looking for.
Keep me updated! ;)
Use CSS margin property.
.card {
margin: 0px 10px;
}
Working example
.card {
margin: 0px 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="main" style="margin-bottom:0px">
<div class="container">
<div class="row">
<div class="col col-md-4 card ">
Colonne 1
</div>
<div class="col col-md-4 card">
Colonne 2
</div>
<div class="col col-md-4 card">
Colonne 3
</div>
</div>
</div>
<div>
Bootstrap columns have no space between.
Make another div inside by default column 4 has 15px padding which means if you make div inside it will leave space on both left and right side.
<div class="col-sm-4">
<div class="inner">
Your Content Here
</div>
</div>
How can I get the x positioned vertical middle when displaying on small devices (< 600px width)?
<div class="row">
<div class="col-sm-12">
<section class="panel panel-default panel-slider"><div class="panel-heading">
<h1 class="panel-title" style="font-size:18px">
Test with long description in title panel bla bla<a class="align-middle more pull-right" href="https://example.com" title="" data-toggle="tooltip" data-placement="right" data-original-title="more" ><i>x</i></a>
</h1>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8" style="margin-bottom: 10px;">
...
</div>
</div>
Currently it is:
Should be:
https://jsfiddle.net/9dtu4en1/
Thanks in advance!
Kind regards
Alex
I'd use flexbox on that h1 for a more fluid resizing, and remove align-middle & pull-right (to avoid floating which would make it's parent not consider child's height) from a:
External Fiddle to resize
Snippet:
h1 {
display: flex;
justify-content: space-between;
align-items: center;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12">
<section class="panel panel-default panel-slider">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:18px">Test with long description in title panel bla bla
<a class="more" href="https://example.com" title="" data-toggle="tooltip" data-placement="right" data-original-title="more"><i>x</i></a>
</h1>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8" style="margin-bottom: 10px;">
...
</div>
</div>
here's my markup:
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="/images/foo.jpg">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
which will look like this:
the problem however is - when reducing the browser width it will turn out like this:
the image will overflow its container although it should be responsive ..
any ideas what's wrong?
thanks
Wrap the red and grey divs in a DIV tag, not a link. Give the following style to your containing div:
.containing-div {display:block; overflow:auto;}
you are missing the parent class .container form bootstrap. look at bootstrap docs
.container {
border: 1px grey solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="///dummyimage.com/300x600">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
</div>