``Can you help me with a tutorial for positioning text in front of an image using bootstrap?

How can I align text next to an image using Bootstrap? Here's an example of what I'm trying to achieve: this

This is the code I currently have:

<div id="picture">
        <img src="img/preview.jpg">
    </div>
    
    <div id="description">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br> 
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br> 
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>
htmlcssbootstrap-5

Answer №1

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0805051e191e180b1a2a5f4458445a47080f1e0b5b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-8">
      <img src="https://images.unsplash.com/photo-1656614291920-80ff97b2cf35?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" class="img-fluid">
    </div>
    <div class="col-4">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        <br> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div>
  </div>
</div>

-Bootstrap operates on a 12-grid system.

  • ``row`` consists of 12 grids.
  • We can segment all 12 grids using ``col``. for your design, I have allocated ``col-8`` for the image and ``col-4`` for the text.
<div class="container">
 <div class="row">
   <div class="col-8">
     <img>
   </div>
   <div class="col-4">
     //content
   </div>
 </div>
</div>

Answer №2

Consider attempting the following approach

<div class="container">
  <img class="col-6" src="">
  <p class="col-6">First line <br> Second line</p>
</div>

Answer №3

If you're looking to create a responsive layout, consider utilizing bootstrap's standard 12-column grid system.

<div class="container">
  <div class="row">
    <div class="col-6">
      <img src="" alt="image"/>
    </div>
    <div class="col-6">
      "content"
    </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

CSS elements not aligned properly with nav bar

I'm having trouble getting the images to float next to the nav box on my WordPress site. If you take a look at you'll see what I mean. Any suggestions? ...

cssimagewordpressnavigation

Choose the correct checkbox among several options

On my webpage, I am facing an issue with checkboxes. No matter which checkbox I click on, only the first one is getting checked. I can't figure out what the problem is. Initially, the checkboxes weren't showing as checked, but now only the first ...

htmlcssformscheckboxlabel

What is preventing the necessary form from being submitted?

I'm creating a mandatory form for my web development class, but I'm encountering some issues. I've copied the exact code from the course materials, and I'm not sure if it's a browser problem. When I click on the register button, on ...

htmlformslabel

Each time a nested collapse occurs, it triggers its parent collapse

I have come across some similar answers, but they all pertain to accordions, which I am not utilizing in this case. In my code, I have nested collapse items. You can view the code snippet here on CodePen $('#collapseOutter').on('show.bs. ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

What could be the reason my website is not saving the user input information to the database?

Hello! I am a novice programmer attempting to create a basic registration function on my website. I have set up a simple form for users to input their information, but I am facing an issue where the user data is not being stored in my database. ...

phphtmlmysqlpostmysqli

Searching for a specific value in a dropdown list during an iteration

Currently, I am iterating over an Ajax response to populate a JSON object in a select box. However, some of the JSON results may contain duplicate values. My goal is to check if a value already exists in the select box as I iterate through the loop. If a ...

javascriptjqueryhtmlloops

How can I modify the color of the text in a Contact Form 7?

I am looking to update the text color in my Contact Form 7 code provided below. -------------- <label> Your name [text* your-name class:accent class:form-fluid ] </label> <label> Your email [email* your-email class:form-fluid] </lab ...

csscontact-form-7

Change when the mouse departs

I am currently working on implementing a transition effect. My block consists of 3 main parts: Base block Hover image (coming from the top) Hover title (coming from the bottom) When hovering the mouse, there is also a background-color transition that o ...

htmlcsshovertransition

Unfortunately, the CSS3 feature of 'transform: scale()' does not function properly on any web browser except for Firefox

I am currently utilizing Vue CLI 3. Within the CSS, I have implemented a hover effect that scales up by 10% when hovering over the div. Here is the snippet of code: (this.boxData.scaleOnHover ? `-webkit-transform: scale(${this.scale}%); -moz-transform: ...

htmlcssvue.js

Obtain HREF tag from HTML in iOS

Trying to extract the value of an <a href> tag from my HTML code. <span class="meta"> <span itemprop="author" class="meta-author"> <a href="http://beta.morningnewsusa.com/author/kmnaing" title="Posts by James ...

htmlios

When the window size is reduced, the image continues into the next div

I need to create a page that displays text alongside an image. However, when the window size is minimized, the image overlaps with the text. Here is how it looks: https://i.sstatic.net/CBMh8.png To fix this issue, I am using the following HTML code: ...

htmlcssbootstrap-4

What is the best way to add a CSS link if a request is not made using AJAX?

My webpage, 'foo.html', retrieves data from a database using AJAX ('ajax.html?options=option1') to populate a table. The table is styled nicely with CSS that is linked to 'foo.html'. However, I also want the ajax.html page to ...

htmlcssajax

The function cannot be applied to d[h] due to a TypeError

Having some trouble with my code here. I'm trying to set up routes to display a gif using CSS animation when the page is loading. The gif shows up initially, but then everything fades out and the gif remains on the page. Additionally, I'm getting ...

javascriptcssangularjs

React Download Button: Easy way to offer file downloads on

I am trying to create a download button for users to download zip files from Cloudinary using React. I have attempted different methods to implement this feature, but so far, I have been unsuccessful. Whenever I click on the button, it modifies the route i ...

htmlreactjsjsxcloudinary

How can I fix the issue with Parallax scrolling not functioning properly? (Using Next.js Image + Tailwind)

What am I missing to get parallax scrolling to work? <div className="h-screen"> <div className="relative h-full w-full bg-cover bg-fixed bg-center bg-no-repeat"> <Image src="https://images.unsplash.com/photo-1454496522488-7a8e488e86 ...

cssnext.jstailwind-cssparallax

The width of an HTML input and button elements do not match

Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual re ...

javascriptjqueryhtmlcss

After moving a JavaScript application to heroku, the script appears to be nonfunctional

I developed a basic javascript application using mojs, an animation library, and aimed to host it on heroku. To begin with, I attempted the "heroku create" command to deploy the original app on heroku - although the app was accessible, the script did not f ...

javascripthtmlnode.jsanimationheroku

Switching image sources depending on CSS prefers-color-scheme: A guide

In my endeavor to incorporate the latest CSS prefers-color-scheme media query into my website, I encountered a challenge. I have an img (image) element featuring a very dark blue image, which clashes poorly with the new dark mode setting. Is there a simpl ...

htmlcss

Customized Bootstrap Dropdown with the ability to add text dynamically

I am working on a Bootstrap dropdown menu that allows users to generate expressions by clicking on the menu items. For example, when the "Action" item is clicked, it should insert {{Action}} into the textbox. The user can then type something like "Hello" a ...

javascripthtmljquerycssbootstrap-5

Adjusting CSS to realign images on various screen types

I am facing an issue with displaying a background image on a static web page. The height appears differently on various LCD screens. How can I ensure that the height adjusts to approximately 80% of the area? I have tried giving a percentage in the style fo ...

htmlcsstwitter-bootstrapbootstrap-4