In one project I'm need to change block height in 16:9 and 9:16 ratio. Recently I'm used for this task solution in JS. But I'm prefer to use this pure CSS solution: solution link
But I found a problem related to this. Please check JSFiddle find the details JSFiddle
For 16:9 ratio I use a 56.25% padding-top value for 9:16 I use 117.77% value. But in a different screen size my blocks takes a different height. Is there any solution to fix this bug in a pure CSS?
HTML code
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="magazine-item">
<div class="item-image ratio ratio-horizontal">
<div class="ratio-container">
<div class="item-image-inner">
<div class="item-label">
Label
</div>
<div class="item-tag">
1 <span class="icon-d-tag"></span>
</div>
</div>
</div>
</div>
<div class="item-title">
Title
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="magazine-item">
<div class="item-image ratio ratio-vertical">
<div class="ratio-container">
<div class="item-image-inner">
<div class="item-label">
Label
</div>
<div class="item-tag">
1 <span class="icon-d-tag"></span>
</div>
</div>
</div>
</div>
<div class="item-title">
Title
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="magazine-item">
<div class="item-image ratio ratio-vertical">
<div class="ratio-container">
<div class="item-image-inner">
<div class="item-label">
Label
</div>
<div class="item-tag">
1 <span class="icon-d-tag"></span>
</div>
</div>
</div>
</div>
<div class="item-title">
Title
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="magazine-item">
<div class="item-image ratio ratio-vertical">
<div class="ratio-container">
<div class="item-image-inner">
<div class="item-label">
Label
</div>
<div class="item-tag">
1 <span class="icon-d-tag"></span>
</div>
</div>
</div>
</div>
<div class="item-title">
Title
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="magazine-item">
<div class="item-image ratio ratio-vertical">
<div class="ratio-container">
<div class="item-image-inner">
<div class="item-label">
Label
</div>
<div class="item-tag">
1 <span class="icon-d-tag"></span>
</div>
</div>
</div>
</div>
<div class="item-title">
Title
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="magazine-item">
<div class="item-image ratio ratio-horizontal">
<div class="ratio-container">
<div class="item-image-inner">
<div class="item-label">
Label
</div>
<div class="item-tag">
1 <span class="icon-d-tag"></span>
</div>
</div>
</div>
</div>
<div class="item-title">
Title
</div>
</div>
</div>
</div>
</div>
CSS code
.ratio {
width: 100%;
display: -webkit-box;
display: flex;
position: relative;
overflow: hidden
}
.ratio:after {
display: block;
content: ''
}
.ratio.ratio-vertical:after {
padding-top: 117.77%
}
.ratio.ratio-horizontal:after {
padding-top: 56.25%
}
.ratio .ratio-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0
}
Related
I have a bootstrap grid that is the UI of a calculator, and it is nested in a div that is sized at 100vw and 100vh. I set the size properties of the bootstrap container to height: 50% and width: 20%, but the content is only filling the width I set, not the height.
I want the height of the grid to resize dynamically so that it is 50% of it's container always.
https://gyazo.com/940d7d3aa77c464e351970bdbd5271b7 (the black line is the border that I am wanting the grid to fill to)
`
return (
<div
style={{ width: "100vw", height: "100vh" }}
class="d-flex align-items-center"
>
<div style={{ height: "50%", width: "20%"}} class="container">
<div class="row">
<div class="col col-6">
<p>AC</p>
</div>
<div class=" col col-3">
<p>/</p>
</div>
<div class="col col-3">
<p>x</p>
</div>
</div>
<div class="row">
<div class="col">
<p>7</p>
</div>
<div class="col">
<p>8</p>
</div>
<div class="col">
<p>9</p>
</div>
<div class="col">
<p>-</p>
</div>
</div>
<div class="row">
<div class="col">
<p>4</p>
</div>
<div class="col">
<p>5</p>
</div>
<div class="col">
<p>6</p>
</div>
<div class="col">
<p>+</p>
</div>
</div>
<div class="row">
<div class="col col-9">
<div class="row">
<div class="col col-4">
<p>1</p>
</div>
<div class="col col-4">
<p>2</p>
</div>
<div class="col col-4">
<p>3</p>
</div>
<div class="col col-8">
<p>0</p>
</div>
<div class="col col-4">
<p>.</p>
</div>
</div>
</div>
<div class="col col-3">
<p>=</p>
</div>
</div>
</div>
</div>
);
}
}
`
I am trying to align three elements in a div in such a way that the image is inline with h1 while the p tag is beneath the h1 tag.
.valign{
position:relative;
top: 50%;
transform: translateY(-50%);
vertical-align: middle;
}
.banner{
position: relative;
height: 100vh;
width:100vw;
background: #eee;
}
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<img src="img/logo.png" style="height: 150px;width: 150px">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p>
</div>
</div>
</div>
</div>
</div>
Here is an image for reference:
This is how the elements must be arranged
This is how the elements are looking right now:
This is a screenshot of the webpage
Any help would be appreciated.
Try this
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div class="float-xs-left float-sm-left float-md-left">
<img src="img/logo.png"></div>
<div class="float-xs-left float-sm-left float-md-left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p></div>
</div>
</div>
</div>
</div>
</div>
the class value for float is based on bootstrap 4
Try this html
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div style="float:left">
<img src="img/logo.png" style="height: 150px;width: 150px"></div>
<div style="float:left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p></div>
</div>
</div>
</div>
</div>
</div>
Use floats, Bootstrap provides pull-left and pull-right helper classes, so use it on the two parts of your layout to have them side-by-by.
You need to add some margins here and there to make it look good.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div class="row">
<div class="pull-left">
<img src="img/logo.png" style="height: 150px;width: 150px">
</div>
<div class="pull-left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/n8o1w3cq/
I have the following code, which is basically a set of bootstrap callout tags.
I am trying to align several rows of 12 columns. If I use row I get an unwanted scroll bar inside the callout tag.
This is the code, which can be also checked in this fiddle
<body style="width:100%;">
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<img src="http://via.placeholder.com/100x20" style="max-height: 48px; max-width: 60px;"/>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<img src="http://via.placeholder.com/100x60" style="max-height: 48px; max-width: 60px;"/>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</body>
As shown, the first callout has an image which has not enough height to misalign the col-xstags, but the second one has enough height so it misaligns the other <div class="col-xs">.
What should be done to fix this?
As per I understand you just need to add one div to img tag and give css to that div:
<body style="width:100%;">
<div class="row">
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<div class="demo-img">
<img src="http://via.placeholder.com/100x60" />
</div>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-12">
<div class="bs-callout bs-callout-success" style="overflow:auto;">
<div class="col-xs-2">
<div class="demo-img">
<img src="http://via.placeholder.com/100x60" />
</div>
</div>
<div class="col-xs-9">
<h4>FOO</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small><em>Col 1</em></small></span><br/>
<span>10000</span>
</div>
<div class="col-xs-3">
<span><small>Col 2</small></span><br/>
<span>20000</span>
</div>
<div class="col-xs-3">
<span><small>Col 3</small></span><br/>
<span>30000</span>
</div>
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3">
<span><small>Estado/</small></span><br/>
<span>Estado</span>
</div>
<div class="col-xs-6">
<span>FOO →</span>
<span>BAR</span>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
</body>
And add below css to your .css file :
.demo-img {
height: 48px;
width: 60px;
overflow: hidden;
}
.demo-img img {
height: 100%;
width: 100%;
}
Use min-height of 48px.
img{
min-height:48px;
}
You can check in jsfiddle
Use bootstrap class="img-responsive" in your code.
Check code here in jsfiddle
I need to design grid using bootstrap, like in the picture that I have uploaded.Please help me.
I think something along the lines of
<div class="col-sm-4">
<div class="content-here">
<img src="img1.jpg" />
</div>
</div>
<div class="col-sm-8">
<div class="boxes">
Box 1
</div>
<div class="boxes">
Box 2
</div>
<div class="boxes">
Box 3
</div>
<div class="boxes">
Box 4
</div>
</div>
CSS
.content-here { height: 400px; }
.boxes { float:left; width:50%; height:200px; }
The grid system code might look like this :
<div class="row">
<div class="col-sm-4">
<img src="example.jpg">
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<img src="example.jpg">
</div>
<div class="col-sm-12">
<img src="example.jpg">
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<img src="example.jpg">
</div>
<div class="col-sm-12">
<img src="example.jpg">
</div>
</div>
</div>
After that, you can specify the width and height of each image. If you want your image to take a full width (means taking all space of the column), you can set width:100%.
I have here my example in fiddle. I am using bootstrap. What I want to do is have the '150' and the 'points' be in the same row right next to each other. Is this possible? How can I do this?
My html looks like this:
<div class="container">
<div class="row">
<div class="col-md-6">
<h4>Content Submissions: </h4>
</div>
<div class="col-md-6">
<div class="col-md-4 pull-right">
<h2>user name</h2>
<div class="row-fluid">
<h2><strong>150 </strong></h2>
<p><small>Points</small></p>
</div>
Account Settings
</div>
</div>
</div>
</div>
Use following css:
.row-fluid {
display: flex;
}
h2 {
margin-top: 0;
}
Working Fiddle
.row-fluid {
display: flex;
align-items: center;
}
h2 {
margin-top: 0;
margin-right: 10px;
}
hi i have made few changes to your html, try this
<div class="container">
<div class="row">
<div class="col-md-6">
<h4>Content Submissions: </h4>
</div>
<div class="col-md-6">
<div class="col-md-4 pull-right">
<h2>user name</h2>
<div class="row-fluid">
<div class="col-lg-6 col-xs-6">
<h2><strong>150 </strong></h2>
</div>
<div class="col-lg-6 col-xs-6">
<p><small>Points</small></p>
</div>
</div>
Account Settings
</div>
</div>
</div>
</div>
<style>
h2{margin:0;}
</style>