What is the best way to display content next to an image, as well as below the image once it finishes?

Currently, I am working on customizing my blog posts in WordPress. My goal is to have the content of each post displayed next to the post thumbnail, and once the image ends, the content should seamlessly flow underneath it from the left side.

I have implemented a layout using Bootstrap's grid system with 6 columns for the thumbnail and 6 columns for the content. However, I am now faced with the challenge of ensuring that the content automatically fills the remaining space below the image. Any suggestions on how I can achieve this effect using CSS or Bootstrap?

htmlcsswordpressbootstrap-4text-alignment

Answer №1

If you're working with Bootstrap, the current setup makes it impossible to achieve what you're looking for.

One workaround is to set it to 2 columns at 50%, with the image in one column and all text/content in the other, which will display similarly to your desired layout.

You may need to use a col or col-12 and place both the image and text in the same area.

Think of it like how old school WordPress content editors handle image alignment.

For example, here's some code you can reference to make the text wrap correctly. You can check out the provided jsfiddle link for a live demo:

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img src="https://via.placeholder.com/150">
      Text goes here
    </div>
  </div>
</div>

Check out this working example on JsFiddle

Answer №2

Here is an example of how to structure your HTML code:

Create a Container:

<div class="container">
  <div class="row">
    <div class="col">
      <img class= "pull-left" style="margin: 0px 10px 0px 0px;" src="https://via.placeholder.com/150" width = "150">
      <h1>
          My Text Heading
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum ultrices mauris eu eleifend...

...ante sed tempus ultrices. Maecenas eget suscipit lectus. Cras sodales, est vel finibus venenatis...
      </p>
    </div>

  </div;
</div>

Check out the Fiddle for interactive examples:

https://jsfiddle.net/guruling/xeyLk1qb/1/

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

positioning a text input in the center instead of at the top of the page

Hello everyone, I am just starting out with HTML and I have a question. How can I make the Username: <input type="text" name="Username" style="- margin-top: 200px;"> appear in the center of the page instead of at the top? I've tried changing the ...

javascripthtml

Optimizing VueJS applications with browser caching features for faster loading

I've encountered an issue with my VueJS app. After running npm run build, a new set of dist/* files are generated. However, when I upload them to the server (replacing the old build) and try to access the page in the browser, it seems to be loading th ...

htmlvue.jsbrowser-cache

Incorporate extra padding for raised text on canvas

I have a project in progress where I am working on implementing live text engraving on a bracelet using a canvas overlay. Here is the link to my code snippet: var first = true; startIt(); function startIt() { const canvasDiv = document.getElement ...

javascripthtmlcsscanvas

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

javascriptjqueryhtmlcsstwitter

Sending data through forms

I'm having trouble storing values input through a dropdown menu in variables event1 and event2, despite trying global declarations. How can I successfully store a value to both variables and pass it to the JavaScript code? Thank you. <!DOCTYPE HT ...

javascripthtmlcssforms

Remembering position in JSP using Java Beans

In my "Web Engineering" assignment, I am tasked with developing a Web Application game using JSP, Servlets, and Java Beans. The game mechanics are already in place with the Servlet controlling the algorithms, JSP handling the Model/View, and Beans managing ...

javascriptjqueryhtmljspjavabeans

Is it possible to align images vertically with text in a multi-column Bootstrap 4 container?

Inquiring on how to achieve vertical center alignment of text and images for a website section similar to the one shown in this image: https://i.sstatic.net/s8gNh.jpg. The intention is to align the logos and the corresponding text of company names situated ...

htmlcsstwitter-bootstrapbootstrap-4

What is the process for generating a GET request for selected checkboxes and subsequently showcasing the data on an HTML webpage?

Currently working on an app project and need assistance with implementing a feature. I have successfully set up a POST method for the checkboxes that are checked, but I am unsure how to retrieve this data and display it on my HTML page using a GET method ...

javascripthtmlajaxcheckboxget

Exploring the Latest Features: Using Angular 7 with Bootstrap Collapse for Dynamic Aria-Controls

I am currently working on creating my own component to use within an *ngFor loop. I am facing an issue where I need a unique value for my Collapse feature. Right now, when I click on the second main row in the table, the collapse feature only shows the inn ...

htmlangularbootstrap-4

What is the functionality behind this unique SCSS mixin that combines flexbox and grid layouts?

Discover a SCSS mixin for creating flexbox/grid layouts HERE. Take a look at the complete mixin code below: @mixin grid-col( $col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $condensed: false, ...

htmlcsssassflexboxgrid-layout

Alignment in a vertical direction using Bootstrap

I am looking to align two divs vertically, with one in the center and the other at the bottom. I would like to achieve this using the bootstrap grid system. Here is my component: .loading{ position:fixed; top:0; left:0; ...

reactjsbootstrap-4vertical-alignment

How can I adjust my settings so that my image resizes from the center rather than the top left corner?

I'm having an issue with my code for resizing images on rollover - the image is currently resizing from the top left corner instead of from the center. How can I adjust it to resize from the center of the image? <script> $('i ...

jqueryhtml

Should I incorporate PHP/HTML code or opt for using a function instead?

I'm currently exploring the most effective method for integrating HTML/PHP code into various pages, such as headers, footers, and other repetitive sections. Would it be better to use include_once(php file) (even if it's used multiple times on a ...

phphtmlfunctioninclude

Is there a way to effortlessly scroll an element when the CSS overflow property is designated as auto?

I need help with creating a testimonial section where two divs automatically scroll inside a fixed-height container. Currently, only one div is scrolling while the other remains static in my code. I have implemented JavaScript for automatic scrolling wit ...

javascripthtmlcssbootstrap-4frontend

Implementing a function to load HTML pages upon clicking a button with JavaScript

I need help creating a button that loads an HTML page using JavaScript, without redirecting to the page. However, the current code I have is not loading the HTML page as desired. Here is the code snippet in question: <!DOCTYPE html> <html> &l ...

javascripthtmlajax

JavaScript generated form fails to submit

I am currently facing an issue with submitting form data to a PHP file when it is generated using JavaScript. I am unsure of how to resolve this problem. The form submission works fine on a test .html file by itself, but not when it is generated by JavaScr ...

javascriptphpjqueryhtmlforms

Is there a way to create a universal script that works for all modal windows?

I have a dozen images on the page, each opening a modal when clicked. Currently, I've created a separate script for each modal. How can I consolidate these scripts into one for all modals? <!-- 1 Modal--> <div class="gallery_product col-lg-3 ...

javascripthtmlcssbootstrap-4bootstrap-modal

The submit button fails to function properly in the presence of multiple fields

Encountering an issue where the Submit button becomes unresponsive when multiple addresses are generated. To resolve this, I attempted to use JavaScript. @foreach ($userDetails as $addr) <div class="order_container"> <input type="hid ...

javascriptphphtmllaravellaravel-5

Enlarging the modal overlay

My Angular/Bootstrap app features a small text area within a modal window that often contains lengthy content exceeding the size of the textarea and modal itself. I am looking to incorporate a button within the modal window that, when clicked, opens a lar ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

Can someone explain why my button icons are not aligning to the center properly?

I have a small issue with the icons I pulled from react-icons - they appear slightly raised within the buttons. How can I position them in the middle? That's my only query, but I can't post it alone due to mostly having code in my post. What an ...

javascriptcssreactjs