Ways to showcase your style using Bootstrap

Can you help me figure out how to align this sidebar properly? I tried using the d-flex property but it doesn't seem to be working for me. The sidebar should be on the left side and the two containers should be centered.

For a clearer explanation, please check the following links:

https://i.sstatic.net/KOQ7T.jpg (desired outcome)

Here is the demo:-

https://jsfiddle.net/atwj9rhp/


                .item1, .item2{
                    padding: 1.5%;
                    background-color: #F4F4F4;
                    ...
                

                <header class="sidebar">
                    <div class="d-flex flex-column">
                        <ul class="my-4">
                            <li><a href="#">All</a></li>
                            <li><a href="#">To Pay</a></li>
                            <li><a href="#">To Ship</a></li>
                            <li><a href="#">To Receive</a></li>
                            <li><a href="#">Completed</a></li>
                            <li><a href="#">Cancelled</a></li>
                        </ul>
                    </div>
                </header>
                ...

htmlcssbootstrap-5

Answer №1

Here is the code snippet...

#sidebar {
  height: 100vh;
}

#first,
#second {
  height: 50vh;
}

#sidebar,
#first,
#second {
  border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d6cdd2cdd2">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e213e21">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row d-flex justify-content-around">
      <div class="col-4">
        <div id="sidebar">aaa</div>
      </div>
      <div class="col-8">
        <div class="row">
          <div class="col-12">
            <div id="first">bbb</div>
          </div>
          <div class="col-12">
            <div id="second">ccc</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Answer №2

<div class="d-flex">
    <header class="sidebar">

        <ul class="my-4">
            <li><a href="#">All</a></li>
            <li><a href="#">To Pay</a></li>
            <li><a href="#">To Ship</a></li>
            <li><a href="#">To Receive</a></li>
            <li><a href="#">Completed</a></li>
            <li><a href="#">Cancelled</a></li>
        </ul>
    </header>

    <div class="container items-content" style="width: 80%;">
        <div class="row justify-content-center item1">
            <div class="col-sm-2 pic-and-brand justify-content-rght">
                <h3>Essentiel</h3>
                <img src="/images/essentiel-trousers.png" alt="Essentiel Trouser" style="width: 60%">
            </div>

            <div class="col-sm-4 desc">
                <h4>High Waist Wide Leg Trouser</h4>
                <h4 id="size">Free Size</h4>
            </div>

            <div class="col-sm-2 text-center variation">
                <h5 id="variation-label">Variation:</h5>
                <h6 id="variation-value">White</h6>
            </div>

            <div class="col-sm-1 quantity text-center">
                <h5 id="quantity-label">Quantity:</h5>
                <h6 id="quantity-value">1</h6>
            </div>

            <div class="col-sm-3 price-and-remove text-end">
                <h3>P310</h3>
                <a href="#remove-item">Remove from cart</a>
            </div>
        </div>

        <div class="row justify-content-center item2">
            <div class="col-sm-2 pic-and-brand">
                <h3>Charlotte Folk</h3>
                <img src="/images/charlotte-cropped.png" alt="Charlotte Folk 1996 Tote Bag" style="width: 60%">
            </div>

            <div class="col-sm-4 desc">
                <h4 id="name">1996 Tote Bag</h4>
            </div>

            <div class="col-sm-2 text-center variation">
                <h5 id="variation-label">Variation:</h5>
                <h6 id="variation-value">Espresso Brown</h6>
            </div>

            <div class="col-sm-1 quantity text-center">
                <h5 id="quantity-label">Quantity:</h5>
                <h6 id="quantity-value">1</h6>
            </div>

            <div class="col-sm-3 price-and-remove text-end">
                <h3>P620</h3>
                <a id="remove" href="#remove-item">Remove from cart</a>
            </div>
        </div>
    </div>
</div>

Ensure that the parent div has the d-flex class instead of flex-column for proper functionality.

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

"Clicking on a hash link will refresh the current page

I have a snippet of code embedded on external websites that loads HTML, CSS, and JavaScript using a <script> tag. Within the code is a JavaScript function that triggers when a specific link is clicked: <a href="#">?</a> If there are Ja ...

htmlhashbrowser-bugs

When positioning 2 divs on top of each other, rotating one by 180 degrees causes it to be considered secondary in the visibility hierarchy. What is the reason behind this?

While delving into the realm of HTML, I stumbled upon a concept that has left me perplexed. Upon stacking two divs on top of each other, I observed an interesting phenomenon where rotating the second div by 180deg (i.e transform:rotateY(180deg)), causes t ...

htmlcss

Update the section tag upon submission using jQuery on a jQuery Mobile HTML page

I have integrated a jquerymobile template into Dreamweaver 6.0 to create a mobile app interface. The home screen features four buttons - specifically, View, Create, Update, Delete. Upon clicking the Create button, a new screen is opened (each screen corres ...

javascriptjqueryajaxhtmljquery-mobile

Instructions on deactivating the background when the sidebar is displayed and closing the sidebar by clicking anywhere other than the sidebar

I'm in the process of creating a sidebar for my website. When the sidebar is displayed (by clicking showRight), I want to disable the background content so that the user can't interact with anything outside of the menu. If the user clicks on th ...

javascriptjquerycsssidebar

Unusual behavior of diagonal viewBox in SVG

Trying to understand how the viewBox attribute works in SVG, but the code below is confusing me. Can someone please explain if this is a bug or the expected behavior of SVG? I can't seem to figure out what I'm doing wrong... <svg class="s ...

csssvgpositionviewboxsizing

Steps to indicate a selected check column in a grid

I am working with a grid that has a check column, and I need to programmatically mark the checkbox. This is how the check column is coded: columns: { items:[ { itemId: 'checkColumn', xtype: 'selectallche ...

javascripthtmlextjs

Achieve scrollability for right column (div) using Tailwind CSS

I am having trouble getting the content in the right column to scroll vertically. Can someone please help me identify what I'm doing wrong here? <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/> < ...

htmlcsstailwind-css

What is the process for extracting a numerical value from a text box and using it to update a database?

Trying to figure out how to add a numerical value entered into a text box to a value in a database table when the submit button is clicked. Let's say there's a table called customers in the database, with columns for name and balance. The goal i ...

phphtmlmysqlsqldatabase

Issue with Slider Width in WP 5.6 editor and ACF Pro causing layout problems

Is anyone else experiencing a specific issue after updating to WP 5.6? Since the update, all my websites are facing problems with rendering a Slick Slider in the Block Editor. Interestingly, everything looks fine on the front-end. The root of the problem ...

javascriptcsswordpressslick.js

Issue with Jquery function not executing on second attempt

/** Creates a table of iTunes data in HTML format **/ var appendValues = function(songArray) { songArray.each(function() { var title = $(this).find("im\\:name").eq(0).text(); var songImage = $(this).find("im\\:image").eq(0).text(); var ...

javascriptjqueryhtmlajaxweb

AngularStrap's bs-modal is failing to display content

I have a question, here is a Plunker with the code: http://plnkr.co/edit/SNFy2XcOBefUavG1QCqD?p=preview <button class="btn btn-default" data-template="customer.tpl.html" bs-modal="modal">New Customer </button> < ...

javascripthtmlangularjsangular-strap

Can you explain the significance of these specific HTML attributes within the button tag?

While browsing the web, I stumbled upon this HTML snippet: <button class="button--standard" mat-button mat-flat-button [disabled]=true >Disabled State</button> The combination of attributes like mat-button mat-flat-button [disabled]=true is u ...

htmlangularattributesangular-material

Adjusting margins for different screen sizes in Bootstrap 5

Is it possible to adjust spacing (margin/padding) per breakpoint in Bootstrap 5? Using something like mb-sm-2 doesn't seem to have any effect... Am I doing something wrong? I've already looked at the official documentation, but I'm still c ...

bootstrap-5

Is there a way to implement Bootstrap 5 toast in Vue.js and navigate to a different page, such as after submitting a form?

Is there a way to incorporate the bootstrap5 toast in vuejs while also redirecting to another page? For example, after submitting a form and being redirected to a new page, I would like a toast message to appear with the statement "Your form has been sub ...

javascriptvue.jsvuejs3bootstrap-5

Having issues with implementing Bootstrap 4 dynamic nav-pills in PHP CodeIgniter

When I select different product categories, only the items from the active category are displayed. When I click on another nav-item, the previously displayed items remain unchanged and I'm unable to change the class "show active" in the tab-panes. Co ...

phphtmlcodeigniterbootstrap-4nav-pills

Inserting jQuery into a Div container

I am attempting to execute a jQuery function within a dynamically generated div (subpage) through JavaScript. I'm relatively new to this, so please bear with me. Within the index.html file, I am filling a div using a JavaScript load command. <ul& ...

htmljquery

Modify the background color of a pseudo-element's property value dynamically

How do I change the background color of my burger menu by clicking on an icon? This is the CSS code I have: :root{ --pseudo-backgroundcolor: yellow; } .menu__icon span, .menu__icon::before, .menu__icon::after{ background: va ...

javascripthtmlcsspseudo-element

Creative Blueprint

Our company currently operates 3 browser based games with a team of just 4-5 coders. We are looking to enhance the collaboration within our coding team and streamline our processes. Considering the fact that our games are built using a mix of html, php, j ...

phpjavascriptcssxmlapplication-design

NuxtLink sending users to incorrect destination URL

I am facing an issue with my static generated Nuxt site. Everything works perfectly fine when I host it locally, but once I load it on GitHub Pages, the NuxtLink elements' hrefs are incorrect. For instance, one of my links looks like this: <NuxtLi ...

javascripthtmlvue.jsnuxt.js

It seems that FireFox does not fully support IFrame Data URIs

Whenever I attempt to load a PDF Data URI into an iframe (for example, src="data:application/pdf;base64,...") in FireFox (version 18.0.2 [latest release], on OSX), it ends up triggering a download window instead. Just take a look at the website JSPDF.com ...

htmlfirefoxiframe