Twitter Bootstrap Question posted in

I am trying to align right my image using bootstrap4 but it is not working-Twitter bootstrap

I am trying to align my image on the right, but it is not working.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="media">
    <img class="d-flex mr-3 img-thumbnail float-right" src="https://picsum.photos/200/100" alt="grand-buffet">
    <div class="media-body">
       <h2 class="mt-0">Weekend Grand Buffet <span class="badge badge-danger">NEW</span></h2>
       <p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
    </div>
 </div>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed this issue by replacing mr-3 with ml-3 and float-right with order-3

    Visit the following link for further details https://getbootstrap.com/docs/4.4/utilities/flex/#order


  2. 0

    Try replacing float-right with ml-auto in your img tag like below:

    <div class="media">
    <img class="d-flex img-thumbnail ml-auto" src="img/buffet.png" alt="grand-buffet">
    <div class="media-body">
       <h2 class="mt-0">Weekend Grand Buffet <span class="badge badge-danger">NEW</span></h2>
       <p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
    </div>
 </div>
    Login or Signup to reply.
  3. 0

    Add order-1 to img (Build-in property = minimal code):

    Change the order of content in media objects by modifying the HTML
    itself, or by adding some custom flexbox CSS to set the order property
    (to an integer of your choosing).
    https://getbootstrap.com/docs/4.4/components/media-object/#order

    .order-1 CSS:

    .order-1 {
    -ms-flex-order: 1;
    order: 1;
}

    Change the visual order of specific flex items with a handful of order
    utilities. https://getbootstrap.com/docs/4.4/utilities/flex/#order

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="media">
    <img class="ml-3 img-thumbnail order-1" src="https://picsum.photos/200/100" alt="grand-buffet">
    <div class="media-body">
       <h2 class="mt-0">Weekend Grand Buffet <span class="badge badge-danger">NEW</span></h2>
       <p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
    </div>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search