enter image description hereSo I am trying to get the last image to fall into the bottom left of the middle image however I can't get my image latch on to the bottom, instead, even if I make a new row, or use clearfix, the image will attach on to images/text/breaks below it.
<img src="https://via.placeholder.com/970x90" class="img-fluid" width="100%">
<img src="https://via.placeholder.com/970x400" class="img-fluid" width="100%">
<img src="https://via.placeholder.com/970x400" class="img-fluid card-img-overlay mt-auto" width="30%" height="30%">
Also I am trying to get my code all in html and none in css so bootstrap answers are greatly appreciated.
You can use col class of bootstrap for that.
<div class="row">
<div class="col-12">
<img src="https://via.placeholder.com/970x90" class="img-fluid" width="100%">
</div>
<div class="col-12">
<img src="https://via.placeholder.com/970x400" class="img-fluid" width="100%">
</div>
<div class="col-12">
<img src="https://via.placeholder.com/970x400" class="img-fluid card-img-overlay mt-auto" width="30%"
height="30%">
</div>
</div>
If you can explain a little more, maybe with screenshoots... I am guessing you are trying to work with CSS and Bootstrap... right? Please create a link for your code or send the code ... It´s easier this way... Give us more information so we can help you better! Take care buddy!
Related
I am a beginner in web designing. I know some basics about layout in CSS.
I am tried to create a blog post layout, given in the picture below.
see image layout
Please help me to do that.
Welcome to StackOverflow! As heads up, usually you will want to come here for more specific questions to solve problems with your code, or to explain weird behavior you didn't quite understand. Your question is a little bit too open ended to be answered here but I can help you get started:
For starters, start thinking about translating every box in your picture into an HTML div. If you break each part of that picture into divs it can be a good foundation to add your css styling on top of. In your case, you might want something like this:
<div id="articleList">
<div id="article_1">
<div id="articleImage_1">
<img src="articleImage_1.jpg" alt="Picture #1">
</div>
<div id="articleContent_1">
<div id="articleTags_1"></div>
<div id="articleTitle_1"></div>
<div id="articleAuthorNameAndCommentsSubheader_1"></div>
<div id="articleBody_1"></div>
</div>
</div>
<div id="article_2">
<div id="articleImage_2">
<img src="articleImage_2.jpg" alt="Picture #2">
</div>
<div id="articleContent_2">
<div id="articleTags_2"></div>
<div id="articleTitle_2"></div>
<div id="articleAuthorNameAndCommentsSubheader_2"></div>
<div id="articleBody_2"></div>
</div>
</div>
</div>
Of course you would be generating each row inside a for loop or .map() type function. You would also add in your .css in a 'class' attribute for every div.
Please let me know if you find this helpful by selecting my post as the answer, and don't be shy if you have any more questions :)
If you know about boostrap than you can use this boostrap card to create that layout you want. Here is the sample code for it.
<div class="card w-50">
<div class="card-img-top d-flex align-items-center bg-light">
<div>
<img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?
text=Image" alt="Card image cap">
</div>
<p class="col p-2 m-0">Text next to the right of the image</p>
</div>
</div>
I am using the bootstrap framework, I am looking to have 3 images as shown in the jsfiddle link below act in a responsive manor when the window size changes/monitor size is too small to display the full sized images. It is important the images remain on the same line (if possible) with no spacing in between.
<img src="http://via.placeholder.com/660x160.png"><img src="http://via.placeholder.com/350x160.png"><img src="http://via.placeholder.com/350x160.png">
Thanks
https://jsfiddle.net/mztyoy7q/
Add a class to the image tags, and don't forget to add the bootstrap!
Just make sure you link the bootstrap, and you can use this free CDN:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
and add the class
class="img-responsive"
to your img tags.
JSFiddle
EDIT: If you want the images on the same line, just create a couple divs.
first, create a parent div,
<div style="display:inline-block; width:100%; height:auto; background-color:#ff0000;">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
This div element will be red with 100% width, and automatically resizing height.
Then add divs between every image with the style float:left; like so:
<div style="display:inline-block; width:100%; height:auto;background-color:#ff0000;">
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
</div>
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
</div>
Here is the updated JSFiddle If this works, please let me know!
Wrap your images to some grid/columns (e.g. .col-*) and make these images to fill 100% of available space (.img-responsive). This is a clean and elegant way to do it, using just bootstrap:
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
</div>
https://jsfiddle.net/tvv89L1j/1/
About removing spaces, the easiest way would be just add your own styles to overwrite padding that bootstrap adds. You need to set padding-left and padding-right to 0 for columns (you can see where that padding comes from in browser inspector, of course).
This feels like a very simple problem that I am brain farting on. I have 3 images that I would like to display a certain way. Basically I want one image to fit a col-md/sm/xs-7 and 2 images to stack on top one another autofitting to col-md/sm/xs-3. All wrapped between a col-md/sm/xs-1 on either side.
I cannot figure out what CSS I need to tell the image to resize to that of the column. Any ideas?
Something like this?
<div class="row">
<div class="col-md-7">
<image class="img-responsive" src="largeimage.jpg" width="200" height="400"/>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-3">
<image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/>
</div>
</div>
<div class="row">
<div class="col-md-3">
<image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/>
</div>
</div>
</div>
</div>
I don't quite understand what exact way you are trying to arrange pictures but I think this should help you. If you paint me a picture of how you want the pictures arranged I'll tailor my answer to you.
Edit: Ok, I think I might(?) understand now and this is my solution. You'll have to either size the images the way you want. Or, hopefully they are already the size you want it and will fit nicely. Give this a try.
I'm writing a website in HTML5 and Bootstrap 4 and I'm trying to turn a square image into a circle. In Bootstrap 3 this was easily do-able with .img-circle, but now I can't seem to get it to work and I can't find any answers online.
Has Bootstrap dropped the img-circle class or is my code messed up?
It goes something like this:
<!-- Within a tab-content div -->
<div class="col-xs-7">
<img src="img/gallery2.JPG" class="img-circle" alt="HelPic">
</div>
Hope somebody can help me out :)
It's now called rounded-circle as explained here in the BS4 docs
<img src="img/gallery2.JPG" class="rounded-circle">
Demo
In Bootstrap 4 and Bootstrap 5 it was .rounded-circle
Usage :
<div class="col-xs-7">
<img src="img/gallery2.JPG" class="rounded-circle" alt="HelPic>
</div>
See migration docs from bootstrap.
Now the class is this
<img src="img/img5.jpg" width="200px" class="rounded-circle float-right">
I arrived here via google because I couldn't get rounded edges on images, here's how I solved;
.rounded-xl {
border-radius: 1.5rem;
}
I just started using Bootstrap and it's awesome so far. However I have one question, I created a content container and put a picture in it and I'm only going to have one in the row and I want it to go in the center of the page. I have tried a lot of things but to no avail, they don't work. Any help is appreciated! I'm also using Bootstrap version 3.3.6
This is my code for the container
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="random.jpg" alt="...">
<div class="caption">
<h3><center>I want the whole container in the center of the page.</center></h3>
</div>
</div>
</div>
</div>
</div>
Bootstrap has built in classes for you to use instead of the default tag. Try this for your image:
<img class="center-block" src="yourimage.png" />