Guide on aligning text beneath and to the side of an image, and positioning them in the same row using CSS Bootstrap 4

I am looking to organize two different texts alongside and under an image within a single article. I also want these two articles to be displayed in the same row when the window size is col-md or larger.

https://i.sstatic.net/ZjigH.jpg The second article should be positioned below the first one when the window size is smaller than col-sm.

https://i.sstatic.net/i4Ahw.jpg

I attempted the code below but was unable to have them on the same row. How can I successfully align them in the same row?

<div class="row">
    <div class='col-4 col-md-2'>
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
    </div>

    <div class="col-8 col-md-4">
        <p>"Article 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
    </div>
</div>
<div class="row">
    <div class="col-12 col-md-6">
        <p>"Article 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
    </div>
</div>


<div class="row">
    <div class='col-4 col-md-2'>
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
    </div>

    <div class="col-8 col-md-4">
        <p>"Article 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
    </div>
</div>
<div class="row">
    <div class="col-12 col-md-6">
        <p>"Article 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
    </div>
</div>
cssbootstrap-4

Answer №1

To create a responsive layout, consider using display:flex; for the row and implement @media queries for different screen sizes. If you have any further questions, feel free to ask.

@media all and (min-width:992px){
  .art{
      margin-left:80px;
  }
}
@media all and (min-width:768px) and (max-width:991px){
  .art{
      margin-left:100px!important;
  }
}
@media all and (min-width:768px){
  .container{
      display:flex;
      flex-direction:row;
  }
  .row{
      flex-direction:row;
      
  }
}

.row{
     display:flex;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="row">
      <div class ="col-4 col-md-2">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>

      <div class="art col-8 col-md-6">
        <p>"article 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-6">
        <p>"article 2 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  </div>
  <div class="container-fluid">
  <div class="row">
      <div class ="col-4 col-md-2">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>

      <div class="art col-8 col-md-6">
        <p>"article 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-6">
        <p>"article 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
      </div>
  </div>
  </div>
  </div>
  </body>
  </html>

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

Why doesn't the link to CSS work when placed outside the HTML folder with Gulp-webserver?

When utilizing a html file that links to a css file in the same folder or a subfolder, the css is successfully included when running gulp webserver. However, if the css file is located outside of the html-folder, it fails to be included. For instance, if ...

htmlcssservergulp

Guide to creating scroll-based animations for a Div element

I've been brainstorming ways to rotate a div as I scroll. My goal is to recreate the effect shown in this codepen. However, I'm struggling to implement scrolling functionality. What I envision is scrolling down causing the word Data to rotate in ...

javascripthtmlcss

Adjust the Highcharts semi-pie design by eliminating the gap between the pie and the legend

I'm having trouble adjusting the spacing between the bottom of a semi circle donut chart in Highcharts and the legend below it. Despite my efforts, I have not been successful in reducing this gap. Here is the basic chart I am currently working on: h ...

javascripthtmlcsshighchartspie-chart

Are there any universal methods for enlarging the size of a checkbox without altering the HTML structure?

Is it possible to adjust the size of a <input type="checkbox"> in a way that works across all browsers without changing the HTML markup? I attempted to modify the height and width using CSS, but encountered issues such as pixelation in Firefox and o ...

htmlcssuser-interfaceinput

CSS Mouse Out Hover Effects with Long Duration

The CSS effect in the codepen below showcases a hover feature where the image grows when hovered over and gradually decreases back to its original size when the mouse is moved away. However, I am looking to change this decrease so that it happens instantly ...

htmlcss

Dynamic change in the mutation observer is not causing the callback to trigger

I have created a nested structure with two <div> elements. I am monitoring changes in the width of the inner <div>, which is set to width:auto;. Despite adjusting the width of the parent <div>, the mutation observer callback doesn't ...

javascriptjquerycssmutation-observers

Discover the position of a div relative to another div using ng-drag-drop

I'm currently working on a web application that allows users to create their own identity cards. For this project, I am incorporating the ng-drag-drop library from https://www.npmjs.com/package/ng-drag-drop. The main goal is to obtain the coordinate ...

javascripthtmlcssangulartypescript

Using a dynamic image source in an Ionic 3 background

I am using ngFor to display a list of posts, each of which should have a unique background image. The getBackgroundStyle function is responsible for extracting the URL of the image from the post array. <div class="singlePost" *ngFor="let post of da ...

javascriptcssangularionic2ionic3

Is there a way to condense a paragraph of text without using a span or div element?

There is a common scenario where I often encounter this issue: <span> <p>hello world</p> </span> It involves reducing the width of a paragraph to fit the text, but unfortunately it leads to clutter in my HTML. Is there a way to ...

htmlcss

Drag near the bottom of a droppable DIV to scroll inside

Within a scrollable div, I have multiple draggable divs. However, when I drag them into another scrollable div (the droppable zone), only the page scrolls and not the droppable div itself. How can I make it so that only the droppable div scrolls while drag ...

javascriptjquerycssdrag-and-drop

Updating the iFrame source using jQuery depending on the selection from a dropdown menu

I want to create a dynamic photosphere display within a div, where the source is determined by a selection from a drop-down menu. The select menu will provide options for different rooms that the user can view, and the div will contain an iframe to showca ...

javascriptjqueryhtmlcssiframe

Assigning a specific data type value to an element as it enters the top of the viewport

I have a unique color code stored for each section, and when a section reaches the top of the screen (specifically -180px for the header), I want to dynamically change the text color of the header element as you scroll through the sections. Despite no erro ...

javascriptjqueryhtmlcss

What is the method for adjusting the subheader color on a Material UI card component?

How can I change the subheader text color to white in a Material UI Card with a dark background? Here is my code: const useStyles = makeStyles(theme => ({ menuColor: { backgroundColor: theme.palette.primary.main, color: '#ffffff', ...

cssreactjsmaterial-ui

What causes the difference in behavior between Firefox and Chrome when it comes to multiple column rendering and the use of overflow

Recently, I came across an interesting issue in Firefox related to lists inside a div with columns:2 set. In Firefox, when overflow:hidden is applied to the list, it stops rendering in 2 columns. However, in Chrome, the list continues to render in 2 colum ...

htmlcssgoogle-chromefirefoxcss-multicolumn-layout

Navigating through a modal without affecting the main page's scroll position

My webpage has some content, and I also have a modal that pops up on top of it. The problem I'm facing is that when I try to scroll the contents within the modal, only the contents behind it scroll instead. Below is the CSS code: html, body { b ...

htmlcssmodal-dialog

Aligning vertical pills to the right using Bootstrap framework

Here is the relevant code snippet that I am working with: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <scrip ...

htmlcsstwitter-bootstrapright-align

If the SASS condition matches the variable for the background color, then

I attempted to create a conditional statement in my component using Sass @if and @else. The condition I set was that if background == var(--bg-danger), the color should be white. However, it only returned white and did not trigger the else condition. @mixi ...

cssvue.jssass

Locate an element that is nested within a "concat(" XPATH using Selenium

Embarking on my inaugural project as a Python developer, I am currently in the process of web scraping a retail website. The challenge lies in the fact that the site features infinite scrolling functionality, although at times instead of triggering the inf ...

pythoncssseleniumxpathscreen-scraping

Ensure that the Materialize CSS modal form remains open even after submission

Is there a way to reload a form inside a materialize modal with empty fields without closing the modal after submitting? The issue is that currently, when the submit button is clicked, the modal closes and redirects. <div class="modal" id="docM ...

cssajaxsymfonymodal-dialogmaterialize

Incorrect synchronization in the SVG arrow animation

How come the arrow doesn't start moving at the same time as the line? Is there a synchronization issue? I want the arrow to begin its journey simultaneously with the line. .container{ width:100%; padding:0px; background-color: black; } .squig ...

htmlcsssvg-animate