Tips for making a dynamic sidebar using Bootstrap grid systems

While many solutions are available for fixed sidebars, I am in need of a solution for a non-fixed sidebar that scrolls down with the content. Specifically, I am using Bootstrap 4 grid system:

<nav class="navbar sticky-top">...</nav>
<!--content-->
<div class="container-fluid">
 <div class="row">
  <div class="col-md-3">
     <img src="https://via.placeholder.com/150x130">
  </div>
  <div class="col-md-3">
     <img src="https://via.placeholder.com/150x130">
  </div>
  <div class="col-md-3">
     <img src="https://via.placeholder.com/150x130">
  </div>
  <div class="col-md-3">
     <img src=https://via.placeholder.com/150x130">
  </div>
  <div class="row">
   ...
 </div>
</div>

In this setup, I require a sidebar to the left of the content, positioned under the top navigation bar. How can I achieve this considering that the number of rows needed is undefined and will be generated by a PHP loop?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To create a structured layout for your webpage, start by enclosing the content in a wrapper. Add an additional DIV element before that, wrap both in a row div, and apply the necessary classes to define the page width:

<nav class="navbar sticky-top">...</nav>
<!--content-->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 sidebar">
      SIDEBAR
    </div>
    <div class="col-md-10">
      <div class="row">
        <div class="col-md-3">
          <img src="https://via.placeholder.com/150x130">
        </div>
        <div class="col-md-3">
          <img src="https://via.placeholder.com/150x130">
        </div>
        <div class="col-md-3">
          <img src="https://via.placeholder.com/150x130">
        </div>
        <div class="col-md-3">
          <img src="https://via.placeholder.com/150x130">
        </div>
      </div>
      <div class="row">
        some other content...
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/XZedxM

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

What could be causing the images in my mdbootstrap carousel code to resize?

I am utilizing the carousel component provided on this webpage: . My intention is to have my images centered in their original aspect ratio, but unfortunately they are appearing stretched to fit the entire screen: https://i.sstatic.net/sRYBZ.jpg Here is t ...

imagebootstrap-4carouselimage-resizingmdbootstrap

What is the best way to prevent blank space when splitting a div into two parts?

Currently in the process of working on a school project that involves creating a website with an integrated database. The foundation for this project is an existing website from a previous assignment, created using PHP/HTML. The layout of my prior website ...

htmlcss

Python-JavaScript Integration Problem

I'm a beginner when it comes to Javascript, Python, and PHP. In my Javascript program, I have a button that triggers a Python script and displays the returned value on the screen. My goal is to steer clear of using Jquery and Json. Here are the snipp ...

javascriptpythonhtml

Is it necessary for CSS Media query to load all the referenced CSS files?

When utilizing a CSS Media Query to assign two different stylesheets, such as desktop.css and mobile.css based on the max-width, how does this process function? Is it necessary for both stylesheets to be loaded by the browser every time, and then the appr ...

htmlcssmobile-safarimedia-queries

Enhancing react-input-range with unique Custom Arrow heads

I'm currently working with react-input-range to create a price range slider. While I've managed to customize the CSS of the range slider, I now need to figure out how to add arrow heads inside the circles as shown below: https://i.sstatic.net/pm ...

javascriptcssreactjsless

Move Picture with Click (like the action on Google Maps)

Currently on the lookout for some code that will enable me to manipulate a floor plan in a manner reminiscent of the one showcased at whitehouse.gov I am in the process of coding a website that would benefit from integrating a similar function with their ...

jquerycssdhtml

Divide the cookies on the webpage

Today I was working on some coding tasks when I encountered an error: Cannot read properties of undefined (reading 'split') at getCookie ((index):38:49) at (index):47:31 The section of my code where the issue occurred (beginning at line ...

javascripthtmlcookies

CSS: Apply unique padding to the last element without the use of additional classes

My challenge involves a div housing three images, each about 31% in width. The goal is to have padding between them, with the final image having no right padding so that collectively they match the width of a larger image above. Here's an example... ...

htmlcss

Problem encountered while attempting to sort a table with JavaScript and jQuery

Having trouble sorting my table by the content in the first column. I've tried implementing code similar to the one found in this ANSWER, but unfortunately, it's not working as expected for me. When you run the snippet, you can see that the table ...

javascriptjqueryhtmlsorting

What is the reason for nth-of-type selectors not functioning on the third element?

I have a question regarding CSS nth-of-type. In the following code snippet, nth-of-type(2) and nth-of-type(3) are functioning properly, however, nth-of-type(4) and nth-of-type(5) are not working as expected. Could there be an issue with my code? <div i ...

htmlcsscss-selectors

Unusual behavior observed while looping through an HTMLCollection returned by the getElementsByClassName method

After spending some time debugging, I discovered an issue with my function that changes the class of elements to modify their properties. Surprisingly, only specific elements were being affected by this change. It took me a while to troubleshoot and resolv ...

javascripthtmlgetelementsbyclassnamehtmlcollection

Stack one image on top of another while maintaining their original proportions using HTML and CSS

I have two images, one is used as a background (A) and the other (B) is positioned over a portion of the background. The issue I am facing is that when the resolution changes, the image B moves and is no longer in the desired position. https://i.sstatic.ne ...

htmlcss

No output received after fetching data from mysql database

My goal is to fetch data from a MySQL database without the need to refresh the page. I am implementing a live search feature to retrieve information from the database based on user input. However, when I click the button after entering the name of a smartp ...

phpjqueryhtmlmysql

Finding the value of a span tag using a specific CSS class with jQuery

How can I retrieve the value of a span tag based on its css class using jQuery? <span class="page-numbers current">3</span> I attempted to do so with the following code: var pageno = $(".page-numbers current").val(); alert(pageno); Howeve ...

jquerytexthtml

Is there a way to switch the cursor from grab to grabbing when the mouse is clicked down?

I am working on a draggable element and I would like the cursor to change to grab when hovering over it, and switch to grabbing when the user clicks and holds the mouse down. My current implementation closely follows the recommended approach in the top an ...

htmlcss

Customizing AngularJS directives by setting CSS classes, including a default option if none are specified

I have designed a custom directive that generates an "upload button". This button is styled with bootstrap button CSS as shown below: <div class="btn btn-primary btn-upload" ng-click="openModal()"> <i class="fa fa-upload"></i> Upload & ...

javascriptangularjstwitter-bootstrap

Encircle the words with imagery

I want to design a layout where an icon floats beside some text, just like how an image would align within a block of text. The text should wrap around the icon smoothly, and if it goes onto a new line, it should start directly below the first line of text ...

htmlcssreactjsmaterial-ui

What is the best way to ensure that a particular page on my WordPress site displays a responsive design?

The specific URL of concern is weddings.blaskphotography.com.au/photographs When accessing this page on an iPhone, I would like it to utilize the mobile stylesheet included in Woothemes' Canvas theme that I have implemented. My current setup involve ...

csswordpressresponsive-designhtmlwoothemes

Cannot conceal a text input field

I'm facing an issue with masking a text field that is generated after receiving an Ajax response. The Ajax request and response are working fine. I'm using the jQuery maskedinput plugin to achieve this. I've included all the necessary JS fil ...

jqueryhtmlajaxmaskedinput

Tips on aligning checkbox and label inside a div to the right side of the card

I'm attempting to shift a div that encloses a label and checkbox inside of a card to the right-hand side of the card. At present, it remains on the left side only. I've experimented with "float:right" numerous times both with and without absolut ...

htmlbootstrap-4