Bootstrap 4 sidebar with a static width, when switched to mobile view the main content area vanishes

While searching for a solution to create a fixed width sidebar on Bootstrap 4, I have come across many examples. However, none of them seem to maintain the main content on mobile devices.

I have experimented with the following code:

<div class="row no-gutters flex-nowrap">
  <div class="col-md col-12 d-none d-xs-block d-sm-block ">
    Main area
  </div>
  <div class="col-md-4 col-12 sidebar">
    Sidebar
  </div>
</div>


.sidebar {
    max-width: 600px; min-width: 600px
}

Although this code partially serves the purpose, it causes the sidebar to disappear completely between 768 to 576 pixels.

My goal is to have a fixed width sidebar with the main area resizing and eventually disappearing as the screen size decreases.

csstwitter-bootstrapbootstrap-4

Answer №1

You can easily achieve this layout using Flexbox with just a few lines of CSS. Check out the code snippet I included below to see it in action.

If you want to learn more about Flexbox, feel free to explore the following resources:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.wrapper {
  display: flex;
  height: 100vh;
}

.sidebar {
  min-width: 150px;
  max-width: 150px;
  height: 100%;
  background: grey;
  padding: 20px;
}

.content {
  padding: 20px;
  height: 100%;
  background: lightgrey;
}
<div class="wrapper">
  <div class="sidebar">
    sidebar
  </div>
  
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores
  </div>
</div>

Answer №2

It seems like the solution you're searching for is right here:

@media (min-width:768px) {
  .sidebar {
    max-width: 600px; min-width: 600px;
  }  
}
.sidebar {
  background-color: #f5f5f5;
}  
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters flex-nowrap">
  <div class="col d-none d-md-block">
    Main area
  </div>
  <div class="col sidebar">
    Sidebar
  </div>
</div>

I included the specific size rule in a @media query for md screen sizes and above, and I adjusted the column classes accordingly.

Since you are customizing the width of the sidebar, there is no need for the col-* classes on the columns.

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

Enhancing WordPress Icons for Parent and Child Elements

I am seeking to customize icons on a WordPress website. The site contains a variety of product categories, including subcategories. https://i.sstatic.net/sTm1O.png My goal is to display one icon for parent categories and a different icon for child catego ...

htmlcsswordpressicons

Adding space around images in JavaFX

Just a quick question. I'm wondering if there is a way to apply padding to an ImageView using CSS in JavaFX. I've attempted insets, padding, and other methods with no success. Alternatively, can the same effect be achieved with a Text Object? ...

javacssjavafx-8

Boosting Your SCSS (SASS) Productivity

I'm curious if there are any ways to make the code below more efficient or dynamic. I've already achieved the desired result, but I'm interested in optimizing it further. The Script Any suggestions would be highly appreciated, Cheers, ...

htmlcssscriptingsass

Conceal the scroll bar within a div set to 100% viewport

Having some difficulty with a scrollbar on my new portfolio. The layout consists of two columns, with content on the left. I need the ability to scroll without displaying the scrollbar. I attempted the code below but it did not work. Could the issue be rel ...

htmlcss

Step-by-step guide for showing a bootstrap modal when a checkbox is clicked

I have a custom checkbox that I want to use to trigger the opening of a bootstrap modal. Essentially, I want the bootstrap modal to appear when the checkbox is checked, similar to how it would open when a button is clicked. I hope that clarifies the ques ...

bootstrap-4

Determine whether the element is visible in at least half of the viewport

I am working on a project that involves 4 cards with images. I want the image to animate in from the left when it comes into viewport. I have finalized the CSS for this effect, but the JavaScript code always returns false even when the element is visible o ...

javascripthtmlcss

how to style a page with a CSS arrow shape

Can someone help me figure out how to create an arrow similar to the one in this button using CSS? https://i.sstatic.net/gQi0l.png I've been able to create triangle-like arrows like the one below #triangle_arrow { top: 3pt; content: ...

csscss-shapes

Could you kindly repair the table for me?

I have a table that I am working on. All values and buttons in the table need to be centered horizontally and vertically. However, there is an issue where if I enter a button link as a value of any row, the button and other text values become broken and ...

htmlcssbutton

Could someone provide an example to illustrate the concept of "em is relative to the font size and % is relative to the parent element"?

Could someone provide an example of how "em is relative to the font size and % is relative to the parent element" works? What exactly do "relative to the font size" and "relative to the parent element" mean? ...

htmlcsstypography

Altering the character by striking a key

I have a canvas with custom styling. In the center of the canvas is a single letter. Please see the code below for reference. The goal is to change the displayed letter by pressing a key on the keyboard. For instance: Letter A is centered in the canvas: P ...

javascripthtmlcssevents

JQueryUI dialog is falling short in terms of maximum width

I am experiencing an issue with a jqueryui dialog that I have defined with a maxWidth setting. $("#myDialog").dialog({ autoOpen: false, width: 'auto', maxWidth: 1000, height: 'auto', position: [2 ...

jqueryjquery-uijquery-ui-dialogcss

What steps can I take to ensure that this list remains fixed at the bottom of the page?

Looking to have this content positioned at the very bottom of my webpage without any empty space below it. I'm having trouble applying the usual CSS to achieve this. .footer li{ display:inline; } <footer> <div cla ...

htmlcss

What is the best way to position two elements inline?

I was trying to create a container named project-item that looks like the image linked below: https://i.stack.imgur.com/6XzZ9.png My goal was to align the project logo and the title (h3) in one line, but I struggled to find a suitable solution. This is ...

htmlcss

Using JQUERY to fadeIn elements when clicking on a button and loading content from an external HTML

On my webpage, when a user clicks on a navigation link, instead of changing to a new page, the content from the linked pages loads into a div on the main page using JQuery and .load function. Both tests worked perfectly with this implementation. Now, I wa ...

jqueryhtmlcss

What are the disadvantages of not incorporating the main CSS file directly into the web page?

Optimizing the loading time of my webpages is a priority for me, especially when it comes to first-time loading and from cache. Despite that, I still prefer to have the browser re-validate all resources to avoid any strange displays or update issues caused ...

htmlcsshttpcachingwebserver

Having trouble with jQuery's recursive animation functionality

I have developed a function to scroll multiple images horizontally in the header of my website. Inside my header, I have implemented code that looks like this: <div class='images'> <!-- this div is 150% wide with overflow hidden --> ...

jquerycssanimation

"Preventing scrolling in Safari with CSS overflow:hidden isn't working as expected

Why does overflow: hidden on the body tag not disable scrolling on the page in Safari? It works in Chrome but not in Safari. I'm struggling to find a solution. Can anyone help? ...

cssreactjssafarioverflow

Why isn't margin working with position: fixed?

I need help finding a solution for incorporating margin in a box within my App class. The issue is that the position fixed property doesn't seem to work as intended. <div className="App"> <div className="box"> ...

htmlcss

Upon script load, a random item from an array will be displayed and recorded in a separate array

I'm working on a fun code project where I aim to display random animal names in different colors that change when a specific keyboard key is pressed. The challenge I'm facing is that the first random animal name in a random color only appears aft ...

javascripthtmlcss

The masonry reorganization is behaving strangely

I've recently started using masonry for the first time and you can check it out here: Although I have managed to set it up, I am facing some issues with its positioning of boxes when dragging items in. For example, instead of placing a medium-sized ...

javascriptjquerycssjquery-masonry