My problem is that the heights of rows / columns does not fit. The first column has the class col-sm-8 and the second the class col-sm-4
The second class col-sm-4 has another two rows, each with col-sm-12 classes.
I have looked for some Masonry similar jQuery Plugins but I want to stay at CSS. How can I solve this heights and keep responsivity?
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="padding-bottom:30px;">
<div class="col-sm-8">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/inteledison.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600"/>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/inteledison.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600"/>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/bare.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/esp8622.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
<div class="col-sm-4">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/raspb2b.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
<div class="col-sm-4">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/beaglebone.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
</div>
</div>
Related
I try to make a 3-column grid with images so that some text overlays these images. I found an example of the linear gradient for this purpose:
.card__content {
position: absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}
So in HTML I have the next:
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="1.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="2.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="3.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
</div>
</div>
</div>
</div>
</div>
But this gradient doesn't glue to the end of the image and climbs out to the right. And the thumbnail's border doesn't stretch for all length of the block, though without the gradient it did. Here is what it looks like now.
Image
Please help!
I have made a few changes:
.card__content {
position: absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
height: 100%;
display: flex;
align-items: center;
padding: 10px;
color: #fff;
}
.thumbnail {
display: inline-block;
border: 0;
}
.thumbnail img {
width: 100%;
max-width: 100%
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
</div>
</div>
</div>
</div>
</div>
In my angular 9 application i have a bootstrap card, In the card body
<div class="animated fadeIn"
style="margin-left: 2%;margin-right: 2%;margin-top: 2%;width: 80%;"
id="qgroup-div-g{{ei}}"
*ngFor="let g of this.stat?.MyQuestionGroup;let ei=index;">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<!-- <i class="fa fa-align-justify"></i> Combined All Table -->
<div class="row" style="position: relative;">
<div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
<h5 style="text-align: left;">
{{g?.QuestionGroupName}}
<button type="button"
class="btn btn-success mr-1"
style="position:absolute;right: 10px;top:5px;"
(click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed"
attr.aria-controls="qgroup-collapse-wrapper-g{{ei}}">
<i class="fa fa-align-justify"></i>
</button>
</h5>
</div>
</div>
</div>
<div [ngbCollapse]="isCollapsed" id="qgroup-collapse-wrapper-g{{ei}}">
<div class="card-body" style="border: 1px solid red">
<div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">
<!-- COLUMN #1 (ROW NUMBER COLUMN) -->
<div class="col-1" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
{{rnum + 1}}
</div>
<!-- COLUMN #2 ( TEXT COLUMN ) -->
<div class="col-6" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
<!-- Quality of the software application installed -->
{{q?.QuestionText}}
</div>
<!-- COLUMN #3 ( PROGRESS BAR DISPLAY COMPONENT ) -->
<div style="border:1px solid blue;"
id="qrow_pgr_{{rnum}}_g{{ei}}"
*ngIf="q?.FeedbackTypeId==1"
class="col-xs-auto">
<progress-display id="pgr_{{q?.QuestionId}}"
value='{{this.roughValue}}'
maxProgress="100"
checkedcolor="red"
uncheckedcolor="black"
size="40px"
readonly="false"
(rate)="onRate($event,'pgr_', q?.QuestionId, q?.FeedbackTypeId )">
</progress-display>
</div>
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12">
{{q?.DemoText}}
</div>
<br>
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12" style="border:1px solid black;">
<textarea id="txa_qrow_pgr_{{rnum}}_g{{ei}}"
rows="10"
cols="100"
*ngIf="q?.FeedbackTypeId==2"
class="col-md-12"
(input)="onInputAnswerChange($event.target.value,q?.QuestionId)"
></textarea>
</div>
<!-- </div> -->
</div>
<!-- ./ The core of the Suervey Question and stars -->
</div>
</div>
</div>
</div>
<!--/.col-->
</div>
</div>
<div id="dvFeedbackSubmit" class="col-md-12" style="border:0px solid black;text-align:center; margin-left: 2%;margin-right: 2%;">
<input type="button" id="btnSubmit" value="Submit" class="btn btn-success" (click)="submitFeeds()" />
</div>
what i'm trying to is to build the following layout on the bootstrap card ::
i marked columns i would want to format in to the layout with the following comments::
COLUMN #1 (ROW NUMBER COLUMN)
COLUMN #2 ( TEXT COLUMN )
COLUMN #3 (PROGRESS BAR DISPLAY COMPONENT )
Here is extraction of card body markup from the above complete markup ::
<div class="card-body" style="border: 1px solid red">
<div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">
<!-- COLUMN #1 (ROW NUMBER COLUMN) -->
<div class="col-1" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
{{rnum + 1}}
</div>
<!-- COLUMN #2 ( TEXT COLUMN ) -->
<div class="col-6" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
<!-- Quality of the software application installed -->
{{q?.QuestionText}}
</div>
<!-- COLUMN #3 ( PROGRESS BAR DISPLAY COMPONENT ) -->
<div style="border:1px solid blue;"
id="qrow_pgr_{{rnum}}_g{{ei}}"
*ngIf="q?.FeedbackTypeId==1"
class="col-xs-auto">
<progress-display id="pgr_{{q?.QuestionId}}"
value='{{this.roughValue}}'
maxProgress="100"
checkedcolor="red"
uncheckedcolor="black"
size="40px"
readonly="false"
(rate)="onRate($event,'pgr_', q?.QuestionId, q?.FeedbackTypeId )">
</progress-display>
</div>
</div>
</div>
But i cannot get the layout responsive and the three column layout remain centered. i would like the structure shown on the image to the responsive as well.
updated
1. How do i make following div expand to fit with card body
<div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">
How do i make the column "COLUMN #3 ( PROGRESS BAR DISPLAY COMPONENT )" expand to remaining width
also div with <div class="row justify-content-md-center" must be responsive where the whole row must be on the same line
I'm maybe not fully understanding.. But are you wanting the columns to drop down on smaller devices?
<div class="col-1">
<div class="col-7">
<div class="col-4">
You could just add bootstrap col classes for smaller breakpoints
Try like this
<div class="card">
<div class="card-body"><div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-7"></div>
<div class="col-sm-4"></div>
</div></div>
</div>
In mobile width:
Try like this
<div class="card">
<div class="card-body"><div class="row">
<div class="col-1"></div>
<div class="col-7"></div>
<div class="col-4"></div>
</div></div>
</div>
I'm not very good in CSS, and so I don't know how to solve my problem. I've a grid images (you can see at https://i.imgur.com/88yDcbN.png). As you can see the first image (I selected) has useless white space below.
How can I move the image below so that there are 50px difference?
Actually I use these classes for my box:
col-sm-6 col-md-4
I'm using bootstrap as you can see.
The other divs inside the col-sm-6 col-md-4 have the right height.
Thank you for your help!
Example box:
<div class="_00d7">
<div class="row">
<div class="col-sm-6 col-md-4">
<div data-id="11" data-score="4380" class="_4180">
<a class="eac1">
<img src="images/E8wfc3V4Azc.jpg">
</a>
<div class="_96ae">
Punteggio immagine: <b>4380</b>.
</div>
</div>
</div>
</div>
</div>
CSS:
._00d7 ._4180 {
padding: 0;
margin-bottom: 30px;
background-color: #fff;
border-radius: 4px;
border: none;
transition: 0.15s ease-in-out;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.0975);
}
._00d7 .eac1 img {
border-radius: 4px 4px 0 0;
vertical-align: middle;
border-style: none;
margin-right: auto;
margin-left: auto;
display: block;
max-width: 100%;
height: auto;
}
(sorry for classes names, I'm using react)
For that particular layout (a Mansonry-like layout) Bootstrap4 give you a solution: use Card columns: https://getbootstrap.com/docs/4.0/components/card/#card-columns.
I give you an example. This is only a start point, you can customize as you want.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="_00d7">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card-columns">
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/500">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/250">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/100">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Be careful: the images order is vertical:
1 4 7
2 5 8
3 6 9
I'm having trouble figuring out how to center an image vertically and horizontally. Essentially I have two rows of images, all have a width of 150 but heights vary.
CSS
.image-center {
display: inline-block;
vertical-align: middle;
position: relative;
}
HTML
<div class="row">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
If you're using Bootstrap 4 (it seems you are), you may use flex alignment classes like align-items-center justify-content-center
<div class="col d-flex align-items-center justify-content-center">
More info: https://getbootstrap.com/docs/4.1/layout/grid/#alignment
This CSS will be responsive for any devices. It will center horizontally and vertically.
.col {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div class="row imageCenterAlign topAlign">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row imageCenterAlign">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
css:
.imageCenterAlign{
display: flex;
justify-content: center;
align-items: center;
}
.topAlign{
top:50%;
}
The best way to accomplish this would be to use flexbox imho.
HTML:
<div class="group">
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x110/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
<img src="https://fakeimg.pl/150x80/?text=Hello" />
<img src="https://fakeimg.pl/150x70/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x115/?text=Hello" />
<img src="https://fakeimg.pl/150x90/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
</div>
CSS:
DIV.group {
display:flex;
flex-flow:row wrap;
justify-content:space-between;
align-items:center;
align-content:stretch;
}
I will recommend you to use the display:flex, you just need to create an horizontal class and a vertical class an assign it to the divs of the image depending of the orientation you want to give it.
It's easy and simple, I write you the snippet, you just need to change the margins, and I also changed the image.
div.horizontal {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
div.vertical {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 15px;
}
<div class="row horizontal">
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
</div>
<div class="row horizontal">
<div class="col vertical">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col vertical">
<img class="center-block " width="150" src="imagery/6.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
Hope it helps you.
don't know about bootstrap but if you use normal CSS
apply this class to the child container
position: absolute,
margin: auto,
top: 0,
right: 0,
bottom: 0,
left: 0,
So i have the below Layout created
This is the Code i used to create the layout
<div class="col-xs-12">
<h3 style="margin-top:50px">
Key Projects
</h3>
<div class="row">
<div class="col-lg-6 col-sm-12">
<img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-responsive ">
</div>
<div class="row col-lg-6 col-sm-12" >
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
</div>
</div>
</div>
Now my problem is when i go into chrome debugger and resize the screen i get the following
I taught having col-sm-12 in the div and the class="img-responsive" would make the smaller images stack neatly under the big image when the window is resized.
I have spent alot of time on the BootStrap site but i can't figure it out. Can anyone help explain what i need to do?
Please, have a look. I've replaced all the img-responsive on img-fluid it works as for me. Moreover, they have classes for margins and paddings so it's better not to use inline.
<div class="col-xs-12">
<h3 style="margin-top:50px">
Key Projects
</h3>
<div class="row">
<div class="col-lg-6 col-sm-12">
<img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-fluid">
</div>
<div class="row col-lg-6 col-sm-12">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid">
</div>
</div>
</div>
In latest version of bootstrap img-responsive is replaced with img-fluid class.
change to:
<div class="col-xs-12">
<h3 style="margin-top:50px">
Key Projects
</h3>
<div class="row">
<div class="col-lg-6 col-sm-12">
<img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-responsive ">
</div>
<div class="col-lg-6 col-sm-12" >
<div class="row">
<div class="col-sm-12 col-lg-6">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
</div>
<div class="col-sm-12 col-lg-6">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
</div>
<div class="col-sm-12 col-lg-6">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
</div>
<div class="col-sm-12 col-lg-6">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
</div>
</div>
</div>
</div>