CSS/Bootstrap to wrap a text on the side of a rounded image

bootstrap image and text side by side
bootstrap image with text to the right
bootstrap 4 wrap text around image
bootstrap carousel
bootstrap image size to fit
bootstrap circle image
bootstrap image caption
bootstrap image and text side by side codepen

I have this code below that shows a username and a location. I want to wrap the text below the username, but on the side of the rounded image. Can anyone help me?

Currently:

What I want:

HTML:

<div class="header">
    <img src="avatar.png" class="img-circle" />
    <a href="user.html" class="publisher-name">Username</a>
    <div class="post-location">
        Location
    </div>
</div>

CSS:

.header {background: #fff;padding: 16px; }
.header img{width: 36px;height: 36px;}
.header a.publisher-name {margin-left: 6px;color: rgba(0,0,0,0.87);font- 
    weight: 500;text-decoration: none;vertical-align: middle;font-family: 
    "Roboto", sans-serif; }
a.publisher-name {margin: 0;}
.post-location { font-size: 12px; margin-top: 0; }

Change your html to wrap the username and location with another div:

<div class="header">
    <img src="avatar.png" class="img-circle" />
  <div class="wrapper">
    <a href="user.html" class="publisher-name">Username</a>
    <div class="post-location">
        Location
    </div>
  </div>
</div>

Then, remove the margin-left on the username and add this CSS for your new wrapper class:

.wrapper {
  display: inline-block;
  margin-left: 6px;
}

How to wrap text around circular carousel in Bootstrap 4 , How to wrap the text around an image using HTML and CSS ? How to get circular buttons in bootstrap 4 ? How to align button to right side of text box in Bootstrap? Wrapping a text means adjusting/wrapping text around an image. In HTML, we can either align the image on the right side of the text, or to the left, or to the center. In CSS, besides these we can also insert the images in a circle or rectangle, etc. and can wrap a text around it.


Try implementing Flex!

.header {
  background: #fff;
  padding: 16px;
  display: flex;
}

.header img {
  width: 36px;
  height: 36px;
}

.header a.publisher-name {
  margin-left: 6px;
  color: rgba(0, 0, 0, 0.87);
  font- weight: 500;
  text-decoration: none;
  vertical-align: middle;
  font-family:
    "Roboto", sans-serif;
}

a.publisher-name {
  margin: 0;
}

.post-location {
  font-size: 12px;
  margin-top: 0;
}
<div class="header">
  <img src="avatar.png" class="img-circle" />
  <div>
    <a href="user.html" class="publisher-name">Username</a>
    <div class="post-location">
      Location
    </div>
  </div>
</div>

Wrapping text around rounded images, In this recipe, we will align text around images using default Bootstrap classes with the addition of the shape-outside CSS property. When using 2 columns the text will never get wrapped around the image. You should put the image and text in one column and give it full with. Then wrap the text and image in a div and float them to the left. Something in the line of this (code is an example and not tested):


You need to arrange in groups vertically or horizontally together, not to fit horizontally and vertically! - tag img - tag a and div tag => edit the layout of each group.

Images · Bootstrap, Documentation and examples for opting images into responsive behavior (so they you can use .img-thumbnail to give an image a rounded 1px border appearance. Align images with the helper float classes or text alignment classes. block  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.


Figures · Bootstrap, Documentation and examples for displaying related images and text with the rounded" alt="A generic square placeholder image with rounded corners in a  In this recipe, we will align text around images using default Bootstrap classes. Getting ready Navigate to the recipe6 page of the chapter 3 website, and preview the final result that we are trying to achieve.


Cards · Bootstrap, Cards support a wide variety of content, including images, text, list groups, links, and In the same way, links are added and placed next to each other by adding image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. You can change this as needed with custom CSS, grid classes, grid Sass​  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE


Images with Bootstrap | More HTML & CSS, Learn some tricks on how to use images with Bootstrap. Responsive Images - automatically fit the screen size; Aligning Images - center, left align, right align; Image Shapes - Round edges, etc. class="float-left"> <p>This text appears next to the image. And how can I wrap text around a circled image? CSS bouncing line loader animation html , css , animation It is because you have a heavy break between 49% and 50%. 49% { width: 100%; } 50% { left: 100%; } Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect: @keyframes loader-animation { 0% { width: 0%;