What is the best way to align the text below the image using two columns defined in Bootstrap, one for the image and the other for the text?

I am currently working on a web page that has two columns - one for images and one for text. I want the text column to fill in the empty space beside the image. Can someone assist me with this? Thank you.

Existing Page:

https://i.sstatic.net/qTBPH.png

Desired Layout:

https://i.sstatic.net/B7Dn3.png

code:

<div class="container" id="fadein2">
  <br>
  <br>
  <div class="row">
    <?php
            $select_stmt=$db->prepare("SELECT * FROM bairro ORDER BY id DESC;");    //sql select query
            $select_stmt->execute();
            while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
            {
            ?>
      <a class="linha_paginas"></a>
      <br>
      <div class="col-sm-12 row">
        <div class="col-sm-12 col-md-12 col-lg-6">
          <br>
          <br>
          <div class="col-sm-12" align="middle"><a class="fancybox" href="upload/bairro/<?php echo $row['image']; ?>" data-fancybox-group="gallery"><img src="upload/bairro/<?php echo $row['image']; ?>" id="imagem_esp" class="imagem img-fluid"></a></div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-6">
          <div class="col-sm-12 texto_paginas" id="titulo_urgeirica">
            <?php echo $row['titulo'];?>
          </div>
          <br>
          <div class="col-sm-12" id="texto_urgeirica">
            <?php echo $row['texto']?>
          </div>
          <br>
        </div>
        <br>
      </div>
  </div>
  <?php
            }
        ?>
</div>
</div>

Answer №1

If you want to keep your image and text together, try combining them in one column and using the float property for the image.

img {
  float: left;
  width: 170px;
  height: 170px;
  margin-right: 15px;
}
<div class="row">

  <div class="col-lg-12 ">

    <p><img src="pineapple.jpg" alt="IMG place holder" style=""> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at ultrices magna, ac maximus sapien. Donec ultricies odio placerat, accumsan metus id, malesuada eros. Morbi at elit leo.
      In euismod magna eu imperdiet accumsan...
      
    </p>


  </div>
</div>

Answer №2

If you want to wrap text around an image, you can utilize the css property called shape-outside. Specifically, using shape-outside: polygon(); should work well for your needs.

For a demonstration of this technique, check out the first answer in this article.

Here's another helpful resource on implementing text wrapping around images using HTML and CSS: How to wrap text around an image using HTML/CSS

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

Flexbox ancestor causing Bootstrap 5 Carousel width to double

A peculiar issue arises with the Bootstrap 5 Carousel placed inside a Flexbox where it unexpectedly expands in width (pushing other flex-items aside) when transitioning between images. This behavior persists even when the immediate container is set to disp ...

Shadow effect is present under every cell in the table row

I am struggling to create an HTML table with proper vertical spacing between rows and a shadow effect beneath each row. Unfortunately, the shadow always ends up overlapping other table content. I have tried adjusting the positioning of elements and setti ...

What is the best way to divide widgets in a Wordpress Sidebar?

I am looking to customize the spacing between widgets in my Wordpress sidebar, similar to what is shown on this example site. Currently, my sidebar does not have the desired spacing. I have tried various CSS codes found online, but none of them seem to be ...

The overflowing issue with the Nextjs Tailwind Marquee Component is causing a display

I've recently developed a unique nextjs/tailwind component. This component displays an isometric marquee that scrolls horizontally. However, I'm facing an issue where the content overflows to the right and causes the page to become horizontally s ...

Tips for positioning items inside a container

I'm struggling to align a button with text inside of a well. Here is what I currently have: <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="well"><h4>Download our 2 ...

Implementing Sass mixin transition to specifically add transition-delay - a comprehensive guide

As I continue to enhance my front-end development skills and practice Sass to optimize my CSS code, I encountered a roadblock. After exploring resources and tutorials online, I created a global mixin in Sass named 'transition'. Here is the code: ...

Assistance from HtmlHelper and htmlAttributes are valuable in coding

I'm new to MVC 3 and using the Razor view engine. I want to add a custom attribute with a dynamic value to hidden input elements using the Html.Hidden extension method. In HTML5, we can use 'data-' prefixed attributes for this purpose like b ...

Switching over from using Flask-Bootstrap to Bootstrap-Flask

During the development of my Flask web app, I initially used Flask-Bootstrap with Bootstrap V3. However, as I require Bootstrap 4 features now, I have come across Bootstrap-Flask as a potential solution. It is essentially a version of Flask-Bootstrap desig ...

What is the purpose of a form that includes a text input field and a button that triggers a JavaScript function when the enter key is pressed?

<form action=""> <input id="user_input" onKeyDown="if(event.keyCode == 13)document.getElementById('okButton').click()" > <input id="okButton" type="button" onclick="JS_function();" value="OK"> </form> I'm trying to a ...

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

Transform the jQuery UI colorpicker slider into a jQuery Mobile compatible version

I'm not very familiar with JavaScript programming, so I'm feeling a bit lost while trying to understand the code in the jQuery Mobile library (the lack of comments doesn't help). I managed to create a colorpicker slider using jQuery UI, you ...

It is not possible to decrease the size of the image that is currently used as the background image

Three images are arranged in this manner: https://i.stack.imgur.com/u4PdK.png The HTML code for this setup is as follows: <div class="lb-controlContainer"> <div class="lb-closeContainer"> <a class="lb-close"&g ...

Creating a new project in ASP Net Core Angular using Bootstrap 4 for the SideMenu layout instead of Bootstrap 3

I am currently working on developing a website using Angular6, where I aim to have a vertical navbar for large screens and a top navbar with dropdown functionality for mobile devices. While searching online, I came across several examples that seemed overl ...

What is the best way to execute a second query in MySQL and PHP if the first query returns no results?

A dilemma I'm facing involves an html form passing values to a php file for query execution. The results are displayed, but now I want a scenario where if the initial query returns no rows (empty result), the same query should be executed on another t ...

Error: SyntaxError - Unexpected token 'if' found. Additionally, ReferenceError - berechnung is not defined

I keep encountering two error messages and I'm not sure where the issue lies: Uncaught SyntaxError: Unexpected token 'if' Uncaught ReferenceError: berechnung is not defined Any idea what might be causing this problem? I've reviewed t ...

Issues with the Tumblr platform's back-to-top button functionality

I am quite comfortable with HTML and CSS, but I'm struggling to make the 'back to top' button work on my Tumblr page. Can someone please give me a hand? I've included some JQuery code to make the text fade in and out when scrolling (inf ...

Utilize CSS transition to smoothly reveal a hidden div with a fading effect

I am trying to create a hover effect where a caption displayed over an image fades in with a background color change. I have attempted to use transitions but they do not seem to work for block elements. For the code and JSFiddle, please visit this link. ...

Identify and apply a special effect to the initial input element within a popup using jQuery

I have a variety of popups containing multiple input fields. I am aiming to emphasize the initial input element of each of my popups, without the utilization of ids: This is my current code snippet: function initializePopups(){ $('*[id*=Popup]&a ...

maintaining the alignment of one div's right boundary with another div's right boundary

---------------------- ----------------------------->edge X | | | | | logo | | dropdown menu ...

What steps should I take to ensure that clicking this button triggers the API request and returns the data in JSON format?

I'm attempting to have the button with id 'testp' return an api request in json format, however it seems to not be functioning properly. You can find the HTML code link here: https://github.com/atullu1234/REST-API-Developer-1/blob/main/js-bu ...