Tips for creating a responsive layout with a floating sidebar in Bootstrap 4

Can anyone help me achieve a two-column layout using Bootstrap 4?

https://i.sstatic.net/ioAPu.png

I'm running into an issue where the content in the right column is causing the left column to drop down like this:

https://i.sstatic.net/NFcQq.png

This is my current code:

<div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>

<div class="row">
    <div class="col-md-6">B</div>
</div>

Any suggestions on how to fix this issue would be greatly appreciated!

csstwitter-bootstrapbootstrap-4flexbox

Answer №1

It is recommended to place part 'B' of the tag within the 'A' tag and enclose both 'A' and 'B' with their own 'row' and 'col' tags.

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col">A</div>
        </div>

        <div class="row">
            <div class="col">B</div>
        </div>

    </div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Donec at orci porta, suscipit
        felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
        aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
        orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
        eget consequat sem dapibus nec.
    </div>
</div>

Answer №2

To achieve the desired structure, make sure to arrange the rows and columns correctly in the following way:

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                A
            </div>
            <div class="col-md-12">
                B
            </div>
        </div>
    </div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</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

Creating a Bootstrap 5 modal with a dynamic width percentage

Is there a way to adjust the width of a Bootstrap 5 modal to be a percentage of the full screen? This method seemed effective in previous versions of Bootstrap. <div class="modal-dialog modal-dialog-centered per80" role="document" &g ...

cssmodal-dialogbootstrap-5

When padding is added, the size of the containing div will still be affected even with the box-sizing property set to

If you click the Button in the following example, it will add padding to a div called label. If you click it 12 times or more, the size of the containing div named button will start to change size and turn red. I have already applied box-sizing: border-bo ...

htmlcss

Form with input fields arranged horizontally

I am working on an HTML form that is currently arranged vertically, but I am struggling to figure out how to place two text fields on the same line. Specifically, I would like to have the First Name and Last Name fields next to each other on one line rat ...

htmlcssforms

How can I design a search box similar to the one on the android.com website?

Is it possible to replicate the search box effect on the Android website, where the menu items fade out and the search box expands upon clicking the search icon?view image here See the difference before and after clicking the search icon ...

jqueryhtmlcss

Concealing excess background color in HTML/CSS

I'm currently experimenting with adding a background color shape, such as a large rotating div, to the background of my website. However, I've encountered an issue where placing this background in the desired location is causing a large margin to ...

htmlcss

What is the best way to position items of varying heights in alignment?

Can someone help me with this issue? I have a grid with 12 columns, each containing 2 identical icons and 2 texts of different heights. I need to align the icons in the center and make sure the texts are at the same height, but I'm having trouble achi ...

htmlcssbootstrap-5

What is the best way to create a menu that can be hovered over but not clicked on

This HTML code includes a dropdown menu created using Bootstrap. It contains navigation links for Home, Add User, Export, and Logout. <ul class="nav navbar-nav navbar-right"> <li <?php if($tabs=='home' or $tabs=='') ech ...

javascripthtmlcss

Using Crawler4j, Jsoup, and JavaScript to retrieve modified attribute values

Currently, I am utilizing Crawler4j and Jsoup for web crawling and it's performing well with HTML text. However, some vital contents have default values hardcoded in CSS and then dynamically adjusted through JavaScript. For instance, there's a e ...

javascriptcssweb-crawlerjsoupcrawler4j

The element is spilling over the height of the page

I'm currently working on a webpage with a fixed width and height. Although I'm incorporating hover effects, I'm encountering an issue where the vertical overflow of the page is not set to 100% (100vh). What could be causing this problem an ...

htmlcsshoveroverflow

How to make a section header stay at the top of a wrapper container

Currently, I am facing an issue with getting a section header to stay fixed at the top of a wrapper div. The challenge lies in the fact that the wrapper div must have a specified height and overflow set to scroll. I came across this example (jsfiddle) tha ...

javascriptjqueryhtmlcss

Achieving a dynamic scrollable table that adjusts its height based on its parent container (HTML + Bootstrap)

I am trying to create a table that can be scrolled vertically using the standard overflow: auto property without specifying a set height for the table's container. While Bootstrap provides a class called table-responsive for handling horizontal scrol ...

htmlcsstwitter-bootstrapbootstrap-4

The header in datatables.net is positioned on the side of the table rather than at the top

I am currently facing an issue with my datatables.net datatable. While all the columns and header are displaying properly, I am unable to position the header on top of the table. Instead, it appears on the side. Here's a visual representation: Curren ...

javascriptjqueryhtmlcssdatatables

Shifting the Bootstrap sidebar

Here is a layout defined using Bootstrap: <div class="container-fluid"> <div onclick="smallSize()">Click</div> <div onclick="largeSize()">Click</div> <div class="row"> ...

htmljquerycssbootstrap-4

increasing the gap spacing between Bootstrap panels in columns

On this page: I am trying to eliminate the space between the panels in the "Funzionalità" section. Each panel has the following code: #bor_panel { border-radius: 12px; border: 2px solid #287396; padding: 20px; width: 170px; height: 170px; display: flex; ...

htmlcsspanelbootstrap-4col

Getting rid of the arrow icons in a Material UI TextField

I am facing a challenge with removing the up and down arrow icons from a Material UI TextField that I adjusted using the Material UI documentation (https://material-ui.com/components/autocomplete/#autocomplete) Highlights section. After trying various sol ...

cssreactjsmaterial-uiiconstextfield

What is the reason behind Bootstrap displaying a non-existent LESS file during inspection?

Working on a project, I decided to test the responsiveness of my CSS. Suddenly, my page underwent a style transformation, especially my navbar (built with Bootstrap) changed completely. Upon inspecting, I noticed that properties were coming from a less/nav ...

cssbootstrap-4

Troubleshooting alignment problems with CSS DIVs within VUE Components

I have a Vue application with 2 components, each housed in their own div. My CSS skills are not strong, so I found a CSS template that works well and is responsive. However, I've noticed that the top and bottom divs do not align properly and their wid ...

cssvue.jsvue-component

Aligning a Facebook share button to the center of a webpage

On my webpage, I have the following section: <div style="align:center"> <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js#appId=217585988283772&amp;xfbml=1"></script> <fb:like hre ...

htmlcssstyling

Sleek animation designed for a personalized cursor when hovering over an object

I'm currently working on improving the transition of the cursor for a smoother experience. Right now, the size abruptly changes when hovered over the target element. Any suggestions on how I can achieve a smoother increase in size, with a better anima ...

javascripthtmlcss

Updating JQuery function after window is resized

click here Currently, I am using slick-slider to showcase content in 3 columns by utilizing flexbox. The aim is to have the slider activated only on mobile view. This means that when the screen size shrinks down to mobile view, the 3 column flexbox transf ...

javascriptjqueryhtmlcss