I got a little bootstrap problem.
I print a few elements with angular (ng repeat) and the containers adjust their height the height of the images..
View of my recipes
Code:
<div class="row text-center">
<div class="col-lg-3 col-md-12 col-sm-12" ng-repeat="recipe in purchasedRecipes">
<a href="{{recipe.PdfUrl}}" target="blank">
<div class="thumbnail">
<img src="{{recipe.ImgUrl}}" alt=""/>
<div class="caption">
<h3>{{recipe.RecipeName}}</h3>
</div>
</div>
</a>
</div>
</div>
The width is easy to assign with bootstrap (class="col-lg-3 col-md-12 col-sm-12") How can I assign a fixed responsive height, so that my recipes are same size row for row ?
Thanks for helping :)
See here. Top three is:
matchHeight.js
matchHeight.js Docs
matchHeight.js GitHub
Use tables
The example that they gave:
#media only screen and (min-width : 768px) {
.is-table-row {
display: table;
}
.is-table-row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
}
Huge negative margin and positive padding
Their code:
.row.match-my-cols {
overflow: hidden;
}
.row.match-my-cols [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Related
I'm trying to put my 2 paginations at the same vertical distance of my table.
This works for the bottom part but the top part appears to be in my table-container for some reason.
CSS:
.table {
width: 100%;
max-width: none;
clear: both;
}
.table-container {
margin-top: 20px;
margin-bottom: 20px;
}
section {
margin-top: 20px;
margin-bottom: 20px;
}
.pagination {
display: inline;
}
To fix the spacing issue, change
.pagination {
display:inline-block;
}
to
.pagination {
display:inline; //or block
}
You should also wrap your .pagination in a .col-xs-12 .col-md-12 div like this. Always include the xs classes as Bootstrap is mobile first.
<div class="row>
<div class="col-xs-12 col-md-12">
<ul class="pagination">
//code
</ul>
//rest of code
</div>
</div>
Also, this
<section>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</section>
should be
<section>
<div class="row>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</div>
</section>
As the docs state
Content should be placed within columns, and only columns may be
immediate children of rows.
You have no margins on your rows. Other things are affecting it that are inside the rows. For example, you have a <div class="pagination"> is display:inline-block. If you remove that, the bottom 5px margin goes away.
I have two divs :
<div class="row">
</div>
<div class="row">
</div>
I need to fix the first one while scrolling. I did this :
<div style="position:fixed" class="row">
</div>
Now the divs are overlapping : https://jsfiddle.net/DTcHh/22068/
How can I solve this ?
HTML:
<div class="row fixed"></div>
<div class="row padding"></div>
CSS:
.fixed {
position: fixed;
background: #fff;
z-index: 10;
width: 100%;
}
.padding {
padding-top: 54px // height of your fixed row, you have to change this value on different screen sizes (using media queries)
}
JSFIDDLE
I have a simple bootstrap layout
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="upper"></div>
</div>
<div class="col-sm-4">
<div class="lower"></div>
</div>
</div>
</div>
css
.upper {
height: 100%;
width: 100%;
}
.lower {
height: 100%;
width: 100%;
}
if the screen is sm, the upper div will be ontop and the other below it. Each filling 100% width and height. However, it'd like upper to only have a 80% height if the screen is sm. Are there some way to work this out in bootstrap? Or some other smart way with jquery perhaps.
you can add xs class in each div after sm or you can do it with media query also
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-xs-8">
<div class="upper"></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="lower"></div>
</div>
</div>
</div>
or
#media only screen and (max-width: 768px) {
.upper {
height: 80%;
width: 80%;
}
.lower {
height: 80%;
width: 80%;
}
}
You could do this with a responsive CSS media query:
#media (min-width: 768px) {
.upper {
height: 80%;
}
}
This would sort of make sense with your existing CSS, as Bootstrap favors a mobile-first approach to development. Your existing CSS rule for .upper would kick in for extra-small (xs) viewports only, and when the viewport is stretched out (to small/sm), this rule would overwrite your xs rule.
I am using Twitter Bootstrap and its grid layout and in one column I am trying to get an image pulled to the right and a text pulled to the right next to the image as well while they should both be vertically centered. With the image it's easy - I made the class img-responsive and added padding to that column and a pull-right to the image so it sits well, however the text doesn't seem to center whatever I try.
I tried applying this to the column:
.center{
display : table-cell;
vertical-align : middle;
float:none;
}
and it seemed to work when there's only text, however with the image included it won't.
Here is my code for the column:
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="">
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
And CSS:
#namecolumn {
padding: 1vh;
}
.img-responsive {
height: 100%;
margin: 0 auto;
}
Thanks!
h4 is a block element, so set it as inline-block and give vertical-align:middle; to both img and h4 , so they center to each other on the baseline.
#myimage, #nametext {
display:inline-block;/* defaut display of img tag */
vertical-align:middle;
}
You will need to cretae 2 wrapper divs that have a value of display: table and display: table-cell. Then you can use vertical-align: middle.
DEMO http://jsfiddle.net/Fa8Xx/1750/
CSS
.wrapper {
height: 100%;
display: table;
}
.wrapper-inner {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML
<div class="wrapper">
<div class="wrapper-inner">
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="" />
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
</div>
If you want to vertically center float elements like col-md-3 and so on use this example http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
i am just wondering if i have layout like this
<div class="container">
<div class="left"> Left </div>
<div class="right"> Right </div>
</div>
changing view port to 320 needs right div appear first and left div below it , Is this possible ??????
yes. just use the flex-box setup on the pertinent media query, as exemplified below and the boxes will show up reversed.
<html><head></head><body><div class="container" style="
display: -webkit-flex;
">
<div class="left" style="
-webkit-flex-flow: column;
background: lightgray;
"> Left </div>
<div class="right" style="
-webkit-flex-flow: column;
background: yellow;
-webkit-order: -1;
"> Right </div>
</div>
</body></html>
Original source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
It is possible and widely used. Take a look at this mobile first approach:
<div class="container">
<div class="right"> Right </div>
<div class="left"> Left </div>
</div>
This will be rendered one box below another on mobile. And now we use CSS to rearrange them on bigger screens (above 320px):
#media only screen and (min-width : 481px) {
.left { float: left; }
.right { float: right; }
}