When adding the bootstrap class "img-fluid" to my images they don't appear, when inspecting the element it sets the image at 0x0 pixels.
The html:
<div class="col">
<div class="row no-gutters">
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid"
alt="placeholder">
</div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
<div class="w-100"></div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
</div>
</div>
The images are supposed to be the same size as the parent(div.col) and be responsive to the parent.
Here's an answer based on my comment.
Because you have a .col element as a child of a flex parent, the flex-basis is set to 0. That basically equates to width: 0.
To get around that, set the flex-basis to auto on the .col that are children of the .row element.
.row>.col {
flex-basis: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col">
<div class="row no-gutters">
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="w-100"></div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
</div>
</div>
Related
Now, there is a white space in the bottom part of the left column. Or the right column exceeds the baseline.
enter image description here
<section class="courses">
<div class="container-fluid">
<!-- Gallery -->
<div class="row g-0">
<div class="col-lg-5 col-md-12">
<h2 class="p-3 text-center text-white">Courses</h2>
<img src="./img/courses1.png" class="w-100" alt=""/>
<img src="./img/courses3.png" class="w-100" alt=""/>
<img src="./img/courses6.png" class="w-100" alt=""/>
<h4 class="p-3 text-center text-white">Get The Best Training</h4>
</div>
<div class="col-lg-7">
<img src="./img/courses2.png" class="w-100" alt="" />
<h4 class="p-3 text-center text-white">Get The Best Training</h4>
<div class="row g-0">
<div class="col-lg-6">
<img src="./img/courses4.png" class="w-100" alt=""/>
</div>
<div class="col-lg-6">
<img src="./img/courses5.png" class="w-100" alt="" />
</div>
</div>
<img src="./img/courses6.png" class="w-100" alt=""/>
</div>
</div>
<!-- Gallery -->
</div>
</section>
I am trying to place text at the bottom of the image but it's placed at side of the image
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<img src="https://via.placeholder.com/150">
<h4>A</h4>
</div>
</div>
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<img src="https://via.placeholder.com/150">
<h4>B</h4>
</div>
</div>
</div>
</div>
</div>
I suggest using semantic HTML with text-center class:
<figure>
<img src="https://via.placeholder.com/150">
<figcaption class="text-center">B</figcaption>
</figure>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<figure>
<img src="https://via.placeholder.com/150">
<figcaption class="text-center">A</figcaption>
</figure>
</div>
</div>
<div class="col-xl-4">
<div class="d-flex justify-content-center">
<figure>
<img src="https://via.placeholder.com/150">
<figcaption class="text-center">B</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
I have a code like below - columns with full-width images.
<div class="col-3">
<img src="..." class="w-100" />
<div>Name</div>
</div>
As images can be of different size, it's not guaranteed that content below images will be displayed in one line (image's height is supposed to differ, depending on image's width).
In other words, when an image within .col is 200 px width, should be 200 px height, etc. (width = height).
Example 1 with css:
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
.img-prev {
height: 200px;
overflow: hidden;
}
.img-prev img {
max-height: 100%;
width: auto;
max-width: inherit;
margin: auto;
display: block;
}
<div class="container">
<div class="row">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
Example 2 html:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
</div>
</div>
Example 3 with jq:
var imgs = $('.img-prev>img');
imgs.each(function(){
var item = $(this).closest('.img-prev');
item.css({
'background-image': 'url(' + $(this).attr('src') + ')',
'background-position': 'center center',
'-webkit-background-size': 'cover',
'background-size': 'cover',
});
$(this).hide();
});
.img-prev {
height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="container">
<div class="row img-list">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
</div>
</div>
try this one,
<div class="container">
<img src="loginBackground.jpg" class="img-fluid" alt="Cinque Terre" width="200" height="200">
</div>
I'm attempting to create the following (mockup) with Bootstrap
https://i.stack.imgur.com/vkgBu.jpg
The idea is that each of those squares is an image and I'll have Javascript control when they appear/disappear when the background image is clicked. What I'm having trouble with is getting the little squares to stack on top like I have it. I've done research here, tried a bunch of things on my own, but get close but no cigar.
This is the closest I've come (testing with 1 row first).
https://i.stack.imgur.com/mqTc1.jpg
The squares line up next to eachother pretty well however they aren't showing within the same grid column/row correctly.
Relevant HTML:
<div class="container-fluid">
<div class="row-centered">
<div class="row row-centered">
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
</div>
</div>
<div class="row row-centered">
<div class="col- col-centered">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-">
<img src="resources/images/grey.jpg" class="character-img">
</div>
</div>
</div>
CSS:
.character-img{
position: relative;
z-index: 10;
}
.stock-img{
position: relative;
z-index: 20;
}
EDIT:
Updated version yields slightly better results? Included adding the blue boxes to the second row.
HTML
<div class="container-fluid">
<div class="row-centered">
<div class="row row-centered">
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
</div>
</div>
<div class="row-centered">
<div class="row row-centered">
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img" onclick="StockCount();" />
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
<img src="resources/images/blue.jpg" class="stock-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
<div class="col-2">
<img src="resources/images/grey.jpg" class="character-img">
</div>
</div>
</div>
</div>
CSS
.character-img{
position: relative;
z-index: 10;
}
.stock-img{
position: relative;
z-index: 20;
}
Result: https://imgur.com/vd3IZsP
Based on the images you've shown us to depict your desired outcome, I think Bootstrap is a smart choice. Much of what you want to do in your layout can be achieved using native classes. But it's also pretty apparent that you lack a fundamental understanding of the Bootstrap Framework, and I would strongly encourage you to revisit their documentation.
A full example of the structure you're trying to achieve can be viewed at: https://www.bootply.com/SwuSKmlKWe
But let's look at the HTML of a single 'box' item:
<div class="col-6 col-md-4 col-lg-3 mb-4">
<div class="h-100 bg-secondary p-4">
<img src="//placehold.it/200x200" class="rounded-circle img-fluid d-block mx-auto" />
<div class="row mt-4">
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
<div class="col-3 text-center mb-2"><img src="//placehold.it/50x50" class="img-fluid" /></div>
</div>
</div>
</div>
The first <div> element is a column wrapper that supplies information on the breakpoints that will affect the display. From left to right it is written with the smallest breakpoint (col-*) to the largest. If we were to translate this to something readable it might read:
At the smallest breakpoint use 6/12 columns. At the medium breakpoint
begin using 4/12 columns, and at the large breakpoint use 3/12
columns.
Note: col-sm-* exists but was not used here. Because a 'small' breakpoint was not used Bootstrap will default to the next smallest (in this case col-6
Inside the column wrapper we have another wrapper with several classes:
.h-100 helps us create equal-height items regardless of whether the
content dictates a smaller height.
.bg-secondary is a utility class that provides the dark background color
.p-4 is a utility class that provides padding on both the X and Y margins (4 indicates the 'level' of padding and can be as low as 0 and as high as 5)
At this point we start seeing the actual content. Your primary image has several classes that affect its shape and its position:
.rounded-circle is an image thumbnail class that forces a circular border radius.
.img-fluid is a responsive class that helps the image size up and down proportional to the element in which it resides.
.d-block transforms the img into a block-level element
.mx-auto sets the X margins to 'auto' which, in combination with d-block, centers the image.
From here we reach the 8 button/images referenced in your original post. The Bootstrap Grid is the perfect solution for this sort of organization, but since we're already working with content inside a Grid Element we need to create a new .row.
Inside the new .row we have a single breakpoint column (.col-3) with a couple of utility classes: text-center centers the content and mb-2 sets the bottom margin in a similar way that the p-* utility class alters padding.
Actually the image is 450*450pixels (both height and width is 15.88cm)
so i want to adjust them in equally to screen please see my screen shot and as you see the name also came in the bottom of each image the name should not so much big and small too it just fit with the image
img {
padding float: left;
border-radius: 150%;
}
<h1>ACTOR</h1>
<img src="img/chadwick.jpg" alt="chadwick" height="15%" width="15%">
<img src="img/michael.jpg" alt="michel" height="15%" width="15%">
<img src="img/lupita.jpg" alt="lupita" height="15%" width="15%">
Bootstrap 3 solution
HTML structure
<div class="row">
<div class="col-...">
<img ...>
<h5>...</h5>
</div>
</div>
Added padding-left and padding-right to each column to make space. Added margin-top to <h5> (Could be something else).
Example
.my-row>div {
padding: 0 7vw;
}
.my-row h5 {
margin-top: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row my-row">
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 1</h5>
</div>
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 2</h5>
</div>
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 3</h5>
</div>
</div>
Bootstrap 4 solution
<div class="row text-center">
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="chadwick"></div>
<div>chadwick</div>
</div>
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="michel"></div>
<div>michel</div>
</div>
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="lupita"></div>
<div>lupita</div>
</div>
</div>