How can I make bootstrap 4.5 one column height change bigger so that there would be no gaps in the grid? See the picture below (test 2 and test 4 columns should be with no gap and ONLY test 1 should be higher, other the same height).
Start position is that all the columns are equal height. I might use jquery to expand the "test 1" column.
Relevant code here:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6" style="height: 400px; background: #eee; border: 1px solid #333;">
test 1
</div>
<div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
test 2
</div>
<div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
test 3
</div>
<div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
test 4
</div>
</div>
</div>
</div>
</div>
You could just use min-height: 200px; instead of just setting the height.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6" style="height: 400px; background: #eee; border: 1px solid #333;">
test 1
</div>
<div class="col-lg-6" style="min-height: 200px; background: #eee; border: 1px solid #333;">
test 2
</div>
<div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
test 3
</div>
<div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
test 4
</div>
</div>
</div>
</div>
</div>
I can get it working with two flex columns but then the order does not work in phone layout (it will be 1,3,...). See the images:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container">
<div class="row">
<div style="col-lg-6 d-flex flex-column">
<div class="" style="height: 400px; width: 300px; background: #eee; border: 1px solid #333;">
test 1
</div>
<div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
test 3
</div>
</div>
<div style="col-lg-6 d-flex flex-column">
<div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
test 2
</div>
<div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
test 4 sigh
</div>
</div>
</div>
</div>
And actually this is possible by making my own float columns. They seem to work without gaps (float left always fills the space correctly).
Related
I have been trying to align content in a div to the bottom (which seems only to work with absolute) AND at the same time to position the content in the center.
In my code below, the problem refers to the images, which are either centered and at top OR left and bottom, but never both.
I have tried different CSS approaches as well as just using an old fashioned table for around the image, but nothing seems to work to get both at the same time.
How to position the images center and at bottom?
jsfiddle
.x-offer:nth-of-type(1) {
background-color: #c5d7d9;
}
.x-offer:nth-of-type(2) {
background-color: #e6e0cf;
}
.x-offer:nth-of-type(3) {
background-color: #debfb5;
}
.x-offer {
padding: 20px 0 0 0 !important;
}
.x-offer.nails > .flex-column {
width: 90%;
}
.x-offer > .flex-column {
width: 100%;
}
.x-offer > .flex-column > div:nth-of-type(2) {
bottom: 0px;
width: 75%;
margin: 0px auto;
position: absolute;
bottom: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<div class="container">
<div class="row" style="height: 250px;">
<!-- STYLING -->
<div class="col-sm text-center d-flex align-items-top justify-content-center x-offer styling">
<div class="flex-column justify-content-center" style="border: 1px solid green;">
<div style="border: 1px solid;">
STYLING<p> </p>
</div>
<div style="border: 1px solid;">
<img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service1.gif" style="max-height: 50%; max-width: 100%">
</div>
</div>
</div>
<!-- HAIR -->
<div class="col-sm text-center d-flex align-items-top justify-content-center x-offer hair">
<div class="flex-column" style="border: 1px solid green;">
<div style="border: 1px solid;">
HAIR<p> </p>
</div>
<div style="border: 1px solid;">
<img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service3.gif" style="max-height: 50%; max-width: 100%">
</div>
</div>
</div>
<!-- NAILS -->
<div class="col-sm text-center d-flex align-items-top justify-content-center x-offer nails ">
<div class="flex-column" style="border: 1px solid green;">
<div style="border: 1px solid;">
NAILS<p> </p>
</div>
<div style="border: 1px solid;">
<img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service2.gif" style="max-height: 50%; max-width: 100%">
</div>
</div>
</div>
</div> </div>
Modify style of your .x-offer > .flex-column > div:nth-of-type(2)
Add left and right parameters, and set them to 0:
.x-offer > .flex-column > div:nth-of-type(2) {
bottom: 0px;
width: 75%;
margin: 0px auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here's fiddle
You should add the classes d-flex and align-items-center to the divs that currently have the flex-column class applied:
<div class="d-flex align-items-center flex-column" style="border: 1px solid green;">
You can see more about flex in bootstrap 4 documentation here: https://getbootstrap.com/docs/4.0/utilities/flex/
There are 2 things you need (I mark them in code).
A flex container
An item, which expands within this container (to push last element down)
.x-offer {
border: 1px solid green;
height: 250px;
}
.image-bottom-wrapper {
text-align: center;
}
.image-bottom-wrapper img {
max-width: 100px;
max-height: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col col-4 x-offer styling d-flex flex-column"><!-- [1] -->
<div class="headline">
STYLING
</div>
<div class="flex-grow-1 text"><!-- [2] -->
Some Text Here...
</div>
<div class="image-bottom-wrapper">
<img src="https://dummyimage.com/300x200/CCC/000" />
</div>
</div>
</div>
</div>
I'm new to ASP.Net CSS.
Can anyone tell me how can I align my box with its description up(color_box) and down(description).
This is my current issue image.
My CSS image
My Html Code Below:
<div class="container-box">
<div class="box blue">
<div class="text blue">Blue</div>
</div>
<div class="box black">
<div class="text black">Black</div>
</div>
<div class="box green">
<div class="text green">Green</div>
</div>
</div>
My CSS Code Below:
.container-box{
border: 1px solid black;
background-color: lightblue;
padding-top: 40px;
padding-right: 50px;
padding-bottom: 350px;
padding-left: 80px;
}
.box{
float: left;
width: 20px;
height: 100px;
margin: 10px;
margin-left:0.01%;
border: 80px solid rgba(0, 0, 0, .2);
}
.blue{
background:blue;
}
.black{
background:black;
}
.green{
background:green;
}
.text{
float: left;
width: 320px;
padding: 10px;
border: 5px solid dotted;
margin:100px;
margin-right:100%;
color:white;
}
<div class="container-box">
<div class="box blue">
<div class="text blue">Blue</div>
</div>
<div class="box black">
<div class="text black">Black</div>
</div>
<div class="box green">
<div class="text green">Green</div>
</div>
</div>
Correct me or please provide me some solution for my doubt.
Thank you.
I have a page with 6 <div> tags and Have no access to Html of this page.So I try to create a table with css For these fields.
Please See the attached Picture:
The Html codes is like this for every 4 fields:
My HTML Codes are like following in my site :
<div class="group">
<h3>
<span>title-group</span>
</h3>
<div class="field-1">
<div class="field-label">field-1</div>
<div class="field-items">
<div class="field-item even">11111111</div>
<div class="field-item odd">2222222222222222</div>
<div class="field-item even">333333333333</div>
</div>
</div>
<div class="field-2">
<div class="field-label">field-2</div>
<div class="field-items">
<div class="field-item even">1111111111111111111111111</div>
<div class="field-item odd">22222222222222222222</div>
<div class="field-item even">333333333333333333333333333333333</div>
</div>
</div>
<div class="field-3">
<div class="field-label">field-3</div>
<div class="field-items">
<div class="field-item even">11111111111111111111111111111111111111111111</div>
<div class="field-item odd">222222222222222222222222222222222</div>
<div class="field-item even">3333333333333333333333333333333</div>
</div>
</div>
<div class="field-4">
<div class="field-label">field-4</div>
<div class="field-items">
<div class="field-item even">
<span class="file">fiele</div>
<span class="file">fiele</div>
</div>
</div>
</div>
I Use css For float these tags and create a table , but every cell have different height for content,I want to have equal height for cells (field-item) . I Can add height:100px; but if content of A cell be more that 100px my table will destroy.I want to set height of two fields on the right and left side equal with two fields on middle of table.beacause content of these two middle fields are different wit differrent height.
My CSS thats used:
.field {
display: table;
}
.field-items {
display: table-row;
}
.field-item {
display: table-cell;
padding: 15px 5px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.field-item:first-child {
border-left: 1px solid #000;
}
.field:first-child .field-item,
.field-items + .field-items .field-item {
border-top: 1px solid #000;
}
New picture after css addition:
Please Help me.
If you want to use a table, why do you not use the table tag instead of div?
But if you want to use div you can change the CSS to let it "be" a table
.field-1 {
display: table;
}
.field-items {
display: table-row;
}
.field-item {
display: table-cell;
padding: 15px 5px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.field-item:first-child {
border-left: 1px solid #000;
}
.field-items:first-child .field-item {
border-top: 1px solid #000;
}
<div class="field-1">
<div class="field-items">
<div class="field-item">test</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
</div>
</div>
Update with 3 rows and columns
.field {
display: table;
}
.field-items {
display: table-row;
}
.field-item {
display: table-cell;
padding: 15px 5px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.field-item:first-child {
border-left: 1px solid #000;
}
.field:first-child .field-item,
.field-items + .field-items .field-item {
border-top: 1px solid #000;
}
<div class="field">
<div class="field-items">
<div class="field-item">test</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
</div>
</div>
<div class="field">
<div class="field-items">
<div class="field-item">test</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
</div>
</div>
<div class="field">
<div class="field-items">
<div class="field-item">test</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf<br/> sdifgs</div>
<div class="field-item">testestsetse stsetset sets<br/> sdfsdf</div>
</div>
</div>
I am using Bootstrap and trying to center 3 div blocks using the bootstrap 12 columns style. So each div takes up 4 columns. I want some spacing between these columns thus I added 10px margin to the right. This pushes down the 3rd div to the next row. How do I get my spacing and still keep all 3 columns on the same row?
HTML
<div class="container">
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
</div>
CSS
.cust_box{
margin-top: 15px;
margin-bottom:15px;
padding-left: 10px;
padding-right:10px;
background-color: #1A284B;
color: #fff;
height: 290px;
max-width:100%;
border: 1px solid #162444;
margin-right: 10px; /*Line that causes issue*/
}
Problem recreated in CodePen
Place your class cust_box inside the the column. The h3 has margin so that may also be interfering with your layout. You may also want to just use the row class instead of form-group.
See working Example Snippet. (colors added so you can see what's actually happening)
.cust_box {
margin: 15px 2.5px;
padding: 25px;
height: 290px;
max-width: 100%;
background-color: #1A284B;
color: #fff;
border: 1px solid #162444;
}
.cust_box h3 {
margin: 0;
}
.red {
border: 2px solid red;
}
.yellow {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row yellow">
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
</div>
</div>
Example without Color
.cust_box {
margin: 15px 2.5px;
padding: 25px;
height: 290px;
max-width: 100%;
background-color: #1A284B;
color: #fff;
border: 1px solid #162444;
}
.cust_box h3 {
margin: 0;
}
<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-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
</div>
</div>
with the additional margin you are destroying the bootstrap grid system.
have you tried using padding instead of margin?
apart from this you can customize bootrap a lot!
have a look on this:
http://getbootstrap.com/customize/#grid-system
EDIT:
i looked at your code and saw your struggle:
use a inner div like this:
<div class="form-group col-sm-4 col-lg-4 cust_box">
<div class="inner">
<h3>Something</h3>
</div>
</div>
and use your style on the inner div:
.cust_box .inner{
margin-top: 15px;
margin-bottom:15px;
padding-left: 10px;
padding-right:10px;
background-color: #1A284B;
color: #fff;
height: 290px;
max-width:100%;
border: 1px solid #162444;
margin-right: 10px; /*should not be an issue anymore*/
}
I'm trying to do the next thing:
so I tried it by:
http://jsfiddle.net/7ewrM/22/
<div class="container">
<div class="row-fluid">
<div class="col-xs-4">
<div class='img-container'>
<img src='http://graph.facebook.com/112845672063384/picture?type=square' />
<div class='img-text'>Mark zuckerberg</div>
</div>
</div>
<div class="col-xs-8">
some text
</div>
</div>
</div>
Any help appreciated!
.container {
border: 1px solid red;
padding: 0;
}
.img-container{
padding: 0 10px;
}
.imggg {
display: inline-block;
width: 25%;
padding: 10px;
border-right: 1px solid red;
}
.text {
width: 70%;
display: inline-block;
}
.marc-zuckerberg{
border-top: 1px solid red;
width: 100%
display:inline-block;
}
<div class="container">
<div class='img-container'>
<div class="imggg">
<img src='http://graph.facebook.com/112845672063384/picture?type=square' />
</div>
<div class='text'>text</div>
</div>
<div class='marc-zuckerberg'>Mark zuckerberg</div>
</div>
Here you go: http://jsfiddle.net/7ewrM/24/