Combination of Bootstrap 4 Container and Fluid Container in Row with Column

I am attempting to design a layout that resembles the component displayed in the image.

The layout consists of a 12 column Bootstrap grid. I would like the text to occupy 6 columns, with a spacer of 1 column between the text and the last column. The final column should house the image, taking up the remaining horizontal space both inside and outside the container.

I experimented with combining the container and container-fluid classes (although not recommended by Bootstrap documentation), but it did not produce the desired outcome.

Is there a way to achieve this specific layout using Bootstrap 4?

Image: https://i.sstatic.net/lGwr4.png

Existing code:

<div class="info-side">
    <div class="container-fluid">
        <div class="row">
            <div class="col-6">
                <h2>@Model.TitleText</h2>
                <p>@Model.AreaText</p>
           </div>  
            <div class="col-1">
            </div>
            <div class="col-5">
               <img src="@Model.Image.Url)" alt="@Model.Image.AlternativeText" style="width: 100%; height:100%;">
           </div>
       </div>
   </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

give this a try

<div class="info-side" >
    <div class="container">
        <div class="row col">
            <div class="col-6 bg-info">
                <h2>@Model.TitleText</h2>
                <p>@Model.AreaText</p>
            </div>
            <div class="col-1 bg-warning">
            </div>
            <div class="col-5 bg-info">
                <img src="@Model.Image.Url)" alt="@Model.Image.AlternativeText" style="width: 100%; height:100%;">
            </div>
        </div>
    </div>
</div>

I included col in the class row @div tag to make it expand to all available space.

Additionally, you can mix regular and fluid containers, but remember that fluid is wider than regular, so they need to be nested properly for correct hierarchy. Check out this explanation: link

Best of luck!

Answer №2

After much consideration, I have devised a solution that replicates the layout depicted in my original image within the question.

To achieve this effect, I had to set one row to be position absolute, resulting in the two containers overlapping each other effectively.

<div class="info-side">

    <div class="text-side container" style="position: relative;" >
        <div class="text-area" style="position: absolute;">
            <div class="row">
                <div class="col-6 d-flex align-items-center" style="height: 600px;">
                    <div class="text-items">
                        <h2>@Model.TitleText</h2>
                        <p>@Html.Raw(Model.AreaText)</p>
                    </div>
                </div> 
            </div>
        </div>
    </div>

    <div class="image-side container-fluid">
        <div class="row">
            <div class="col-7"
            <div class="col-5" style="height: 600px; ">
                <img src="@Model.Image.Url" alt="@Model.Image.AlternativeText">
            </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

Show SQL data in a PHP/HTML table view

I am struggling to populate an HTML table with data from my SQL table using PHP. Currently, only the table header is being created without any actual data. Can someone help me figure out what's causing this issue? Here's the code snippet I'm ...

phphtmlsqlmysqlihtml-table

PHP script not running as intended

I created an HTML form where users can input values and select options. Once the user has made their selections, these values are then sent to a PHP script on the server. The PHP script retrieves data from a MySQL database based on the user-selected values ...

phpmysqlhtmlajax

"Utilizing Bootstrap for a Dynamic Display: Implementing Multiple Carousels with Multiple Images within

I have incorporated several Bootstrap carousels on one page, each with its own unique identifier. These carousels are generated dynamically based on user interactions, such as uploading images. My goal is to display 3 images at once in each carousel. I am ...

jqueryhtmlcsstwitter-bootstrap-3carousel

Arrange one div on top of another div using Bootstrap

Could someone please show me how to position a div above another div? Here is the desired layout: https://i.sstatic.net/mpeue.png <div class="col-md-12 container"> <div class="col-md-12"> box1 </div> <div class="col-md-12" ...

htmlcssbootstrap-4

Tips for getting rid of the glowing effect on MUI slider thumbs when they are in focus

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

htmlcssreactjsmaterial-ui

The clientWidth and scrollWidth properties will constantly be the same

I am currently utilizing Vuetify text-fields and aiming to exhibit a tooltip showcasing the content only if it exceeds the field width (requiring user scroll). The tooltip should solely be visible on hover, as per default behavior. My initial approach ensu ...

javascripthtmlvue.jsvuejs3

Persistent hover state remains on buttons following a click event

In my current project, I am dealing with a form that has two distinct states: editing and visible. When the user clicks on an icon to edit the form, two buttons appear at the bottom - one for saving changes and one for canceling. Upon clicking either of th ...

javascriptangularjscsstwitter-bootstrap-3hover

How can I effectively display the city weather information that I have chosen from the drop-down menu?

Is there a way to display city weather information that I have selected from a drop-down menu using JSON? I am able to retrieve the city using jQuery, but I am not sure how to load the weather data for that city. Any guidance on this would be appreciated ...

htmlcssjsonapi

Creating a dynamic className string in JavaScript with React

In my current project, I'm implementing mobile support by creating separate styles for desktop and mobile. Although most components are the same on both platforms, I have two .scss files dedicated to each. To apply the correct styles, I use a combina ...

javascriptcssreactjswebsass

Do not show empty pages in Mpdf display

I utilized Mpdf to generate a three-page PDF document. The first and third pages consistently contain data, but the presence of data on the second page varies. I prefer not to display the second page if it is empty. Here's the code structure: html = ...

phphtmlmpdf

Encountering undefined JavaScript functions when called from HTML

I had most of these functions working perfectly, but after restarting my program, I'm now encountering issues with undefined functions in Chrome. I can't pinpoint the exact problem, and even though I've checked through Eclipse, I still can&a ...

javascripthtml

I am having trouble getting my Jquery to locate the panelid

I tried following a tutorial to improve my coding skills, but I'm facing issues with my code. It seems like my jQuery isn't able to locate the panelid. I can successfully alert the panelids, but the functionality of clicking on "läs mer" and dis ...

javascriptjqueryhtmlcss

HTML and CSS styled accordion with nested checkboxes: handling long items

I am currently working on creating a multi-level accordion for an aside navigation section on a webpage. However, I have encountered an issue where the background color extends too far when hovering over a specific element. This occurs on a folder-type ite ...

htmlcssnavigationaccordion

Tips for incorporating a Spotify-style play button using CSS into a table row

Hey there! I recently attempted to customize my button like Spotify. I wanted the table row to display a play button when hovered over, and when clicked, the image would change. https://i.sstatic.net/aJIna.jpg After seeking advice from another fiddle an ...

javascripthtmlcss

Step horizontally to scroll varying amounts

On my webpage, I have implemented two buttons to scroll left and right. When these buttons are clicked, the page should move left or right by the width of each individual div (since they all have different widths). I am unsure if this functionality can b ...

jqueryhtmlscroll

Instructions on how to create a grid layout in CSS similar to the one used

This is my unique code <div class='col-lg-3 aa'> <div class='panel panel-default'> <img class='img-responsive' src='gambar1'> <div class='panel-body'> <small ...

htmlcsstwitter-bootstrap

Attempting to iterate through an array of HTML5 videos

Having some trouble with my video array - it plays but doesn't loop. I've tried using the HTML video attribute 'loop' and variations like loop="true" and loop="loop" without success. Tonight, all I want is for it to loop properly! var ...

javascriptjqueryhtmlvideo

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

javascriptjqueryhtmldjangopython-3.x

Adding style using CSS to a dynamically generated table row in Vue.js

Currently, I am working with a table that dynamically generates rows using v-for: <table> <tr><th class='name'>Name</th><th>Surname</th></tr> <tr v-for='data in datas'><td class=&a ...

javascriptjqueryhtmlcssvue.js

Transforming video files into HTML5 ogg/ogv and mpg4 formats

Is there a reliable software out there that can effectively convert video files (such as avi, flv, etc.) to HTML5 supported ogg/ogv and mpeg4 formats? I have tested a few options but unfortunately none of them seem to get the job done correctly. ...

videohtmlmpeg