I'm reaching this sketch:
how I can push image towards bottom, then I can align content noramally. For some unknown reason for me, content reacting like a row, not a column
<div class="d-flex flex-wrap">
<div class="premises">
<div class="left-wrapper">
<img class="img-responsive" src="http://i.imgur.com/riJ1LKY.jpg" />
</div>
<div class="right-wrapper align-self-end">
<div class="title">
<p class="">Title text</p>
</div>
<div class="ordered-data d-inline-flex justify-content-between">
<p class="">**.**.**</p>
<p class="">**:** - **:**</p>
</div> <div class="destination d-inline-flex justify-content-start">
<p class="">Destination</p>
</div>
<div class="footer-options d-inline-flex justify-content-between">
<p class="">Submit</p>
<p class="">Cancel</p>
</div>
</div>
</div>
</div>
Fiddle
First off, your .premises should have flex-direction: row; (or remove it for default behaviour) to get closer to the result in your original image.
Then you should set a min-height: 0; to your left and right wrappers to counter flex's min-height: auto; behaviour, and remove the height: 100%; as the value isn't explicitly set in the parent. I also recommend setting vertical-align: bottom; to your image tag.
Here is an updated, working fiddle: https://jsfiddle.net/ybxbx55m/
Related
Morning,
I am trying to put my bootstrap card element in a row by 3 cards, cards need to be of the same hight and width and have spacing in between them. For example if I have 7 card I will have 3 rows by three cards and the last row with one element will still be the same size as the card above it.
My code is:
<div class="container pt-2">
<div *ngFor="let g of carMultiArray">
<div class="row">
<div class="col-12">
<div class="card border-0 boxShadow no-padding col-lg-4 col-md-12 col-sm-12 col-xs-12" *ngFor="let t of g">
<a data-toggle="modal" href="'#'+ 'car'+t.Id" class="card-link" [attr.data-target]="'#'+ 'car'+t.Id" style="color:black; text-decoration: none;">
<img class="card-img-top rounded-0" src="{{t.MainImage}}">
</a>
<div class="card-body text-center">
<div class="my-arrow">
<img *ngIf="!t.Verified" src="../../icons/error.png">
<img *ngIf="t.Verified" src="../../icons/checked.png">
</div>
<h5 class="card-title">{{t.Title}} {{t.Kubatura}} {{t.BodyType}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{t.FuelType}} {{t.GearBox}} {{t.Horsepower}}
{{t.OdometerReading}}</h6>
<a [routerLink]="['/car', t.Id]" class="card-link">Daugiau</a>
<a class="card-link">{{t.City}}</a>
<a class="card-link">{{t.FirstRegistration}} </a>
</div>
</div>
</div>
</div>
</div>
</div>
My css (Though it does not influence the problem):
.boxShadow {
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.card-body {
position: relative;
}
.my-arrow {
position: absolute;
top: -10%;
right: 10%;
}
.card-img-top {
width: 100%;
height: 17vw;
object-fit: cover;
}
.card{
width: 90%;
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
The problem that I am having is that with the current code the cards do not have any margin or padding in between them when in one row. As you may have seen I have removed all padding in class .no-padding as if there is any padding even by default the images inside the card get smaller however the cards itself do not and they still touch each other, removing padding brings the cards to look the same and the way they suppose to, however they have no space in between them, adding margin, any margin, pushes the 3 card to a new line.
If I put the elements in a card-group instead of putting it in rows and columns, the result is they have no space in between them, adding some breaks the grid again. Putting it in card-deck results the last card which is one in a row to take up the whole space of the last row, trying to set the width of the cards in a card-deck, for some reason when the elements have 33% or 30% have different width, for example the 3 cards above will have the same width however the single card bellow will still be a little bit wider.
Adding the cards to card-columns, will result in having the cards different hights, trying to make it the same will result in images in the cards not aligning with each other.
While adding everything like you see right now in the code, in a row and then in col-12 allows to handle everything and the way I want it, it removes spacing between cards and as I said if adding margin it pushes the last 3rd card to new line if adding padding image gets smaller then the card.
How would I achieve my wanted result?
Hope this makes sense, if not, please ask.
I think you should use .justify-content-between class from bootstrap4 and try remove your display: inline-block attr from .boxShadow
FOR BOOTSTRAP REFER THIS LINK..
W3 bootstrap 4 card deck
FOR WITHOUT BOOTSTRAP REFER THE CODE BELOW..
.parent{
text-align:center;
}
.padding_maker{
display:inline-block;
padding:10px;
}
.children{
display:inline-block;
background-color:black;
height:300px;
width:150px;
color:white;
}
<div class="parent">
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
</div>
I have a row of thumbnails like this:
I want them to be equal height though. This is my code:
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>Hotkey description goes here. Category only shown in explore.</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>short desc</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hotkey-add">
<div class="thumbnail">
<div class="caption">
<p></p>
<p><span class="glyphicon glyphicon-plus"></span></p>
</div>
</div>
</div>
</div>
Is this possible? Like we see in bootstrap4 here is equal height cards:
http://www.codeply.com/render/KrUO8QpyXP#
I know I'm a little late on this, but I think the best way is flexbox. Here's how it would work in Bootstrap 3:
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
height: 100%;
}
Just add display-flex to the containing row. Also, the upcoming Bootstrap 4 has flexbox as the default so this extra CSS won't be necessary in the future.
Thumbnails with flexbox
You can also do more with the position of child elements.
Also see,
make Bootstrap columns all the same height
It seems that bootstrap 4, like you show in the example, is using to get the same height, display: table for the container div and display: table-cell for the inner ones.
Other solution can be using <table> instead <div>, using flex property...
Checkout this How can I make Bootstrap columns all the same height?
How to make my code to use full width of the device? I am using bootstrap.
<section class="special-area bg-white section_padding_100" id="about">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Section Heading Area -->
<div class="section-heading text-center">
<h2>Why Is It Special</h2>
<div class="line-shape"></div>
</div>
</div>
</div>
<div class="row">
<!-- Single Special Area -->
<div class="col-12 col-md-4">
<div class="single-special text-center wow fadeInUp" data-wow-delay="0.2s">
<div class="single-icon">
<i class="ti-mobile" aria-hidden="true"></i>
</div>
<h4>Heading</h4>
<p>Some text here</p>
</div>
</div>
</div>
</section>
you have to use
class="container-fluid"
instead of container class because container class itself has paddings from the right and left...
From the docs:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
Just make sure it is your outermost element.
You can include those parts of your code inside a pre-defined div whose class name is container-fluid. Here are the properties of container-fluid:
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
You can also add a 100% width style to any other container as well, but maybe that can collide with other style rules of your CSS.
Hope it helps.
EDIT: As requested here is the jsfiddle
When the screen gets too small for the text to fit in the row, it just overlaps other rows, rather than extending the row height. Perhaps this is because I set row heights on every row as a percentage value, in order to lay out my html page with even spacing and vertical alignment. How do I correct this overlapping of text onto other rows? Should I be looking into somehow vertically aligning my rows without setting their height? Or can I keep it the way it is and add some kind of overflow property to each row to tell them to extend their height when necessary?
All relevant images and code:
screenshot of fullscreen (good - no problems yet)
screenshot of hovering over the middle row element on smaller screens (problems)
screenshot of hovering over the bottom row of smaller screens:
all my html for the page:
<div id="landing-page" class="text-uppercase">
<div class="row hidden-lg-up" style="height:20%;overflow-y:auto;">
<div class="col-xs-3 flex-xs-middle">
<img width="100" src="images/monster2.png" />
</div>
<div class="col-xs-3 offset-xs-6 flex-xs-middle">
<img class="pull-xs-right" width="100" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:95%;overflow-y:auto;">
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img width="80%" src="images/monster2.png" />
</div>
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
<img class="pull-xs-right" width="80%" src="images/monster4.png" />
</div>
</div>
<div class="row" style="height:5%;overflow-y:auto;">
<h4 class="display-6 flex-xs-bottom">
*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!
</h4>
</div>
</div>
all my css for the page:
div#landing-page {
background-color: #696969;
height: 100%;
padding: 110px 40px 0px 40px;
overflow-y: auto;
min-height:470px;
}
EDIT: As requested here is the jsfiddle
Alright. Now the question is clear. The problem was easy to fix.
The problem is in the following div. You have specified it to have col-md-12 but you didn't force it when the screen is xs
<div class="col-md-12 col-lg-6 flex-xs-middle ">
<div id="motto-text" style="text-align: center;">
<h5 class="text-muted display-6">the vegan repository</h5>
<h1 class="display-3">
find vegan stuff* near you.
</h1>
<a id="try-now-button" class="with-border clickable" href="#search-filter-page">
<h5 class="text-center medium-text">try now</h5>
</a>
</div>
</div>
so the simplest thing is to add col-xs-12 class to prevent overlapping
See example
I'm using materializecss and i want my DIV to be vertically centered the clean and maybe materializecss way?
<div class="container">
<div class="row">
<div class="col s12 infobox center">
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 1</span>
<p>BOX 1</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 2</span><br>
<p>BOX 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
This is what i want:
To make valign-wrapper work the container itself must have some height. Most just collapse to the content height. You can either set the height to some fixed value or you can use percentages. But if you use percentages you need to make sure that your containers container also have some height.
In this example I'm showing how to make something vertically aligned inside the body:
So if you set html and body to height 100%:
html, body, .my-wrapper {
height: 100%;
}
Notice how I set both html and body to 100% in addition to my own wrapper class.
Now I can add the valign-wrapper to my container and you'll see that it's content get's centered:
<body>
<div class="my-wrapper valign-wrapper center-align">
... content to be vertically aligned ...
</div>
</body>
The point is your container must have a height otherwise it doesn't work. You can set the height yourself or let the layout handle it like in this case.
Updated
Horizontal centering using grid classes.
You can use a combination of grid sizes and offset to put content in the center (or where you fancy it):
<body>
<div class="my-wrapper valign-wrapper center-align">
... content to be vertically aligned ...
<div class="row">
<div class="col s12 m8 offset-m2 l6 offset-l3>
... content centered 6 wide on large ...
... content centered 8 wide on medium ...
... content centered 12 wide on small ...
</div>
</div>
</div>
</body>
Notice that row and col goes hand in hand.
I created this example on Fiddle for you
(ps: there must be a flex-box version of doing this as well)
In order to verticaly align a div,section or a part of design using materialize you should add height to .valign-wrapper as you can see here: materializecss
Demo: demo
i did it by adding an innerdiv class to the row which contains your infobox and then apply the below css, check if it suits you:
<style>
.innerDiv{
width: inherit;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="container">
<div class="row innerdiv">
<div class="col s12 infobox center-align">
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 1</span>
<p>BOX 1</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 2</span><br>
<p>BOX 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
Materializecss gives you some small helpers http://materializecss.com/helpers.html
The first one ist for vertial align.
You could try to add an CSS property to the infobox Div, or the card div:
vertical-align: middle;
Or maybe just add Padding-top
This both is not materializecss, but I think materialize don't have a feature for vertical align at all.
//EDIT
I was wrong. There is a Materialize way, just add the class valign-wrapper to the main Div here.
For headings you can use valign.
About align in Materialize
Text Align
These classes are for horizontally aligning content: .left-align, .right-align and .center-align.
left-align: This should be left aligned
right-align: This should be right aligned
center-align: This should be center aligned
<div><h5 class="left-align">This should be left aligned</h5></div>
<div><h5 class="right-align">This should be right aligned</h5></div>
<div><h5 class="center-align">This should be center aligned</h5></div>
display: inline-block;
vertical-align: middle;
Lets first look at how materializecss aligns the code vertically using flexbox properties (search 'valign-wrapper' in the css file included in materialize.min.css file to examine).
.valign-wrapper{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center
}
Thus the above two elements could easily be aligned vertically using only HTML and CSS (see example below).
The CSS code:
.my-container{
display:flex;
align-items:center;
height: 100vh;
}
.box-container>div{
display:inline-block;
}
And the HTML Code :)
<div class="my-container">
<div class="box-container">
<div>Box A</div>
<div>Box B</div>
</div>
</div>