Is it possible to create a left and right fixed sidebar with content in the middle using two <nav> elements in Bootstrap 5 markup structure? Here's an example of what I mean:
<nav>
<div>left sidebar</div>
</nav>
<main>
<div>main content</div>
</main>
<nav>
<div>right sidebar</div>
</nav>
How can we achieve this using basic Bootstrap 5 classes or CSS?
Utilizing a 12-column grid system, Bootstrap provides a flexible way to structure your layout. You can easily customize the grid-column values within a single row to suit your design needs (for example, using 2-8-2 columns).
For implementing sticky positioning on nested elements within each nav, you can employ the position: sticky property along with your preferred positioning values. This ensures that the content remains fixed on the screen while scrolling through the main content.
/* ----- Custom CSS Styling ----- */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper.row {
flex-wrap: nowrap;
margin: 0;
}
.wrapper.row>* {
padding: 0;
text-align: center;
}
/* ----- End of Custom CSS ----- */
.col-md-2 {
background-color: tomato;
}
.col-md-2 div {
position: sticky;
top: 0;
}
.col-md-8 {
background-color: limegreen;
height: 175vh;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98d978a9788">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="wrapper row">
<nav class="col-md-2">
<div>left sidebar</div>
</nav>
<main class="col-md-8">
<div>main content</div>
</main>
<nav class="col-md-2">
<div>right sidebar</div>
</nav>
</div>Do you need help creating a layout like this:
<div class="d-flex">
<div>left column, give me a specific width</div>
<div class="flex-fill">middle column, will fill up remaining space</div>
<div>right column, give me a specific width</div>
</div>
As mentioned, the side columns have fixed widths (define a class for them), while the middle column will expand to fill any remaining space within its parent container
I am seeking to understand the logic behind a zoom-able graph similar to the one on Google Finance. I am aware that there are pre-made components available, but I am interested in a simple example that breaks down the underlying logic. ...
Currently, I am faced with a dilemma regarding some CSS hover effects and table formatting. Despite successfully implementing most aspects of the design, there is an issue with how different browsers interpret padding within elements during color changes o ...
I'm currently working on completing a theme and I've hit a roadblock. I am trying to add header support, but it's causing issues with my layout. Everything was running smoothly until I inserted this line of code: <img src="<?php heade ...
I'm having trouble with a slideshow carousel on my website. When the site loads, only the first image is shown and you have to either click the corresponding circle or cycle through all the images using the arrows for the image to display. I'm al ...
While creating a text box with a black transparent background, I encountered an issue where the text also became transparent. Can someone please point out where I went wrong? style.css #headertxt { position: absolute; right: 20px; bottom: 100px; backgr ...
Hey there, I'm looking to design a header similar to the one shown in this image. Can someone provide guidance on how I can achieve this UI using React.js? https://i.sstatic.net/zmW5x.jpg ...
Can anyone help me set a placeholder for a horizontal login form in Drupal 7? I want the placeholder text to disappear when clicked on, and I want it to display 'username' and 'password'. Here is the current code for the form. Thank you ...
I am currently using ngSwitchCase for 3 different cases, and I have noticed that I am duplicating the same code inside each case. Is there a way to eliminate this redundancy? The redundant code is located within the "app-device" component <div *ngS ...
I am trying to create a navbar that will only show up on the product category page of my Woocommerce website. Is there anyone who can provide me with the necessary PHP or JavaScript code to achieve this? Thank you in advance! Here is the HTML code of the ...
I would like the blue borders of these "ul" elements to be centered beneath the black "li" elements, with a width that is 50% of the child width. However, I'm unsure about how to achieve this. I attempted using ":before", but it only seems to work for ...
I am facing an issue with a page where a div is appended to the body of an HTML. The problem is that there are two scrolls appearing - one on the new overlaying div and another behind it. Here is an approximate structure of the page, how can I ensure that ...
There is a checkbox and dropdown menu on an HTML page. Upon clicking submit, if both are selected, there should be an error message stating that at least one of them is mandatory and prompting the user to select at least one value. To address this issue, ...
Imagine this HTML structure: /* Desired styling: */ .container { display: grid; grid-template-columns: 250px 250px 250px /* this is the part to automate */ grid-template-rows: 50px; } .child { width: 100%; height: 100%; background: ...
I am encountering an issue with a paper-input element in my code. Here is what it looks like: <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input&g ...
Looking for a better solution I currently have 5 sets of items. Button Text Dropdown Pagination Icon For larger screen sizes, specifically @media (min-width: 990px) {} I would like all items to be in a single row, like so: [button][Text][Dropdown][Pagi ...
I need some help with passing an array and input value from a form to a JavaScript function. The array, $quotes, contains posts. <form method="post"> <p>Search:<input type="text" name="qSearch" id="qSea ...
I used a foreach loop in jQuery to create some divs. Everything seems to be working fine, but for some reason, my divs are missing SOME class properties. Here is the code snippet I am using: $("#item-container").append("<div class=\"panel col-md-2 ...
I've shared about my project previously. Twice, actually. While the responses have given me better insight into my situation, they haven't been directly applicable. I take responsibility for this as I was posting an incomplete version of the fina ...
My datatable is causing me trouble as I try to add more rows in the td after the Name column. The rows are not aligning properly, and I need a solution. I want these new rows to be aligned with each other, but the number of rows may vary based on user inp ...
Is Flexslider not resizing its viewport height according to the current image on your site? The fixed height seems to be causing blank white space under shorter images. Are you inadvertently overriding Flexslider's responsive height function? Is there ...