Align text in block beneath image on a new row using Bootstrap 4

I have set up a layout that I like, but I am looking to align the text under each image in a block directly below it. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container-fluid">
        <div class="row mb-5">
            <div class="col-md-6">
                <img class="mx-auto d-block" alt="Image Preview" src="https://placeimg.com/252/191/arch" />
            </div>
            <div class="col-md-6">
                <p class="text-justify g-mt-50">
                    To create an interior, the designer must develop an overall concept and stick to it.
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">                
                    <p class="text-justify g-mt-50">
                        Design is not just what it looks like and feels like. Design is how it works.
                    </p>                   
                </div>
                <div class="col-md-6">
                    <img class="mx-auto d-block" alt="Image Preview" src="https://placeimg.com/252/191/arch" />
                </div>
            </div>
        <div class="row">
            <div class="col-md-6">
                <img  class="mx-auto d-block" alt="Image Preview" src="https://placeimg.com/252/191/arch" />
            </div>
            <div class="col-md-6">
                <p class="text-justify g-mt-50">
                    For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <p class="text-justify g-mt-50">
                    All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
                </p>
            </div>
            <div class="col-md-6">
                <img  class="mx-auto d-block" alt="Image Preview" src="https://placeimg.com/252/191/arch" />
            </div>
        </div>
    </div>

I successfully achieved the desired layout below. To make it responsive using Bootstrap 4, I added some styling to improve alignment. However, it proved to be less responsive. How can I adjust the layout while maintaining responsiveness?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
        <div class="row mb-5">
            <div class="col-md-6">
                <img class="mx-auto d-block" alt="Image Preview" src="https://placeimg.com/252/191/arch" />
            </div>
            <div class="col-md-6"> 
                <div class="col-md-5 text-center" style="margin-left:180px">
                    <p class="text-justify  g-mt-50">
                        To create an interior, the designer must develop an overall concept and stick to it.
                    </p>
                    </div>

                </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="col-md-5 text-center" style="margin-left:180px">
                    <p class="text-justify ml-50 g-mt-50">
                        Design is not just what it looks like and feels like. Design is how it works.
                    </p>
                    </div>
                </div>
                <div class="col-md-6">
                    <img class="mx-auto d-block" alt="Image Preview" src="https://placeimg.com/252/191/arch" />
                </div>
            </div>
        <div class="row">
            <div class="col-md-6">
                <img  class="mx-auto d-block" alt="Image Preview" src="https://placeimg.com/252/191/arch" />
            </div>
            <div class="col-md-6">
                <div class="col-md-5 text-center" style="margin-left:180px">
                    <p class="text-justify g-mt-50">
                        For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
                    </p>
                    </div>
                </div>
            </div>
        <div class="row">
            <div class="col-md-6">
                <div class="col-md-5 text-center" style="margin-left:180px">
                    <p class="text-justify g-mt-50">
                        All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
                    </p>
                    </div>
                </div>
                <div class="col-md-6">
                    <img class="mx-auto d-block" alt="Image Preview" src="https://placeimg.com/252/191/arch" />
                </div>
            </div>
    </div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If I have understood your requirements correctly, the layout you are looking for is fully responsive and can be achieved by using the following classes for your text columns: 

col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto

The col-* classes control the column width at different screen sizes, while the px-* classes handle horizontal padding and mx-auto centers the columns horizontally.

Here is the functional code snippet: 

<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-fluid">
    <div class="row mb-5">
        <div class="col-md-6">
            <img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
        </div>
        <div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
            <p class="text-justify g-mt-50">
                To create an interior, the designer must develop an overall concept and stick to it.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">                
            <p class="text-justify g-mt-50">
                Design is not just what it looks like and feels like. Design is how it works.
            </p>                   
        </div>
        <div class="col-md-6">
            <img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
        </div>
        <div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
            <p class="text-justify g-mt-50">
                For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
            <p class="text-justify g-mt-50">
                All rooms should look inviting, as if they were already lived in and prepared to welcome guests warmly.
            </p>
        </div>
        <div class="col-md-6">
            <img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
        </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

How can I position a div in the center of a fullpage.js slide?

I'm currently utilizing the fullPage.js plugin sourced from this link: . I have successfully implemented vertical slides by using the following HTML code: <div class="section" id="section2"> <div class="slide" id="slide1"> ...

javascriptjqueryhtmlcssfullpage.js

Instantly magnifying on the initial point regardless of the zoom type chosen is a feature of Chart.js zoom

Despite adding zoom functionality to my line chart, I am facing an issue where it automatically zooms in to the first point and does not allow me to zoom back out, except for using the reset zoom function. The zoom out function is also not working properly ...

javascripthtmlchart.js

What is the best way to extract values exclusively from a JSON array using jQuery?

Struggling to extract values from a JSON array, I've scoured Stack Overflow for solutions but haven't found the right one. This is what my code looks like: .done(function (data) { var jdata = JSON.stringify(data['queryBuilder']); ...

htmljqueryarraysjson

Checkbox selection limitation feature not functioning correctly

Having trouble with my checkbox question function - I want to limit the number of checkboxes that can be checked to 3, but it's still allowing more than that. I suspect the issue lies with latestcheck.checked = false; This is my typescript function: ...

htmltypescriptcheckbox

Can the tooltip placement be adjusted in ng-bootstrap when it reaches a specific y-axis point?

Currently, I am facing an issue with my tooltip appearing under the header nav-bar instead of flipping to another placement like 'left-bottom' when it reaches the header. Is there a way to manually set boundaries for tooltips in ng-bootstrap? Unl ...

javascriptangulartypescriptbootstrap-4ng-bootstrap

Using InnerHtml functionality can be successful on the initial attempt, but may encounter issues following a Post

Currently, I have a webpage that features an empty div with the id "PreAcquisitionDiv" and it is set to run on the server. When the C# code-behind runs on Page_Load, I create a table and assign it to PreAcquisitionDiv.InnerHtml. Everything appears fine o ...

c#html

Preventing Scrollable Div Content from Displaying Behind a Fixed Div using CSS

Seeking help with a message_container division that contains a fixed scrollable message_header division and a scrollable message_body division. The issue I am facing is that the content of the message_body division is appearing behind the fixed div. How ca ...

csshtml

Steps for updating images and text on a live webpage after launching the web application

I added an image to a jsp file. The image, named kid.jpg, is downloaded and stored in the /resources/images folder as shown in the code snippet below. <li style="background-image: url('resources/images/kid.jpg');"> Now that my web app is ...

javajqueryhtmlimagejsp

Tips for incorporating a theme into your CSS code using BEM naming conventions

Currently, I am using the BEM CSS naming convention for a project I am currently working on. So far, everything is going smoothly. However, I am faced with the challenge of implementing multiple themes (each with slightly different designs) on the same HTM ...

htmlcssbem

Concealing search components using JavaScript

I'm looking to hide elements that appear below the search field in the example code below. The code is sourced from W3: https://www.w3schools.com/howto/howto_js_filter_lists.asp. I only want the search elements to display when a user starts typing in ...

javascripthtmlcss

Mozilla Firefox does not support the use of an input text box

I have developed a stopwatch using JavaScript and customized it with a table using HTML and CSS. Upon testing in Chrome, the UI looked great. However, when I tested it in Mozilla Firefox, I noticed that the input text box appeared smaller than expected. ...

htmlcss

How can we generate a intricate polygonal figure using an image in CSS that can be utilized in the regions property?

I'm on a mission to transform black images into polygon shapes. The challenge at hand involves two key steps: Converting an image into a polygon Filling the polygon with text I'm currently stuck on the first step. Without any existing convert ...

csspolygonregions

Collapsed navbars in Bootstrap 5 fail to display properly in a two-column format

Looking to create a responsive Bootstrap 5 navbar that collapses at the md breakpoint and displays navlinks in two columns upon collapse. Currently facing an issue where the navbar remains expanded and the toggle button fails to work after hitting the br ...

htmlcssbootstrap-5

How can I modify the orientation of the arrow and switch sides in a dropdown submenu?

I am working on creating a menu with dropdown-submenu functionality using CSS. .dropdown-menu { float:left; } .left-submenu { float: none; } .left-submenu > .dropdown-menu { border-radius: 6px 0px 6px 6px; left: auto; margin-lef ...

csshtmldrop-down-menubootstrap-modal

Printing JSON data with multiple rows in HTML

How can I display multiple rows returned by JSON using my JavaScript function? function getScheduleDate() { //alert("enters1"); //var usrname= getParameterByName('uname'); var postVal=$.post('http://localhost/ipack/salesvisit.ph ...

phphtmljson

The getElementByID function will return null in this instance, as it has not been loaded

Hello everyone, I am facing an issue while trying to access an element by its ID in JavaScript as it keeps returning null. This problem arises because the element is not fully loaded when the DOM is initially created, due to a plugin called Restrict Conte ...

javascripthtmldomloadgetelementbyid

Dealing with the Access-Control-Allow-Origin error: a beginner's guide to enabling CORS with a straightforward web stack and Guice integration

Am I facing issues due to the technologies involved or is it my lack of understanding about them? Currently, I have an HTML5 application built with JavaScript and HTML, hosted on an Apache 2.2 server. Additionally, there is a Java application developed w ...

javahtmlapachecross-domainguice

Which takes longer to render: individually drawn images placed via absolute positioning, or one complete image?

I currently have a collection of "cards" on my website that are jpg images, but I am considering switching to an HTML/CSS solution. This change would involve placing numerous small icons on a background and adding stylish text on top. My concern is determ ...

htmlcss

Why did the creators choose to integrate a dropdown menu into Twitter Bootstrap?

While exploring Twitter's Bootstrap framework, I couldn't help but be impressed. However, one feature that has left me a bit puzzled is the dropdown navigation menu. First of all, to view child links, you need to click on the parent. I understan ...

jqueryhtmltwitter-bootstrapsemantic-markup

Chrome displays the page layout differently upon initial loading

https://i.sstatic.net/GhfJc.pngI am currently seeking a developer position and have created a personal website to showcase my skills to potential employers. However, I have encountered a bug that only seems to affect Chrome browser. When the page is first ...

htmlcssgoogle-chrometwitter-bootstrap-3