Tips on how to position text alongside an image using Bootstrap and CSS

Currently, I am in the process of creating a web app and I am seeking advice on how to properly align images with text. Presently, my setup looks like this: https://i.sstatic.net/Xy9Th.png

I am aiming to position the image on the left side with its corresponding description displayed on the right. The code snippet I have been utilizing is as follows:

<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="https://images-na.ssl-images-amazon.com/images/I/91epzdXTTHL._SX300_.jpg" alt="Lights" style="width:20%">
      <div class="caption">
        <pelicula tipo="accion" calificacion="Mayores de 13" estreno="26 de abril de 2019" ></pelicula>
        <titulo>Titulo: Avengers Engame</titulo><br />
        <director>Dirección: Joe and Anthony Russo</director><br />
        <productor>Producción: Kevin Feige</productor><br />
        <guion>Guión: Cristhoper Markus y Stephen McFeely</guion><br />
        <musica>Música: Alan Silvestri</musica><br />
        <duracion>Duración: 181 minutos</duracion><br />
        <productora>Productora: Marvel Studios</productora><br />
        <Presupuesto>Presupuesto: 356.000.000 $</Presupuesto><br />
        <Recaudacion>Recaudación: 2.800.000.000 $</Recaudacion><br /
        <Comentarios> Comentario: Una de las peliculas mas esperadas del año. El desenlace final la guerra del infinito. </Comentarios><br />
      </div>
    </div>
  </div>
</div>
css

Answer №1

Consider sharing a Codepen demo as it could benefit fellow developers. You can achieve this by utilizing the power of flexbox:

.thumbnail {
  display: flex;
}

Alternatively, you could also explore using the bootstrap grid system or implementing CSS float.

Answer №2

utilize bootstrap flex to implement https://getbootstrap.com/docs/4.5/utilities/flex/ 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex align-items-center p-2 text-white-50 rounded shadow-sm" style="background-color:var(--purple)">
  <img src="https://images-na.ssl-images-amazon.com/images/I/91epzdXTTHL._SX300_.jpg" alt="Lights" style="width:30%">
  <div class="lh-100 ml-3">
    <div class="caption">
      <pelicula tipo="accion" calificacion="Mayores de 13" estreno="26 de abril de 2019"></pelicula>
      <titulo>Titulo: Avengers Engame</titulo><br />
      <director>Dirección: Joe and Anthony Russo</director><br />
      <productor>Producción: Kevin Feige</productor><br />
      <guion>Guión: Cristhoper Markus y Stephen McFeely</guion><br />
      <musica>Música: Alan Silvestri</musica><br />
      <duracion>Duración: 181 minutos</duracion><br />
      <productora>Productora: Marvel Studios</productora><br />
      <Presupuesto>Presupuesto: 356.000.000 $</Presupuesto><br />
      <Recaudacion>Recaudación: 2.800.000.000 $</Recaudacion><br / <Comentarios> Comentario: Una de las peliculas mas esperadas del año. El desenlace final la guerra del infinito. </Comentarios><br />
    </div>
  </div>

Answer №3

To make use of the flex feature in CSS, simply include display: flex; in the .thumbnail class. If you need further guidance on using display flex, check out these helpful resources:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://www.w3schools.com/css/css3_flexbox.asp

<div class="row">
<div class="col-md-4" style="background: yellowgreen;">
 <div class="thumbnail" style="display: flex;padding: 10px;">
      <img src="https://images-na.ssl-images-amazon.com/images/I/91epzdXTTHL._SX300_.jpg" alt="Lights" style="width:20%;">
        <div class="caption" style="margin-left: 20px; ">
            <pelicula tipo="accion" calificacion="Mayores de 13" estreno="26 de abril de 2019" ></pelicula>
            <titulo>Titulo: Avengers Engame</titulo><br />
            <director>Dirección: Joe and Anthony Russo</director><br />
             <productor>Producción: Kevin Feige</productor><br />
             <guion>Guión: Cristhoper Markus y Stephen McFeely</guion><br />
            <musica>Música: Alan Silvestri</musica><br />
            <duracion>Duración: 181 minutos</duracion><br />
            <productora>Productora: Marvel Studios</productora><br />
            <Presupuesto>Presupuesto: 356.000.000 $</Presupuesto><br />
           <Recaudacion>Recaudación: 2.800.000.000 $</Recaudacion><br /
          <Comentarios> Comentario: Una de las peliculas mas esperadas del año. El desenlace final la guerra del infinito. </Comentarios><br />
       </div>
</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

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

I'm encountering a problem with establishing a connection between two users. I have already installed express and socket.io, but for some reason, the message is not getting through to the receiver's end. The code seems to be running fine as I can ...

javascripthtmlcssjson

Press the button in an HTML document to activate JavaScript

What could be the issue with my code? I have a button in HTML <a class="btn btn-warning btn-mini publish-btn" href="#" data-rowid="@computer.id" data-toggle="modal" data-target="#myModal">Outdated</a> and my modal <fieldset style="text-al ...

javascriptjqueryhtmlcsstwitter-bootstrap

Dynamic placement of divs when new content is added to the page

Before we begin, I'll provide you with the complete HTML code of my webpage: <div align="center"> <img src="http://questers.x10.bz/Header.png" style="position: absolute; margin-left: -440px; box-shadow: 0px 3px 12px 2px #000;" class="rotate" ...

htmlcss

My CSS seems to be causing an issue and preventing the function from running correctly. Now I just need to

I'm currently working on a project and following a tutorial to help me create a navigation bar. The tutorial I am using can be found here: https://www.youtube.com/watch?v=gXkqy0b4M5g. So far, I have only reached the 22:05 mark in the video. I have su ...

javascriptcssonclicktoggle

Issue with dynamically adjusting flex box width using JavaScript

Currently, I am developing a user interface that heavily relies on flexbox. The layout consists of a content area and a sidebar that can be toggled by adding or removing a specific class. Whenever the sidebar is toggled, the content area needs to be manua ...

javascripthtmlcssfirefoxflexbox

What are the steps to executing Inline-navigation on a website?

Is there a way to navigate within the same web page by moving the cursor to a specific division that contains all the data when clicking a button on the navigation bar? ...

javascriptjqueryhtmlcss

Managing the vertical size while adjusting the window dimensions

I'm currently facing a dilemma while working on a webpage, and I could use some assistance. If you check out this JSFiddle link, you'll get an idea of how my design functions. I have a div table with another table as an overlay on top, creating ...

cssscaling

What is the best way to position <div> elements?

I'm having trouble aligning two elements to create columns and adding a footer. Currently, the elements are stacked horizontally and the footer is inline with them. How can I adjust the formatting of the page? h1 { color: #225522; margin: 0px ...

htmlcss

Is it possible to create a CSS-only solution that can adapt variable content to a vertical grid without using JavaScript?

I am currently facing a minor issue with a website I am working on that, while not a major problem, would be great to resolve. The site, including all promotional materials for the event it represents, has been designed based on a precise square grid. Ever ...

javascripthtmlcss

How can I specifically target and count children from a certain class using CSS selectors?

Consider this HTML structure with items arranged at the same level: <div class="h2">Title: Colors</div> <div class="pair">Hello world (1)</div> <div class="pair">Hello world (2)</div> <div class="pair">Hello wo ...

htmlcsscss-selectors

Equal vertical alignment in the center using flexbox

My flexbox layout is set up as shown in the code snippet below: html { height:100%; width:100%; } body { display:flex; flex-direction:column; align-items:stretch; height:100%; width:100%; margin:0; background-color:grey; } header { b ...

htmlcssflexboxvertical-alignment

Scrolling to the next div will automatically align it in the center of the screen for the user

I am in the process of creating a single-page website and I would like to stack multiple divs on top of each other, all approximately 400px in size (with variations). Instead of using a smooth scroll, I want the page to jump to the next div and have it cen ...

javascriptjquerycsshtml

Retrieve text from an element using jQuery when triggering "mouseenter" on a different element

Is there a way to retrieve the text from an element while simultaneously triggering a 'hover' action on another element? Here is an illustration: I am trying to gather all available colors, but the color names are only visible upon hovering ove ...

javascriptjqueryhtmlcss

Replace the arrow and implement collapsible div using CSS

My HTML code has the following structure: <ul id="urlcss"> <li class="nav-submenu"> <a class="collapsed" href="#" data-toggle="collapse" data-target="#submenu0"> ...

javascripthtmljquerycssbootstrap-4

Styling emails in an inbox with CSS

I am developing an email application and aiming for the inbox layout to be similar to that of Mac Mail. The emails are fetched from a database using ajax, outputting to XML. I then loop through the entries to extract the necessary elements. My concern li ...

htmlcsslist

``The flex item remains on the same row and does not move to the next one (

What could be causing the flex item to not move to the next row? The flex item seems to just shift to the side instead of wrapping. .section-header { border-top: 1px solid #eee; //padding-bottom: 20px; background: blue; } .section { margin-top ...

htmlcssflexbox

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png Current Situation: #newOrderControl { border-style: solid ...

htmlcss

Alignment text centrally in a button

I'm currently facing an issue with vertically aligning the text within a button to the center. We are using Bootstrap buttons across different devices and platforms, and everything seems to be working fine except for one specific device where the alig ...

cssbootstrap-4ngx-bootstrap

Gradually Generated HTML website

Recently, I've been attempting to create a Sign-UP form using HTML and CSS in Notepad++, but I'm encountering a problem. Every time I try to test it on Chrome, the page loads incredibly slowly. I'm not sure if it's a configuration error ...

htmlcssbootstrap-4notepad++

Learn how to align a form to the right using HTML, CSS, and Bootstrap

I am completely new to front-end technology. I have been attempting to write some code for my backend app using Html, Css, and Bootstrap. Currently, I am trying to place a search form on the right side of my webpage. Can anyone help me figure out what I am ...

htmlcssbootstrap-4