Position the div element beside the image, rather than below it

I am having an issue with Bootstrap where the card I want to display on the right of an image is appearing below it instead.

I attempted to use the display: inline-block property, but unfortunately, that did not solve the problem. I also explored other solutions suggested on this platform, but none of them seemed to work in my case. Therefore, I kindly request not to suggest those again.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52303d3d26212620332212677c617c627f333e223a3363">[email protected]</a>/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>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

If you want to place a card next to an image using Bootstrap, you can utilize the grid system. In this example, the col-md-4 class is applied to set the image to occupy four out of twelve columns, while the col-md-8 class is used for the card to occupy the remaining eight columns. If you encounter the issue of the card appearing below the image, it might be due to the width of the image surpassing the column's capacity. To resolve this, simply add the img-fluid class to the image so that it becomes responsive and fits within the designated column.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e3528352b367a776b6b73722a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWLktjv1UHkgIin25tli33/VStWkFw/DAnYcBaFiFmPziampPgNGsnqdBjnBbdAgLzIDiiawCn0adveOwf" 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>

Answer №2

In the parent element, you have the option to apply these styling rules:

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

Alternatively, in Bootstrap, you can utilize the 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 AT 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>

Answer №3

If it suits your layout, you may consider using the .d-inline-block class for both the img and the .card.
*While not specifically endorsed, this approach can achieve what you're looking for.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce9f2eff2ecf1bdb0acb4bded">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Visual Delights on the Menu

I am having trouble adding a "Home" picture to my menu. It keeps showing up as a blank square, even though I have tried using both .png and .jpg formats. Here is the code that I am currently using: <div id='cssmenu'> <link rel= ...

htmlcssmenu

Paragraph opacity adjustments can alter both the text and background opacities

Is there a way to change the opacity of only the background of a paragraph without affecting the text? When I try to adjust the opacity, it changes both the text and the background. How can I resolve this issue? HTML <div id="opener"> <p id="in ...

htmlcssopacity

Troubleshooting: WordPress failing to launch Bootstrap Modal

I recently transformed my PHP website into a WordPress theme, but unfortunately, I am facing an issue with my Bootstrap modal not opening in WordPress. ***Header.php*** <a id="modal_trigger" href="#modal" class="sign-in-up"><i class="fa fa-user ...

javascriptphphtmlwordpressbootstrap-4

Password confirmation on the login screen will be displayed in a single line

As someone who is relatively new to HTML/CSS, most of what I have learned has come from this platform or by searching for answers online. I am nearing completion of my assignment, but I am struggling to figure out how to display two label words on the same ...

htmlcssauthenticationlabelscreen

Methods for setting the value of a scope variable within a controller's function

I have a goal of presenting a page that calculates a balance in the background and displays it. To achieve this, I decided to separate the balance into its own directive. Here is the directive I have created: app.directive('smBalanceInfo', fun ...

javascripthtmlangularjsangularjs-directivepromise

What is the method to update a div containing the video title when a user clicks on a related video?

How can I make a div update with the title of the currently playing video when a user clicks on another video? I am having trouble finding an event in the API that lets me know when the video source has changed. Is there a specific event I should be listen ...

javascriptjqueryhtmlvideoyoutube-api

Adjusting background position using incremental changes through JavaScript

Although I have a strong background in PHP coding, using javascript is a new venture for me so I hope this question doesn't sound naive. My objective is to create a button that, when clicked, shifts the background-position of a specified DIV object b ...

javascriptcssonclickglobal-variablesbackground-position

Exploring ways to programmatically click on a button located beneath a text using the Selenium library in Python

I am interested in creating a bot that can automatically like comments on a web page. Each comment has a like and dislike button attached to it. The xPath for the comment is: //*[@id="commentText-40538697"]/span The xPath for the like button is: //*[@id ...

pythonhtmlseleniumxpathweb-scraping

Ensure the content spans the full width of the container without displaying an overflow scrollbar by using the "position: absolute

I'm looking to create a small red div that spans the full width at a fixed top position within another div that has an overflow scroll property. I've provided a jsFiddle link for reference: http://jsfiddle.net/mCYLm/2/. The problem arises when t ...

cssgoogle-chromeoverflowcss-position

When an anchor tag is embedded within a string response, ReactJS fails to render it as a clickable link

I am in the process of transitioning our code from Freemarker to React JS and I am encountering an issue with rendering anchor tags from a JSON string response. When I display this string in my React JS application, the anchor tags are appearing as plain t ...

javascripthtmlreactjsnext.js

Extension for Chrome

My goal is to develop a Chrome extension that, when a specific button in the extension is clicked, will highlight the current tab. However, I'm encountering some challenges. Currently, I have document.getElementById("button").addEventListen ...

javascripthtmlgoogle-chrome-extension

Submit information from an HTML form to a PHP script and then send the response back to the client using AJAX,

Looking to run a PHP script using AJAX or JavaScript from an HTML form and then receive the results on the HTML page. This is what my changepsw.php file looks like: <?php // PHP script for changing a password via the API. $system = $_POST['syst ...

javascriptphpjqueryhtmlajax

Elevate your design game by mastering CSS transformations for precise element

I am trying to center a div with a variable width using the following code: div { background: red; max-width: 400px; position: absolute; left: 50%; transform: translateX(-50%); } Check out my demo here While this code works well for centering, ...

csscenteringtranslateresponsive

Display only the offcanvas button

Having trouble with Bootstrap 5 offcanvas? The offcanvas doesn't hide when I click the button again. <button data-bs-toggle="offcanvas" role="button">Add to Cart</button> Every time I click the button again, the offcan ...

javascriptjquerybootstrap-5

Are there any CSS attribute configurations that I am overlooking?

Reviewing a colleague's CSS file, I stumbled upon an interesting section. They are a skilled CSS designer, so before jumping to conclusions, I wanted to make sure I am not missing something. In the code snippet below, it seems like they are unintenti ...

css

Refresh the page and witness the magical transformation as the div's background-image stylish

After browsing the internet, I came across a JavaScript script that claims to change the background-image of a div every time the page refreshes. Surprisingly, it's not functioning as expected. If anyone can provide assistance, I would greatly appreci ...

javascriptjqueryhtmlcss

Crafting numerous CSS templates

I am currently working on creating multiple boxes or templates (5 on each row) from a movie API. I have successfully retrieved all the necessary data and do not require a responsive design. https://i.sstatic.net/CNz9R.png The issue arises when I attempt ...

jquerycssajax

Fetch the contents of a div from a PHP page on a different domain and display it on another webpage

Hey there, I hope you're having a great morning! I'm currently working on setting up an affiliate box for our affiliates within Wordpress. I've managed to create it dynamically and you can check out an example here The values needed to cre ...

phpjquerywordpresshtmlload

What is the reason for index always being not equal to 0?

<script> var index = 0; $.getJSON("./data/data.json", function(json) { $.each(json, function(data) { var html = ""; if(index == 0) { console.log(index + " fir ...

javascriptjqueryhtml

What is the best way to say hello using jQuery?

I need some assistance with a task that involves entering my name into an input field, clicking a button, and having an h1 tag display below the input saying Hello (my name)! Unfortunately, I am struggling to figure out how to achieve this. Below is the H ...

javascripthtmljquery