Tips for creating a layout with two responsive columns side by side: one with text and the other with an image, using Bootstrap 4

How can I create two responsive columns in Bootstrap 4, one with text and the other with an image, similar to the layout shown in the image below?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class='container'>
    <div class='row'>
        <div class='col-md-6'>
            <div class='text'>
                <h2>Test test</h2>
                <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
            </div>
        </div>
        <div class='col-md-6'>
            <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
        </div>
     </div>
     <div class='row'>
         <div class='col-md-6'>
             <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
         </div>
         <div class='col-md-6'>
             <div class='text'>
                 <h2>Test test</h2>
                 <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
             </div>
         </div>
     </div>
</div>

view image description

Is there a way to ensure that the image maintains the same responsive parameters as the text div?

htmlcssbootstrap-4

Answer №1

To ensure the image does not overflow to the next block, set its width to 100%.

Take a look at this.

With Bootstrap using display:flex, all blocks within the row div will have equal height.

.col-md-6 img{width:100%;}
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <div class='container'>
    <div class='row'>
    <div class='col-md-6'>
    <div class='text'>
    <h2>Test test</h2>
    <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
    </div>
    </div>
    <div class='col-md-6'>
    <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    </div>
    <div class='row'>
    <div class='col-md-6'>
    <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-md-6'>
    <div class='text'>
    <h2>Test test</h2>
    <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
    </div>
    </div>
    </div>
    </div>

Here is a codepen link for reference: https://codepen.io/Ev1tw1n/pen/GPGvmd

Tip: To center text content, apply align-items:center;

Answer №2

Remember to include the img-fluid class on both images.

If you are using Bootstrap 4, you can refer to the following link for more information: https://getbootstrap.com/docs/4.0/layout/media-object/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></link>


<div class='container'>
<div class='row'>
<div class='col-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
<div class='col-md-6'>
<img class="img-fluid" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''></img>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<img class="img-fluid" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''></img>
</div>
<div class='col-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
</div>
</div>

Answer №3

Make sure to include the following in your CSS:

img{
  min-width:100%;
  min-height:100%;
  max-height:100%;
  max-width:100%;
}

For a live example, check out this working fiddle https://jsfiddle.net/fk04wndL/

Answer №4

Thank you for sharing this valuable information.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <style>
.img-section{
    width:100%;
        height:400px;
    }
    .text {
        height: 380px;
    }
</style>
<div class='container'>
  <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Unique example</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Unique example</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
  </div>
    <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Unique example</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Unique example</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
  </div>
    <div class='row'>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Unique example</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </div>
    <div class='col-sm-6'>
        <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
    <img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
    </div>
    <div class='col-sm-6'>
      <div class='text'>
        <h2>Unique example</h2>
        <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
      </div>
    </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

Angular 2 component hierarchy with parent and child components

Currently, I am in the process of learning typescript and angular2. My attempt to incorporate parent and child components into my fiddle has not been successful. Despite conducting some research, I have encountered an error that states: Uncaught ReferenceE ...

htmlangulartypescript

What is the best way to create text boxes that can expand and collapse within a UIWebView?

I am looking to present text in a UIWebView with expandable or collapsible boxes that contain titles. The user should be able to tap the bar of a collapsed box to expand it. Is there a simple solution available that can be easily integrated into a local ...

javascripthtmluiwebview

What is the anticipated durability of flex products?

UPDATE: JANUARY 2014 - The answer provided previously is no longer relevant. This question has been posted on flexcoders as well. Our team primarily works with flex technology. However, a potential client has expressed concerns about the longevity of fle ...

htmlflashapache-flex

Apply a border to the navbar when it hovers over a selected element

export const NavBar = () => { return <div className="navbar">this is navbar</div>; }; const Content = () => { return ( <div className="main"> <div className="background"> some content </div> ...

javascripthtmlcssreactjs

I am interested in incorporating jQuery into my React development project

I'm trying to implement jQuery in React. I have an input field in my project that I am using to create a match event with 'this.state.value'. When the content of the input field matches, I want the borders to turn green and red if they do no ...

javascripthtmljquerycssreactjs

Is there a way to hide my jQuery menu?

Can anyone help me figure out how to make it close when I click on a link? <nav class="navigation"> <a href="" class="menuIcon"><i class="fa fa-bars"></i></a> <ul class="nav"> <li class="clearfix"&g ...

jqueryhtmltwitter-bootstrapdrop-down-menumenu

One of the unique CSS properties found in the NextJS setup is the default 'zoom' property set to

Even though I already found a solution to the problem, I can't help but wonder what the author meant by it. Hopefully, my solution can help others who may encounter the same issue. After installing the latest NextJS version 13.2.4 on my computer, I e ...

cssreactjsnext.js

The modal is not displayed when the on click listener is triggered

I'm a beginner in the world of programming and I'm currently working on creating modals that pop up when clicked. However, I'm facing an issue where the pop-up message doesn't appear when I click the button. Oddly enough, only the overl ...

javascripthtmlcss

Tips for implementing collapsible mobile navigation in Django with the help of Materialize CSS

I'm facing some issues with implementing a responsive navbar that collapses into a 'hamburger bar' on mobile devices and in split view. I have managed to display the hamburger bar, but when I click on it nothing happens. Here's my curre ...

javascriptpythonhtmldjangomaterialize

Align the timing of the animation with the dataset in ThreeJS

I am faced with the challenge of working with data that includes time in milliseconds and the x, y, z position of an object at each specific time interval. msec |pos_x |pos_y |pos_z ------------------------------ 0 |318 |24 |3 25 |3 ...

javascripthtmlanimationtimethree.js

Creating sequential numbers using jQuery

Recently, I worked on a script (credit to Chyno Deluxe) that generates a list of menu items based on what is written in the input box. However, I now have a new requirement which involves generating a sequence of numbers to be added continuously. Here is ...

javascriptjqueryhtmlcss

Why do the fontawesome icons fail to appear in my SVG file?

I've encountered a peculiar issue where icons (from fontawesome) are not appearing in my svg. They have always displayed correctly on my personal computer, so for a while I didn't realize that others were having trouble seeing them. For instance ...

htmlcsssvgfont-awesome

Incorporate a dynamic fading effect for text and images using JQuery

I successfully implemented a Crossfade effect using Jquery: function doAnimationLoop(o, n, t, i, a) { fadeInOut(o, n, t, i, function() { setTimeout(function() { doAnimationLoop(o, n, t, i, a) }, a) ...

javascriptjqueryhtmlcss

Utilizing JQuery to ensure that rows have consistent height in two dynamically generated tables

To meet my specific requirements, I am tasked with creating two separate tables that will contain the same number of rows but different data. The first table will display Item Information, while the second table will provide consolidated information about ...

htmljquerycssdatatables

Creating unique div elements with varying sizes that perfectly complement each other

I'm interested in creating a grid of divs that are randomly filled, similar to the image shown. I want them to be completed in a unique way without overlapping with each other. Is there a method to achieve this? ...

phpjqueryhtmlimage

Unable to place within div

Utilizing HTML5 to implement the "DnD" function. There is a button that adds divs. I want to be able to drag items into these newly added divs. Currently, I can only drag into existing divs and not the ones added later. How can I resolve this issue ...

javascriptjqueryhtml

Is there a way to use JavaScript to switch the entire div on and off

I have a function called done that I want to use to toggle the visibility of my "temp" division. tasks.innerHTML += `<div id="temp"> <span id="taskname"> ${input.value} </span> <button class="d ...

javascripthtmlfunctiontoggleinnerhtml

I need to adjust the alignment of the text within my list item that includes a time element

I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized. I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Ins ...

htmlcss

ReactJS is having trouble with inline animation styles

After successfully implementing a timer using CSS with animation, everything was working as expected. However, I encountered an issue when trying to convert it into JSX inline styles in React. The animation stopped working as smoothly as before due to the ...

cssreactjsanimationjsx

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

One issue I'm facing is that the page doesn't auto-refresh, although it loads when I manually refresh it. Below you can find my HTML and AJAX code along with its database details. The Trigger Button <?php $data = mysqli_ ...

javascriptphpjqueryhtmlajax