I have a bootstrap grid inside the columns, I have a card with an image in it, but my card does not occupy the full width of my column, how do I make it possible?
My column right now
I've tried playing with the width of the card but it seems there's some maximum limit to the grid size or for some grid sizes, other elements on the page are effected.
div class="container2">
<div class="row">
<!-- outer grid first column -->
<div class="col-8">
MODULES
<div class="module-container">
<!-- first column inner grid -->
<div class="row">
<div class="col-6">
<img src="images/GC.png" class="img-top img-responsive fit-image" alt="module 1" >
GC
</div>
CSS
.fit-image{
width: auto;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}
If you want fit your image to the full width of the column then u can use some css
your code goes here
..........
<img src="images/GC.png" class="card-img-top img-responsive fit-image" alt="module 1" >
.........
add css like this
.fit-image{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}
Related
I have a boostrap row containing 2 columns, the left column contains some text, the right column contains an image.
I want to set the max-height of the right column to be equal to the height of the left column - which may change due to resizing of the window (has a min-height property).
I want to crop the image which I believe can be achieved using "object-fit:cover" within css
My code is as follows:
<div class="row" id="test-row">
<div class="col-2" id="test-left">
Some random text
</div>
<div class="col-10" id="test-right">
<img src="img_source" class="img-responsive">
</div>
</div>
I have looked online and at other posts but all seem to be based around the column not needing to be cropped or downsized.
This is possible if you are willing to make your image a background image.
<style>
#bg-image {
background-image: url('example.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
</style>
<div class="row" id="test-row">
<div class="col-2" id="test-left">
Some random text
</div>
<div class="col-10" id="test-right">
<div id="bg-image"></div>
</div>
</div>
Otherwise use a javascript window resize event to set the height.
I am displaying 4 cards each row using a card deck:
<div class="row">
<div class="card-deck">
<!-- 4 of these -->
<div class="card">
<img class="card-img-top img-adjusted" >
<div class="card-body">...</div>
</div>
</div>
</div>
<div class="row">
<div class="card-deck">
<!-- 4 of these -->
<div class="card">
<img class="card-img-top img-adjusted" >
<div class="card-body">...</div>
</div>
</div>
</div>
...
The cards within each deck are the same width, but the decks are not, i.e. the deck of the 2nd row is wider than the deck of the 1st row. How do I get the decks to be of the same width?
I have tried setting .card-decks{width: 100%;}, which works for full rows, but distorts cards of rows that have just 1-2 cards.
Additional CSS:
My images are of different sizes, that's why I added the following CSS to make them the same. No other CSS should affect the cards:
.img-adjusted{
position: relative;
float: left;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
Also, I want to keep the style responsive, so would like to avoid hardcoding pixel set pixel widths.
Don't put .card-deck in a .row. Only .col- columns should be placed in rows...
content must be placed within columns and only columns may be
immediate children of rows.
You should use...
<div class="row">
<div class="col-12">
<div class="card-deck">
<!-- 4 of these -->
<div class="card">
<img class="card-img-top img-adjusted" >
<div class="card-body">...</div>
</div>
</div>
</div>
</div>
The 2nd part of the question...
When using card-deck (and card-group), cards will always fill the width of the next visual row. If you have less than 4 cards in each row, the remaining cards will fill the width across. To workaround this, set a max-width for each card..
.card-deck .card {
max-width: calc(25% - 30px);
}
https://www.codeply.com/go/ygvZvjsELs
Alternatively, You can use the grid columns to wrap the cards. This is explained here: Bootstrap 4 card-deck with number of columns based on viewport
My layout is composed of a top menu, a main content and a footer.
In the main content, I would like to take the entire page (no less, no more, so that I do not need to scroll down and I can fill up the page).
In the main content, I would like to split the row via percentages and stack some elements, but I cannot.
This is my code, where I am also using a couple of Angular directives:
<body ng-app="pathfinderApp">
<app-top-menu></app-top-menu>
<div class="container-fluid">
<div ng-view=""></div>
</div>
<app-footer></app-footer>
I defined fullheight and redefined container-fluid:
html, body {
height: 100%;
}
.container-fluid {
height: 90%;
}
.fullheight {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%;
}
My main contents is composed of two side-by-side blocks: one 3 columns and the other 9 columns. Let's consider only the first block (3 columns):
<div class="row fullheight"><!-- this row fills up the page-->
<div class="col-md-3 col-sm-3"> <!-- this is still filling up the page-->
<div class="row height20"><!-- this does not take 20% of the containing row, but less -->
<h3 class="text-center no-margin-top">Main Action</h3>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">
<span>My button</span>
</a>
</div>
</div>
<div class="row height40">...</div>
<div class="row height30">...</div>
<div class="row height10">...</div>
</div>
<!-- rest of the columns -->
</div>
height classes are like this:
.height20 {
min-height: 20%;
height: 20%;
max-height: 20%;
}
What I would expect is the the first row in the column be 20% of the total height, the second 40% and so on, but this does not happen. In fact, every row seems to only wraps its content and not taking the full percentage.
How can I fix that?
When you want to apply height in %age you must have to apply height on parent container, in your case parent container is
.row.fullheight
Please apply fix height to this class like
.row.fullheight{height: 100px}
Now when you give child element(.height20) height to 20% it will take 20% form total height that is 20px, so on for other childs
Hope this would be helpful.
Thanks
I got bootstrap col-md-1 that contains an image inside. Moreover, that column is wrapped by content div with paddings.
The problem I'm not okay with is that this image is pretty small. I would like it to be with the size at least as the original one has,
yet it should be responsive.
How can I do this? Thanks in advance!
My Codepen
HTML
<div class="content">
<div class="row">
<div class="col-md-11 first-column"></div>
<div class="col-md-1 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
</div>
</div>
</div>
CSS
.content {
padding: 0 35px;
}
.first-column {
border: 1px solid;
height: 100px;
}
One of the 'blanket' styles that BootStrap ships with is this:
img {
max-width: 100%;
}
This essentially means that images won't go wider than their parent containers / elements. So if your col-md-1 has a width of 97.5px (assuming you're using a normal 1170px container?), your image won't be bigger than 97.5px on viewports > 992px.
Try experimenting with different sized columns:
<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
Or, for larger viewports, try appending another class to your wrapping container and overrides BootStrap's native container class:
<div class="container container-custom">
Then style is as follows:
#media (min-width: 1420px) {
.container.container-custom {
width: 1390px
}
}
Doing this will ensure your column widths remain proportionate to your container size (they are percentage based after all) and most importantly, you're not overwriting BootStrap!
You'll also notice I've wrapped the above class in a media query. This is so viewports > 1420px have the 1390px container with spacing either side (due to container's margin-left: auto and margin-right: auto which center it in the viewport).
I am creating a bootstrap template which will be contain two divs, from which one div the left-one should be fixed and the right one should be scrollable, similar to the http://www.trulia.com. I have tried the following code:
<div class="row">
<div class="col-md-6">
<img src="">
</div><!--Fixed one-->
<div class="col-md-6">
</div><!--Scrollable-->
</div>
It will solve your problem
.col-md-6:nth-child(1){
position:fixed;
}
.col-md-6:nth-child(2) {
height: 200px; // Set this height to the appropriate size
overflow: scroll;
}