Question 45135 in Html Question posted in
Some basic documentation can be found here.

Put a div next to an image not under – Html

I am using Bootstrap and I have an image, and I want to have the card on the right of the image, but it is at the bottom.

I tried using display: inline-block, but that did not work. I looked at the other answers on the site and they did not work for me either, so please don’t recommend those.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Have Questions?</h5>
    <a href="#" class="btn btn-primary">FAQ</a>
    <a href="#" class="btn btn-primary">Contact Us</a>
  </div>
</div>
Tags:

3

Answers


  1. 0

    In your parent element you can use these styles

    display: flex;
justify-content: space-between;

    Or in Bootstrap: d-flex and justify-content-between classes:

    <div class="d-flex justify-content-between">
    <h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
    <img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
    <div class="card" style="width: 18rem;">
        <div class="card-body">
            <h5 class="card-title">Have Questions?</h5>
            <a href="#" class="btn btn-primary">FAQ</a>
            <a href="#" class="btn btn-primary">Contact Us</a>
        </div>
    </div>
</div>

    WITH TITLE IN THE TOP:

    <h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<div class="d-flex justify-content-between">
    <img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
    <div class="card" style="width: 18rem;">
        <div class="card-body">
            <h5 class="card-title">Have Questions?</h5>
            <a href="#" class="btn btn-primary">FAQ</a>
            <a href="#" class="btn btn-primary">Contact Us</a>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    To have a card next to the image using Bootstrap, you can use the grid system. In the code below, the col-md-4 class is used to specify that the image will take up four columns out of a possible twelve, and the col-md-8 class is used to specify that the card will take up the remaining eight columns. If you find that the card is appearing below the image, it may be because the image is too wide for the column. To fix this, you can add the img-fluid class to the image to ensure that it is responsive and will fit within the column.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" class="img-fluid" alt="Group Picture">
    </div>
    <div class="col-md-8">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Have Questions?</h5>
          <a href="#" class="btn btn-primary">FAQ</a>
          <a href="#" class="btn btn-primary">Contact Us</a>
        </div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    You could* use .d-inline-block if it is appropriate for your layout. You need to use it on both the img and the .card.
    *I’m not necessarily recommending this, but it does what you ask.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<img class="d-inline-block w-50" src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture">
<div class="card d-inline-block" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Have Questions?</h5>
    <a href="#" class="btn btn-primary">FAQ</a>
    <a href="#" class="btn btn-primary">Contact Us</a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search