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;
}
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>
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!
<img class="img-responsive center-block"/>
<div class="col-sm-2 mb-xs-30 wow fadeInUp">
<div class="team-item">
<div class="team-item-image">
<img src="images/team/jy.png" alt="" />
I am trying to make all the images be located at center. However, I do not know which bootstrap code I should use.
I tried to use img-responsive at the top of the section, but failed.
The given code is part of the images which is the first box I gave.
From my understanding, you're trying to make a centered row, five equally spaced and centered columns of images and you are using bootstrap, here is a link to the solution.
So basically I need to set icons / labels over the thumbnail picture, how to do it with CSS and HTML? If possible I need it to be responsive. Thanks in advance.
EDIT: Sorry for not posting code, here is what I have tried using Bootstrap 3 and Font Awesome:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/test/test04.png" alt="thumb01">
<div class="col-xs-3 col-md-6">
<div class="delivery alert alert-success">
<i class="fa fa-truck" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
Delivery class:
.delivery{
position: absolute;
font-size: large;}
Ok. Firstly, if you are using some framework, look for a solution that uses it. Secondly, if you do not use a structure, you can use #media in CSS to make your elements responsives, and for the layout, what you are looking for is a thumbnail or picture card, search for it in internet if you encounter difficulties. You can work using the image and the icons inside a div, then just work with the elements using CSS (display and the float, for example). Have fun :)
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" />