Showing one column fixed to the left and the other column scrollable to the right using CSS in Bootstrap 4

I have a bootstrap row with 2 cols inside. One col needs to be sticky on the left side, while the other col on the right side should contain multiple scrollable cards with text content.

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

Looking at the image provided, the "Article" and "Post" cards should remain fixed in their position, while the posts on the right should be scrollable.

This is the code I currently have:

<div class="container-fluid">
  <div class="row">

    // Left column
    <div class="col-md-3">
      <app-articles></app-articles>
      <app-navigation></app-navigation>
    </div>


    // Right column
    <div class="col-md-9">
      <div class="card" *ngFor="let post of posts; let i = index"></div>
    </div>

  </div>
</div>

Any suggestions on how to achieve this layout?

htmlcsstwitter-bootstrapbootstrap-4angular-material

Answer №1

In the case of utilizing bootstrap 5, the framework offers a built-in class called sticky-top for achieving the same effect.

 <div class="container-fluid">
    <div class="row">
     // Row 1 should be on the left
      <div class="col-md-3">
        <div class="sticky-top">
          <app-articles></app-articles>
          <app-navigation></app-navigation>
        </div>
      </div>

    // Row 2 should be on the right
    <div class="col-md-9">
      <div class="card" *ngFor="let post of posts; let i = index"></div>
    </div>
  </div>
</div>

If you prefer a fixed position instead, you can replace the class with fixed-top, but it is important to consider alignment when using position: fixed. For further details on position classes, please consult the official Bootstrap 5 documentation https://getbootstrap.com/docs/5.2/helpers/position/

I hope this solution meets your needs :)

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

Connecting images and text from a distance

After days of researching this topic, I have not found any solutions that align exactly with what I am trying to achieve. I believe it should be a simple task using just HTML and CSS, but I seem to be facing some difficulties. Initially, my goal was to ma ...

htmlcss

using css to pass arguments

I need help with a code that I have, here's the structure: <div className="site-col-1"> content 1 </div> <div className="site-col-2"> content 2 </div> Here is how the corresponding CSS file looks... .s ...

htmlcssreactjssass

Implementing Image Data in AngularJS: A Guide to Binding Images to IMG Tags

Allow me to explain the problem further. I am retrieving a user's profile picture by calling an API that returns image data, as shown in the screenshot below https://i.stack.imgur.com/t8Jtz.jpg https://i.stack.imgur.com/pxTUS.png The reason I canno ...

javascriptjqueryhtmlangularjs

show.bs.modal event does not trigger within a bootstrap 4 modal that is loaded externally

I am trying to implement a feature where a common modal dialog can be loaded into any page from an external file. While the functionality works, I am facing an issue where the show.bs.modal and hide.bs.modal events are not triggered when the modal markup i ...

javascriptjquerybootstrap-4bootstrap-modal

What could be causing the href to malfunction on my local website?

I'm currently working on adding a new link that directs to a local HTML website within a menu list on a website. The main website is in ASPX format, but my focus is on the HTML version. The link I want to add leads to an HTML website stored on my loca ...

javascriptasp.nethtmlpermissions

What is the best way to arrange the information in JSON in ascending order and display it in a table format?

I am working with a mat-table and have used GET to display my data. I now want to sort the data in ascending order based on the db-nr from my JSON. Here is an excerpt from my JSON: { "period": 12.0, " ...

javascriptangulartypescriptangular-material

How to position an image on top of each printed page using HTML/CSS (SCSS)

I've created a simple and small webpage that looks like this: https://i.sstatic.net/R7Ajz.png Everything is perfect in the browser, with all the styles (margin, padding, etc.) just as I want it. However, my issue lies in the print view of the page. ...

javascripthtmlcsssass

AngularJS remove a row from a table disrupts the formatting

Hello! I am attempting to delete rows from a table in Angular. I want the first two rows to have a red background and the rest to have a white background. If I try to delete the last row, it gets deleted but the color remains for the first row only (it sh ...

javascriptjqueryangularjshtmlcss

Creating a CSS template for organizing sidebar and footer divisions on a webpage

I am facing an issue with the layout of my website. I have a container that is positioned relatively and houses various divs for header, sidebar, main-content, and footer. The problem lies with the sidebar and footer components. The sidebar has been posit ...

css

JavaScript form button press tracker

Hello! I've been tackling a challenge involving a JavaScript function to count button clicks. The catch is, the button type is set to submit, causing the page to reload every time I click it. Below is the snippet of code that contains the problemati ...

phpjavascripthtmlbuttoncounter

What is the best way to blur the background image without impacting the content displayed on top?

Is there a way to blur the background image without affecting the content above it? I'm having trouble achieving this as blurring the parent element also blurs the content. Any suggestions on how to fix this issue? I've tried a few steps but none ...

htmlcssbootstrap-4

Move the search bar to the left side of the screen instead of the

Is there a way for the search bar in my navbar's dropup menu to transition from right to left? Currently, the dropup menu is positioned on the far right of the screen as desired, but when I click on the search button, the search bar extends off the sc ...

htmlcssbootstrap-5

What is the best method for integrating custom CSS into Extjs 6?

Transitioning from Extjs 4.2 to Extjs 6.2 has presented a challenge for me. In the past, I would include a custom css file in the head using a simple link placed after the Extjs inclusion. <link rel="stylesheet" href="/custom.css" type="text/css" chars ...

cssextjsextjs6

Having trouble with jQuery not functioning properly in IE9 when trying to add items to a List

I've created a listbox that allows users to add or remove items. To add an item, they can enter text in a textbox and click the "Add" button, which will prepend the text to the top of the list if it's not already present. I used jQuery to handle ...

jqueryhtmlinternet-explorer

What is the method for displaying map tooltips by default rather than on mouseover?

Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover ov ...

javascriptjqueryhtmlcssgoogle-maps

"Troubleshooting a malfunctioning PHP contact form that is not functioning properly

Here's some of my JavaScript code: var form = $('#main-contact-form'); form.submit(function(event){ event.preventDefault(); var form_status = $('<div class="form_status"></div>'); $.ajax({ url: $(th ...

javascriptjqueryhtmlajax

javascript/jquery - steps to design an effective modal page overlay

Struggling for the past few weeks to create a modal dialog using javascript/jQuery. While iOS and Android devices seem to work fine, Windows mobile/Opera mobile often present issues with the modal size. It either requires excessive scrolling or ends up bei ...

javascriptjquerycssmodal-dialog

Display a block by using the focus() method

My objective is : To display a popin when the user clicks on a button To hide the popin when the user clicks elsewhere I previously implemented this solution successfully: Use jQuery to hide a DIV when the user clicks outside of it However, I wanted to ...

javascripthtmlcss

Changing the color of a pressed Bootstrap 4 button

After making changes to the bootstrap css class of the button such as the color, font size, and font color, I noticed that when I click and hold the mouse on the button, the color changes. Even though I set the color to green, when I click and hold the mo ...

htmlcssbuttonbootstrap-4

Enhance your Angular-material calendar by incorporating tooltips for dates

I am attempting to include a tooltip on Angular Material calendar dates. I have experimented with using matToolTip but unfortunately, nothing appears when hovering over the dates. <mat-calendar [dateClass]="dateClass()" [startAt]="month" [selected]=" ...

angularangular-material