What is the best way to create a full-height div overlaying a Bootstrap4 grid and sliding out from the right side of the container?

Currently, I am in the process of learning how to use Bootstrap 4.

My goal is to have a div positioned on top of the grid, with content underneath it. I want this div to be aligned to the right side of the grid (not the screen), have a width of 200px, cover 100% height, and be fixed.

I have tried multiple solutions using markup and CSS, but so far, I can only manage to position it on the right side of the user's screen.

As an additional challenge, my plan is to incorporate jQuery to make the div slide in and out. I believe I can figure that part out myself once I solve the positioning issue.

Currently, I am experimenting with a simple bootstrap grid setup:

<div class="container">
  <div class="row">
    <div class="col-12">
      Header row
    </div>
   <div class="col-12">
      Middle row
    </div>
   <div class="col-12">
      Bottom row
    </div>
  </div>
</div>

To further illustrate my desired outcome, here is a wireframe: https://ibb.co/zFxJJZT

htmlcssbootstrap-4

Answer №1

To place a div on top of a container, you should use absolute positioning. Remember that when you set a div to position absolute, the parent element should have a relative positioning. It is advisable to read this article for better understanding.

Simply insert the div inside the container and apply the class position-absolute in Bootstrap 4. Additionally, ensure that the div does not position itself according to the body by adding the position-relative class to the container div.

.side-bar {
  height: 100%;
  width: 200px;
  z-index: 2;
  right: 0;
  top: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container position-relative bg-dark text-white col-6">
  <div class="position-absolute side-bar bg-primary">
    side
  </div>
  <div class="row">
    <div class="col-12">
      Header row
    </div>
    <div class="col-12">
      Middle row
    </div>
    <div class="col-12">
      Bottom row
    </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

Creating a unique Tag Name for Dynamic Components in Angular

I want to customize a component @Component({ selector: '[my-component]', template: `<i>1</i><p>content</p><b>2</b>` }) export class MyComponent { public tagName: string; } Then there's another comp ...

htmlangularangular-componentsangular-dynamic-components

How can I enhance the appearance of the WordPress pagination numbers with a stylish border

Is there a way to apply a border around the WordPress pagination that starts from the first number and ends at the final number in the pagination sequence? The current structure of the WordPress pagination includes: <a class="prev page-numbers">< ...

jquerycsswordpresspagination

Clicking on the checkbox will remove the selected text within the contenteditable div

My objective is to create a custom text editor with basic functionalities such as bold, italic, underline, and paragraph styling only. The purpose of this project is for studying purposes. The main challenge I am facing is avoiding color-based interaction ...

javascripthtmlcss

"Trouble with Material-UI DataGrid: Column headers are being cut off

I am facing an issue where my column names are getting cut off even though they should fit in the available space. https://i.sstatic.net/kmKFi.png ...

cssreactjsmaterial-ui

When attempting to modify styles in IE10, I consistently encounter an error message stating "Unable to evaluate expression."

Below is a JavaScript function I have created to hide an HTML tag: function hideObject(objectId) { var obj = document.getElementById(objectId); if (obj) { obj.style.display = "none"; } } I encountered a strange issue when using this ...

javascripthtmlinternet-explorercross-browser

Identifying periods of inactivity using an embedded iframe

I have developed a website that showcases a three.js model within an iframe. My goal is to redirect users back to the homepage (index.html) after they have been inactive for a specified amount of time. While I have managed to achieve this using JavaScript, ...

javascripthtmliframeresponsive-designthree.js

Ways to reverse engineer HTML, CSS, and JavaScript code into HTML format

Help needed! I am trying to edit the user interface but all the code is in one line and I can't figure out how to decompile it back to its original state. Can anyone offer assistance with this? <html lang="en"><head><meta char ...

javascripthtmlcssreactjsdecompiling

The onchange event for the input type=file is failing to trigger on Google Chrome and Firefox

Update: Solved: http://jsfiddle.net/TmUmG/230/ Original question: I am facing an issue with handling image/logo upload alongside a hidden input type=file: <form class="image fit" id="theuploadform"> <input title="click me to chan ...

javascriptjqueryhtmlgoogle-chrome

The concept of promises and futures in JavaScript bears a resemblance to the functionality present

Is there a JavaScript library that offers promises and futures with syntax similar to C++? We need to use them in webworkers without a callback interface. I want the webworker to pause on a future and resume when the UI thread assigns a value to it. I ha ...

javascripthtmlweb-workerfuture

Issue with ThreeJs: Difficulty loading separate images on top and bottom surfaces

I've been trying to place different textures on the top and bottom sides using Threejs to display unique images on each side. However, I'm encountering an issue where the same image is being displayed on both the top and bottom sides. Below is th ...

javascripthtmlthree.jsimage-rendering

Steps to eliminate the active state of a button after clicking on an input

I am currently working on a component that consists of 4 preset buttons and a customized range input. The issue I am facing is that while I can toggle the active state on the buttons when they are clicked, I want to remove the active state from all the but ...

javascripthtmlcssformsbootstrap-4

AngularJS templateUrl changes on page refresh``

I am currently using an angular packet template that consists of 11 pages, each with a corresponding button. The route code for this template is as follows: state('app.pagelayouts.fixedsidebar1', { url: "/fixed-sidebar", templateUrl: "assets ...

htmlangularjs

The block tag on line 8 is invalid: 'endblock'. Have you perhaps overlooked registering or loading this tag?

As a newcomer to Django, I have been learning from various Youtube tutorials. Even though I followed the steps exactly, I encountered a block tag error in my code. Here is an excerpt from my base.html template: <head> <meta charset="UTF-8"& ...

pythonhtmldjango

Bug with the square corners of Bootstrap input fields

Currently working on a website (using Bootstrap) that includes a registration form. When adding validation feedback divs, I noticed that the right-hand corners of each input field are appearing squared instead of rounded like the left-hand corners. Here i ...

twitter-bootstrapbootstrap-4

Unlimited Rotation with CSS3

I'm attempting to create a spinning image effect that rotates 360 degrees infinitely on hover. However, it seems that the background element I've used to display the image might be causing issues. I'm not sure how else to display the image w ...

htmlcssanimationtransition

Having difficulty changing the background color to black for the parent div that houses multiple child divs

Here is an example without the height attribute provided: http://jsfiddle.net/karthik64/pFcpX/ And here it is with the height attribute included: http://jsfiddle.net/karthik64/pFcpX/1/ The issue arises when I try to set a fixed 'height' attribu ...

htmlcss

Creating a tooltip with a left arrow and a bordered design

I am looking to create a tooltip that displays its content after clicking on the tooltip tip icon. Currently, it only works on hover, but I want it to be clickable and mobile responsive. Desktop design should resemble: https://i.sstatic.net/FQPyt.png Mob ...

javascriptjqueryhtmlcssbootstrap-4

Is there a way to stop these symbols (♈♉♊♋♌♍♎♏♐♑♒♓) from being substituted with emojis?

I am currently working on a project involving the simulation of the Prague Astronomical Clock (). My goal is to display the glyphs representing signs of the zodiac, which are in the Unicode range U+263C-2653 along with other astronomical symbols. My prefe ...

cssfonts

Choosing a container element with jQuery

On an older website using jquery and nodejs, I am working on some filtering tasks. My goal is to target the b elements that are enclosed within a p tag. Specifically, I only want to select those b elements that do not have any text surrounding them. The T ...

javascriptjquerycssnode.js

Strategies for Fixing TypeError: Object [object Object] does not possess the 'on' method

Upon adding a WYSIWYG editor to my HTML code, I encountered an error despite having included all the necessary JS files. xyz.html <html> <head> <script src="js/angular/angular.min.js"></script> <script src= ...

htmlangularjs