What is the correct way to utilize Bootstrap grid offsets?

Recently, I have been working on a webpage that features a unique layout using Bootstrap grid rows. Each row consists of a paragraph of text and an image. The layout is designed to have the text occupy specific columns on large screens, with the image shifting accordingly. For even rows, the text takes up columns 3 to 8, while the image occupies columns 9 to 11. Conversely, for odd rows, the image spans columns 2 to 4, and the text fills columns 5 to 10. On smaller screens, the image should appear below the text. I initially achieved this layout using...

<div class="container my-4">
    <div class="row align-items-center justify-content-center">
        <div class="col-lg-1 order-3 order-lg-1">&nbsp;</div>
        <div class="col-lg-6 order-1 order-lg-2"><p>Paragraph text.</p></div>
        <div class="col-lg-3 order-2 order-lg-3"><img src='...'></div>
    </div>
    <div class="row align-items-center justify-content-center">
        <div class="col-lg-3 order-2 order-lg-1"><img src='...'></div>
        <div class="col-lg-6 order-1 order-lg-2"><p>Paragraph text.</p></div>
        <div class="col-lg-1 order-3 order-lg-3">&nbsp;</div>
    </div>
    ...
</div>

Despite following the Bootstrap documentation, I have struggled to implement this layout using offset classes instead of empty columns. I have experimented with various combinations, but have only managed to get either odd or even rows correct, not both. Can someone provide insight on this issue?

Answer №1

` tag, I discovered a resolution. My solution involves removing the `justify-content-center` within the `
`. Although this was crucial for positioning when I had an empty column, it caused conflicts with the column offset classes. Once I eliminated it, the offsets functioned flawlessly.

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

Design the appearance of page buttons distinct from select buttons

I am currently working on styling my paging buttons differently from the select buttons. However, the selector I am using for the select buttons is also being applied to the paging buttons: .gridView tr td a{} /* The gridView class has been assigned to th ...

Dynamic content displayed within adjacent div elements

I am currently working on a project where I am dynamically generating an outline by creating panels and labels in ASP.NET. Each node in the outline is defined by an outline number and outline text, which are obtained from a database that defines the relati ...

Script to pop up cancel alert box

There's a dilemma with this code - if you click CANCEL the first time the box pops up, it continues to run. I'm unsure of how to make it redirect to the underlying page when clicked on cancel for the first time. var numero= prompt ("Enter a nu ...

Discovering the HTML element with a particular attribute using jQuery

Is there a way to select an HTML element with a specific attribute, regardless of whether that attribute has a value or not? I have seen similar questions regarding elements with attribute values, but nothing based solely on the existence of the attribute ...

Line of 5 elements

Currently in the process of developing an e-commerce site using Bootstrap. Being relatively new to the world of web design and programming, I've encountered some challenges. Specifically, I'm struggling to create a row with 5 columns to showcase ...

Tips for showcasing several images with accompanying content once the webpage has finished loading

I am faced with an issue on my PHP website. The website is a social networking platform with numerous images and contents. I am seeking a way to first display only the content to the user, then show the images after they have all finished loading. Addition ...

What is the method for viewing a PDF file on ng-click without automatically downloading it in AngularJS?

When the user clicks on the link that says "Click to get your file", I am able to download the file. However, now I want to open the PDF file in a modal window and prevent the user from downloading it. This is My Controller: var resumeJson = { "j ...

I am looking for a way to have one element as a child of another element without automatically adopting specific properties

https://i.sstatic.net/iuNB7.png <span id="priority-dot-open-menu"> <span id="priority-menu"> <span class="tooltip-top"></span> <span id="priority-dot-blue">& ...

What is the best way to showcase a category on the thumbnail of a WordPress post?

Hey everyone, I hope you're all having a great day! I need some assistance with a slider I'm creating on my WordPress site. I can't seem to figure out how to display the category of each post that appears in the slider and have it stand out. ...

Executing script once the DOM has completed loading

In my project, I'm dynamically generating menu items for a menu bar based on headers from external files that are imported using an XMLHttpRequest(). The menu bar is then updated as I navigate through different pages. Everything works smoothly. Each ...

Tips on incorporating animations into a class design?

I'm trying to figure out how to make an image disappear by adding a class However, when I try this, the element vanishes without any animation I'd like it to fade away slowly instead I've heard there are CSS3 properties that can help achi ...

Is it possible to alter the name of a slot before displaying the element in the shadowDOM, depending on the slot utilized in the DOM?

In my project, I am working on implementing different features for both desktop and mobile devices. Some of these features can be replaced by slots. My goal is to have a slot that can be either replaced by a desktop slot called poster-foreground, or a mobi ...

Library of User Interface components for React Native applications

As I embark on my journey of building my first major app using React Native, a question comes to mind. Is there a UI framework available for React Native that offers pre-styled components right out of the box? Similar to how Ionic provides a base theme a ...

What is the best way to ensure the parent element adjusts to fit its floated children, without exceeding the width of the window?

I am attempting to center a group of floating elements, but due to them being displayed in masonry style, I cannot set them as inline. It is clear that a container is necessary, but I have been unable to find information on how to achieve this: Please dis ...

What is causing the extra whitespace on the right side with container-fluid?

Could someone assist me with an issue I'm experiencing when using the container-fluid in Bootstrap? It seems to be leaving some space on the right side of my web page, and as a newcomer to Bootstrap, any help would be greatly appreciated. <link ...

Accordion component in Vue 3 using Composition API and making API calls

For my Vue 3 Composition API app, I created a custom accordion component and a custom tabs component based on Bootstrap. The Tab component expects the following props: label Icon Component to render The accordion component follows the same structure. E ...

.htacces Disables Styling on Page

I've been trying to understand the functionality of .htaccess RewriteRule. Here is a URL example where I have experimented with .htaccess: http://example.com/test/home This used to be: http://example.com/test/index.php?p=1 My goal is to redirect ...

Is there a callback or event that can be used to ensure that getComputedStyle() returns the actual width and height values?

Currently, I find myself in a situation where I need to wait for an image to load before obtaining its computed height. This information is crucial as it allows me to adjust the yellow color selector accordingly. Question: The process of setting the yello ...

Overlay a semi-transparent gray layer onto the background color

My Table has various TDs with different background colors, such as yellow, red, green, etc., but these colors are not known beforehand. I am looking to overlay a semi-transparent gray layer on certain TDs so that... The TD with a yellow background will t ...

What is the best way to vertically align Bootstrap Columns to ensure they have consistent heights?

I'm currently in the process of building a website that features multiple images and content organized into columns using Bootstrap as the framework. I'm wondering if there's a way to automatically adjust all the columns to the height of th ...