I want to set my code to auto-calculate equal height in inside of .col, because for example inside .col I have <h2> and <p> which could have different number of rows, so height of this element will be different for every .col, I would like to get same height for all rows inside .col.
I tried to use flexbox utilities, but I didn't find a solution, so I am wondering if grid will help me get what I want to get, but I don't know if display: grid inherits height of flexbox elements?
Here is my code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Projektowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/projektowanie-stron.jpg" class="img-fluid" alt="Projektowanie stron">
</div>
<p>Projektowanie oraz tworzenie serwisów internetowych.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Pozycjonowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/pozycjonowanie-stron.jpg" class="img-fluid" alt="Pozycjonowanie stron">
</div>
<p>Zwiększ pozycję swojej strony www w wynikach wyszukiwania.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Outsourcing <b>IT</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/outsourcing-it.jpg" class="img-fluid" alt="Outsourcing IT">
</div>
<p>Outsourcing informatyczny Profesjonalna opieka informatyczna dla firm.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/jRweow
I thought about using display: grid to .header-bottom-box and equal height of inside element.
EDIT
I tried to use GIRD:
And it works like I want to, but I don't know why I get this white space, how to delete it?
this is normal sir,
this all happen because of last col. text is less then first and second.
Related
This one i want to display. In here i want to display all these in same way same height & width.But in here bottom part height will be larger if the title has many words.
This is my html code block
<div [style.width.%]="105" [style.height.%]="25">
<div matRipple [matRippleColor]="primary" class="m-tile">
<div class="a-tile-graph a-tile-graph--hotel">
<div class="titles">
<div class="head">{{name}}</div>
<div class="sub">{{level}}</div>
</div>
<div id="{{chartId}}" class="graph"></div>
</div>
<div class="o-tile-content" [ngStyle]="{'font-size.px':14}">
<div class="a-tile-btn"><i class="fa fa-signal"></i></div>
<div class="a-tile-title">{{name}}</div>
<div class="a-tile-value"><span class="currency">$</span>{{getFormattedValues(ttv)}}</div>
<div class="a-tile-count">{{getFormattedValues(ttc)}}</div>
</div>
</div>
</div>
how could i fix this?
I'm using bootstrap 4.4.1.
I've been loking for a responsive list group that will be same height with other components. In the image I want both columns on second row to be same height of image and to hide other list items behind an scrolling group.
Here is the html file : https://jsbin.com/jaqacoq/edit?html,output
<div class="col-md-8 my-col p-4">
<img class="img-fluid" src="img3.jpg" alt="Image not Found">
</div>
<div class="col-md-4 p-2 my-col">
<div class="container">
<div class="row my-row">
<div class="col my-container">
Col 1
</div>
<div class="col my-col">
Col 2
</div>
</div>
<div class="row my-row">
<div class="col">
<div class="overflow-auto">
<div class="">Item 1</div>
<div class="">Item 1</div>
<div class="">...</div>
</div>
</div>
</div>
</div>
</div>
Expected result, but without using fixed size :
What you need here is a bit of jQuery to calculate the height of your image so you can set the height of your list group based on that.
With jQuery you can calculate height with .height()
Here's an example on how to use it:
$('#div2').css('height', $('#div1').height()+'px');
And here's an example with your code that is working:
https://www.codeply.com/p/Pv1dwtjQ9E
Y-overflow don't work without either height or max-height option, so you should specify height of your .comments-block in any units besides percents.
Another approach I can think of: position: fixed all your interface elements and resize/scroll only the central element.
I have several different images all with a different height/width. I want them all to have the same height and keep their aspect ratio so I figured in the css width should be equal to auto. How can I achieve that all my images have the same height but keep responsiveness?
I wrote the following code containing the images:
<div class="container container-margin">
<div class="columns">
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image">
<img class="bw-filter" src="/images/battleport.png"/>
</figure>
</div>
<div class="card-content remove-padding-left">
<div class="content">
<h6 class="">Battleport</h6>
<p><i>Study</i></p>
<br>
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image">
<img class="bw-filter" src="/images/crmfabriek.png"/>
</figure>
</div>
<div class="card-content remove-padding-left">
<div class="content">
<h6 class="">CRM Fabriek</h6>
<p><i>Business</i></p>
<br>
</div>
</div>
</div>
</div>
<div class="column is-one-thrid">
</div>
</div>
Besides that I've looked at the following topics
How to keep responsive images same height?
How can I make all images of different height and width the same via CSS?
Unfortenately the solutions in the topics won't work for my code. Could anyone help me out?
Not sure if this is what you are looking for, but might be the fix.
div{
width: 100%;
text-align: center;
}
img{
max-width:100%;
max-height: 300px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="">
</div>
I think the best option would be to use these images as background images and then set the background-size to either "contain" or "cover". This way you can set the container width/height to the appropriate size based on the media query.
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">