Position a button freely on the grid layout of bootstrap4

I need help creating a sidebar in Bootstrap 4 with a floating arrow button to collapse it, similar to this example.

Currently, I'm using a `container-fluid` and dividing the row into a 2-8-2 layout for left sidebar, main content, and right sidebar. I'm uncertain if I should adjust the row or place the floating button between columns.

I haven't found a solution online that integrates a floating button within bootstrap's grid system, so any guidance would be appreciated.

See the image below for an idea where the floating button should go:

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

Edit:

Per @Imran Rafiq Rather's request, here's the HTML code, divided into three sections within a single row. The content itself can be simplified if necessary.

<!--main row (second row) in the grid layout-->
    <div class="container-fluid ml-n3">
        <div class="row" name="main-row">

            <!--sidebar-left-->
            <div class="col-2 position-fixed" style="height: 100vh;" name="sidebar-left">
                ...
            </div>

            <!--main-content-->
            <div class="col-8 offset-2 container-fluid" name="main-content">
                ...
            </div>

            <!--sidebar-right-->
            <div class="col-2 position-fixed offset-10 overflow-auto" style="height: 89vh;" name="sidebar-right">
               ...
            </div>
        </div>
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4grid-layout

Answer №1

For the sidebar on your website, add a button using the code <button>X</button>. Then apply the CSS below:

.sidebar{
  position:relative;
}

button{
  position:absolute;
  top:45%;
  right:-1rem;
}

Please Note: The button should be a direct child of the aside element. Placing it this way allows the button to be positioned freely within the aside.

Remember:

When a parent has a position:relative property, you can use position:absolute on its child elements and position them anywhere within the parent element, breaking out of the normal flow of the document!

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

Differences in functionality across various browsers when dealing with complex subgrid structures

After nesting a subgrid inside a padded subgrid within a grid, I noticed varying behavior across different web browsers. Chrome/Edge (Windows) Firefox (Windows) Safari MacOS https://i.stack.imgur.com/uHlto.png https://i.stack.imgur.com/SGxuC.png ht ...

csscross-browsersubgrid

replace the standard arrow key scrolling with a new custom event

Currently, I am in the process of creating a unique scroll box to address my specific needs. The standard html <select> box is not cutting it for me as I require two columns displayed, which I couldn't achieve with a regular <select>. Howe ...

javascriptjqueryhtmlhtml-select

Ways to eliminate the white background placed behind the arrow on my bootstrap carousel

I've been attempting to create a video carousel using Bootstrap 5, and one issue I'm encountering is the appearance of a white background when hovering over the arrow. Normally, it shouldn't display a background, but for some reason, it does ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-carousel

An alternative method for storing data in HTML that is more effective than using hidden fields

I'm trying to figure out if there's a more efficient method for storing data within HTML content. Currently, I have some values stored in my HTML file using hidden fields that are generated by code behind. HTML: <input type="hidden" id="hid1 ...

javascriptjqueryhtmlajax

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px. I am currently utilizing event.pageY While this functions correctly on a ...

javascriptjqueryhtmlcss

Utilizing border-radius specifically on the ul element to apply rounded corners to only the outer li items

I'm exploring a concept where I want to create a curved border around the list items, both on the outside and inside. Here are some examples: Right Check out the correct curved border here Wrong: See the incorrect curved border here Please note, ...

htmlcss

Page cannot be adjusted to fit the viewport

My goal is to have the page fit perfectly within the viewport, but despite using the body properties below, I am still seeing a vertical scrollbar. body { display: grid; grid-template: .8fr 4fr / 1fr 4fr; max-height: 100vh; margin: 0; } I'm w ...

htmlcss

Navigating through web elements with Selenium is made easy with the use of wild

Can a single xpath expression be used to cover all of the following: //center/b[contains(string(), 'New password')] //center/h3[contains(string(), 'Renaming user ID')] //h3/center[contains(string(), 'Updating Email to')] //h3 ...

htmlseleniumxpath

"Learn an effective method for presenting JSON variable data in a Bootstrap modal with a clean design using three distinct columns

I have successfully loaded JSON data into my HTML page using JQuery. By clicking a button, I can trigger a bootstrap modal that displays the content of the JSON variable. However, there is an issue with how the JSON data is displayed. I need the data to b ...

javascriptjqueryhtmljsonnested-loops

Opting for HTML tags directly rather than using div.class

On my blogsite, I have implemented special tags that are designed to be user-friendly for my colleagues who may not be familiar with HTML. For instance: <question>...</question> and <answer>...</answer> These tags are then style ...

htmlcross-browser

What are some strategies for increasing my website's mobile responsiveness?

I've recently completed my online portfolio, and it appears to be functioning properly on desktop computers. However, I'm encountering responsiveness issues when viewing it on other devices or smartphones. Even though I have included the necessar ...

cssbootstrap-4flexbox

Is there a way to obtain the ID of the submit button type?

I am wondering if it is possible to retrieve the value of a submit button's id without using JavaScript, as I need to insert these values into a MySql database. Below is the code snippet I have been working on: <form action="messages.php" method= ...

phphtmlsubmit

Assistance needed with extracting specific information using Ajax and C#

I have developed an employee management website using .Net and ASP Entity Framework. On the main page, you can view a list of all employees with their names. However, clicking on a specific employee takes you to another page Profile/Index, where only deta ...

c#htmlasp.netajax

Reduce the size of a webpage by 10%

Have you ever noticed that when you press Ctrl+- on any browser, the page scales down to 90% of its original size? It actually looks nicer at 90%, so I want my webpage to default to opening at 90% instead of 100%. I've tried following common approach ...

javascripthtmlcssweb

Accessing Facebook through Login with only a button visible

I need help with checking the user's login status on Facebook. I have implemented the code provided by Facebook, but all I see is the login button. How can I determine if the user is already logged in or not? function testAPI() { console.log(&apo ...

javascriptjqueryhtmlfacebook

My website experiencing issues due to Firefox 23.0.1 altering the CSS and causing disruptions

After setting up a test site for a client to review as part of a proof of concept, I noticed an unexpected white line while checking across different browsers. (loading correctly in all browsers except FF) In Firefox, there appears to be a thin ~10px li ...

htmlcssfirefoxbackground-color

What is the best way to store and retrieve data from the current webpage using HTML, CSS, and JavaScript?

Is there a way to persistently save the button created by the user even when the browser is refreshed? Here is an example code snippet: function create(){ const a = document.createElement("button") document.body.appendChild(a) const b = documen ...

javascripthtml

Ways to verify an iCheck located on the following page

Here is the code snippet I am currently working with: $("#add-new-size-grp").click( function (event) { event.preventDefault(); $.ajax({ type: "get", url:"ajax-get-sizes.php", success: function(result){ $("#sizeg ...

jquerycssdatatablesicheck

Utilizing HTML/CSS with React/Bootstrap: A Comprehensive Guide

Looking for help with integrating HTML/CSS code into React/Bootstrap? I need assistance with coding in React using Bootstrap. How do I effectively use components and props? Even after installing bootstrap, I am encountering errors. Is it possible to dire ...

javascripthtmlreactjsbootstrap-5