Tips for adjusting text placement on a Bootstrap responsive webpage:

Hey there, I hope everything is going well.

I'm facing a little issue here. I'm trying to design a page layout that looks like this:

Image - Description
Description - Image
Image - Description
and so on...

However, when viewed on a smaller device, it should change to:

Image
Description

Image
Description

and so on...

Unfortunately, what I currently have is:

Image
Description

Description
Image 

Image
Description

How can I achieve the desired layout?

Below is my code snippet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c5dfc7dfc1">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89c869e8698">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<div class="container-fluid padding">

  <div class="container padding">
    <div class="row padding">
      <div class="col-md-6 mt-5 mb-5">
        <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
      </div>
      <div class="col-md-6 align-self-center mt-5 mb-5">
        <h3>Text Heading</h3>
        <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
      </div>

      <div class="col-md-6 align-self-center mt-5 mb-5">
        <h3>Text Heading</h3>
        <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
      </div>
      <div class="col-md-6 mt-5 mb-5">
        <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
      </div>

      <div class="col-md-6 mt-5 mb-5">
        <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
      </div>
      <div class="col-md-6 align-self-center mt-5 mb-5">
        <h3>Text Heading</h3>
        <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
      </div>
    </div>
  </div>
</div>

Thank you for your help!

htmlcssbootstrap-4responsive

Answer №1

For better organization, it is recommended to define each row separately instead of having all columns in one row. In each row, start with col-12 and switch to col-md-6 for larger displays.

Arrange everything in image/description order initially. For the alternating row, use Bootstrap's order-md-first to make the text block appear first.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e7a6078607e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a0baa2baa4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<div class="container-fluid padding">
    <div class="row padding">
        <div class="col-12 col-md-6 mt-5 mb-5">
            <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
        </div>
        <div class="col-12 col-md-6 align-self-center mt-5 mb-5">
            <h3>Text Heading</h3>
            <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
        </div>
    </div>
    <div class="row padding">
        <div class="col-12 col-md-6 mt-5 mb-5">
            <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
        </div>
        <div class="col-12 col-md-6 align-self-center mt-5 mb-5 order-md-first">
            <h3>Text Heading</h3>
            <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
        </div>
    </div>
    <div class="row padding">
        <div class="col-12 col-md-6 mt-5 mb-5">
            <img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
        </div>
        <div class="col-12 col-md-6 align-self-center mt-5 mb-5">
            <h3>Text Heading</h3>
            <p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
        </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

Transferring information between two Kendo Grids located within a pop-up dialog box

I'm currently working on a project using .net-core and Kendo-UI. I am faced with the challenge of passing checked values (each row has a checkbox) from one Kendo Grid to another one that is located in a popup window. The popup window is a bootstrap 4 ...

c#kendo-ui.net-corebootstrap-4kendo-grid

The performance of dom-repeat may be impacted when dealing with sizable objects, such as those containing base64 encoded images

Currently, I am encountering an issue while generating a dom-repeat using a list of objects. Each object in the list has an imgUrl key containing a large base64 encoded image. However, when I generate the dom-repeat in this manner, each item appears undef ...

javascripthtmlpolymer

The functionality of the Angular JS Controller is hampered when integrated with a .js file

Having just started using Angular JS, I encountered an issue with a simple example I was working on. I wrote a script.js file with the following code:- var myApp = angular.module("myModule", []).controller("myController", function ($scope) { $scope.m ...

htmlangularjs

Utilizing Cookies within an HTML Page

My current code is functioning perfectly, accurately calculating the yearly income based on the input "textmoney." I have a link to a more advanced calculator for a precise prediction. My goal is to find a way for the website to retain the data input from ...

javascriptjqueryhtmlcookiescalculator

Comparison of button text alignment: stacking vs inline placement

I currently have a button on my webpage labeled "Learn More." Unfortunately, the text on the button is not lining up as it should. Instead of flowing in a line, the text seems to be stacking on top of each other. The HTML code for the button is included ...

htmlcsstwitter-bootstrap

Connecting mysql workbench data using html: A step-by-step guide

I'm currently creating a user interface for a database system using HTML. I'm a bit stuck on how to access and manipulate the database in MySQL Workbench. Does anyone have any suggestions or sample code that could help me connect them? Thanks! ...

htmldatabasewebmysql-workbenchconnector

Collect information from forms and save it to a mobile phone number

Is it possible to forward form field details to a cell phone number via text message? Here is the code I currently have for sending form data to an email address. If any adjustments need to be made, please provide instructions. <?php if(isset($_POST[ ...

javascriptphphtmlcss

Discovering a class within a div element using Selenium

Currently, I am attempting to utilize Selenium in Python to locate and click on the 'X' button. This action will redirect me to the next page where I can extract some crucial information. However, I am encountering difficulties in finding the ele ...

htmlpython-3.xselenium

Unable to access frame: Error - Unable to retrieve 'add' property from undefined

I am working on customizing the chatbot functionality for my website built with Nuxt.js. I want the chatbot to display on certain pages while remaining hidden on others. Unfortunately, I encountered an issue when trying to hide it on specific pages. To im ...

javascriptcssvue.jsdomnuxt.js

Ordering styles in Material UI

I've spent countless hours customizing this element to perfection, but the more I work on it, the more of a headache it gives me. The element in question is an outlined TextField, and my focus has been on styling its label and border. Initially, I th ...

javascripthtmlcssreactjsmaterial-ui

An alternative in the Android platform that simulates the functionality of CompositeOperation in

When working with HTML5/JavaScript, you may come across the compositeoperation property, which allows you to set the mode for placing graphics on a canvas (add/xor/over etc.). Is there an equivalent behavior for manipulating graphics in Android's Can ...

javascriptandroidhtmlcanvas

CSS: What's with the weird gray element appearing in Safari?

Does anyone have a solution for removing the grey layer (cf the image) in Safari? This issue does not occur in Chrome. The structure is as follows: <div class="class1"> <div class="class2"> <select> ... </selec ...

csssafari

Unselect all options in Angular's multiple selection feature

Objective: My goal is to ensure that when I invoke the myMethod() function, all options are unselected. Current Issue: Currently, calling myMethod() will only deselect the last option, leaving the others selected if they were previously selected. Possibl ...

htmlangulartypescript

What is the best way to implement CSS styling on an XSL form input field?

Hey there! I've got this cool web page that generates MADLIB type stories. These stories are in XML format and they look a little something like this: <?xml version="1.0"?> <body> I remember going to sleep around <Num1 class=" ...

phphtmlcssxmlxslt

What is the best way to position a small square box over each td element containing text using css?

Currently, I am in the process of developing an HTML table where I would like to incorporate a square box around each td element using CSS <tr> <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php e ...

htmlcsshtml-table

CSS code completion in PhpStorm is not functioning properly for Twig extended templates

Currently, I am working with PhpStorm 2016.1 and facing an issue with file autocomplete. The scenario is as follows: @mycss .style {color : red} @base.html.twig [...] <link rel="stylesheet" href="/vendor/mycss.css" /> <!--HERE AUTOCOMPLETE OF s ...

cssautocompletestylestwigphpstorm

The <input type="number"/> element is failing to display a numeric keypad on iOS devices

Based on the information from Apple's official documentation, setting up an input element with a type of number should result in a number keypad being displayed. <input type="number"/> number: This creates a text field specifically for en ...

ioshtml

Creating a 3D slider on Owl-carousel 2: A Step-by-Step Guide

I am trying to create a slider using Owl-carousel, but I'm having trouble implementing it. I came across this example https://codepen.io/Webevasion/pen/EPMGQe https://i.stack.imgur.com/KnnaN.jpg However, the code from this example doesn't seem ...

htmljquerycssowl-carousel

What's the best way to make sure all the data fits neatly within the confines of the table?

Is there a way to ensure that all the information remains within the table without using the style="overflow:scroll" property? Here is an image of the table overflowing to the right in the middle of the LATEST DATE CHECKED column. Here is the c ...

css

What is the best way to position an element in the center of the screen

What is the best way to vertically center a button within a div? Click here for an image of the issue I recently started learning HTML & CSS and I am struggling to align a button in the vertical center of a div. Text-align:center doesn't seem to be ...

htmlcss