Expanding Column to Sidebar on Larger Screens in Bootstrap 4 while Reordering Content Areas when Needed

This is how I envision the layout for a full-screen desktop or laptop.

https://i.sstatic.net/7SAPW.png

For medium/smaller devices, my goal is to collapse the right sidebar below the search input area and before the content section.

Smaller Devices (Sidebar collapse)

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

I believe utilizing Bootstrap's order classes can help achieve this design change, but I am unsure about the exact grid layout structure (container, rows, columns) required.

The issue with the current code is that there is a large empty space below the search area on extra-large screens. I aim to have the content area fill this space directly after the search bar.

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

Here is a complete working example you can copy and paste:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <link href="css/bootstrap.css" rel="stylesheet">
        <title>Page Title Here</title>;

        <style>
            html, body {
                height: 100%;
            }
            div {
                border: 1px solid #9fcdff;
            }
            header {
                border: 1px solid #9fcdff;
            }
            main {
                height: 100%;
            }
            footer div {
                border: 1px solid #ff63ba;
                padding: 20px;
                margin: 0;
            }
        </style>


    </head>
    <body>

        <header>
            <nav class="navbar navbar-expand-md navbar-light bg-light">
                    <button class="navbar-toggler mr-2" id="nav-button"
                            type="button"><i class="fas fa-bars"></i></button>
                    <div class="ml-auto ml-md-0"></div>
                    <a class="navbar-brand">Website</a>
                    <i class="ml-md-auto fas fa-cog"></i>
            </nav>
        </header>

        <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-4 col-xl-3 d-none d-lg-block" id="sidebar">
                        <ul>
                            <li>Sidebar</li>
                        </ul>
                    </div>
                    <div class="col">
                        <div class="row">

                            <div class="col-12 col-xl-9 order-xl-0" id="search-stuff">

                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item">
                                            <a href="#">Home</a>
                                        </li>
                                        <li class="breadcrumb-item active" aria-current="page">Library</li>
                                    </ol>
                                </nav>

                                <form>
                                    <div class="form-group">
                                        <input class="form-control" type="search" placeholder="Search...">
                                    </div>
                                </form>

                            </div>

                            <div class="col-12 col-xl-3 order-xl-1" id="cards-stuff">
                                <div class="card">
                                    <img class="d-none d-xl-block card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17257b364f9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17257b364f9%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.
                                        </p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                                <div class="card">
                                    <img class="d-none d-xl-block card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17257b364f9%20text%20%7B%20fill%3Argb...
htmlcssbootstrap-4

Answer №1

Once again, I find myself answering my own question. In this case, I had to duplicate the code for the right sidebar and make it responsive based on screen size. This approach feels a bit unconventional - not sure if it's a common practice or considered bad form. Ideally, I wouldn't want to duplicate code, but due to the specific layout challenge involving columns placed between content blocks, it seemed necessary. If only the layout had required stacking elements at the top or bottom, things would have been much simpler.

Here's the solution I came up with. I doubt anyone will come up with a better one.

https://i.sstatic.net/l6Gwl.gif

The code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <link href="css/bootstrap.css" rel="stylesheet">
        <title>Page Title Here</title>

        <style>
            html, body {
                height: 100%;
            }

            div {
                border: 1px solid #9fcdff;
            }

            header {
                border: 1px solid #9fcdff;
            }

            main {
                height: 100%;
            }

            footer div {
                border: 1px solid #ff63ba;
                padding: 20px;
                margin: 0;
            }
        </style>


    </head>
    <body>

        <header>
            <nav class="navbar navbar-expand-md navbar-light bg-light">
                <button class="navbar-toggler mr-2" id="nav-button"
                        type="button"><i class="fas fa-bars"></i></button>
                <div class="ml-auto ml-md-0"></div>
                <a class="navbar-brand">Website</a>
                <i class="ml-md-auto fas fa-cog"></i>
            </nav>
        </header>

        <div class="container-fluid">
            <div class="row">

                <div class="col-lg-4 col-xl-3 d-none d-lg-block" id="sidebar">
                    <ul>
                        <li>Sidebar</li>
                    </ul>
                </div>

                <div class="col-lg-8 col-xl-6">

                        <div class="align-self-start" id="search-stuff">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <a href="#">Home</a>
                                    </li>
                                    <li aria-current="page" class="breadcrumb-item active">Library</li>
                                </ol>
                            </nav>
                            <form>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Search..." type="search">
                                </div>
                            </form>
                        </div>
                        <div class="d-lg-block d-xl-none" id="cards-stuff">
                            <div class="card">
                                <img alt="Card image cap"
                                     class="d-none d-xl-block card-img-top"
                                     src="img/placeholder.svg">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up the bulk of the card's content.
                                    </p>
                                    <a class="btn btn-primary" href="#">Go somewhere</a>
                                </div>
                            </div>
                            <div class="card">
                                <img alt="Card image cap"
                                     class="d-none d-xl-block card-img-top"
                                     src="img/placeholder.svg">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up the bulk of the card's content.
                                    </p>
                                    <a class="btn btn-primary" href="#">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="" id="content-stuff">
                            <div class="post">
                                <h2>Some Headline Here...</h2>
                                <p>CSS</p>
                            </div>
                            <div class="post">
                                <h2>Some Headline Here...</h2>
                                <p>CSS</p>
                            </div>
                            <div class="post">
                                <h2>Some Headline Here...</h2>
                                <p>CSS</p>
                            </div>
                            <div class="post">
                                <h2>Some Headline Here...</h2>
                                <p>CSS</p>
                            </div>
                        </div>

                </div>

                <div class="col-xl-3 d-none d-xl-block">
                    <div id="cards-sidebar">
                        <div class="card">
                            <img alt="Card image cap"
                                 class="d-none d-xl-block card-img-top"
                                 src="img/placeholder.svg">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up
                                    the bulk of the card's content.
                                </p>
                                <a class="btn btn-primary" href="#">Go somewhere</a>
                            </div>
                        </div>
                        <div class="card">
                            <img alt="Card image cap"
                                 class="d-none d-xl-block card-img-top"
                                 src="img/placeholder.svg">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up
                                    the bulk of the card's content.
                                </p>
                                <a class="btn btn-primary" href="#">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <footer>
            <div>Copyright 2020</div>
        </footer>


        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/custom.js"></script>

    </body>
</html>

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

When I tap on it, the box should shift its position

Here's a conundrum for you. I have a box that I want to move 200px to the left when clicked, but I'm struggling to make it work. Can someone please lend a hand and point out where I'm going wrong? <style> .box { width: 200px; ...

javascriptcss

Validation for radio buttons in Bootstrap 4

Looking for assistance with form validation using Radio elements on a Bootstrap 4 page. I want to display an error message underneath the radio element: <div class="invalid-feedback">Please choose an option</div> Below is the code snippet wi ...

htmlcssformsvalidationbootstrap-4

Error encountered when submitting HTML form containing file input: ERR_CONNECTION_RESET

I'm encountering an issue while trying to upload an image using an HTML form. Once I submit the form, after approximately 3-5 seconds, I receive the following error on the browser: ERR_CONNECTION_RESET The problem seems to arise with images larger ...

phphtmlforms.htaccessini

transferring information from an online submission to a mysql data repository

My registration form isn't saving input data to my database. Here is the code: The initial PHP code can be found in the HTML file containing the form, while the final PHP code is in registrationUpload.php. <?php include ('registrationUploa ...

phphtmldatabase

Modifying the Readonly Attribute of an ASP.NET Web Application with the Power of JQuery

Check out this snippet of HTML code <td style="width: 4pt;"> </td> <td> <span style="display: inline-block; color: Black; font-family: Arial; font-size: 9pt; font-weight: normal; width: 100pt; vertical-align: top;"> ...

javascriptjqueryhtmlasp.net

Are there any event triggers for History.pushstate?

My Google-fu is failing me. Consider the following code snippet: var stateObj = { state: "some state" }; history.pushState(stateObj, "page 2", "other.htm"); Does this trigger a window callback? I am aware of the following code: window.onpopstate = fun ...

javascripthtmlhtml5-history

Achieving an element placement in a navigation bar with flexbox and grid layout | HTML and CSS exclusive techniques

Need help achieving the desired result using only flexbox and grid layout. The goal is to place a search bar vertically centered and to the right of the navbar, while keeping the existing items on the left intact. Can you assist? /* Reset */ * { mar ...

htmlcssflexbox

Shift attention to the subsequent division after a correct radio option or text input has been submitted

I need to enhance the user experience on my form. When a user interacts with specific elements like hitting enter in a text input or clicking a radio button, I want to automatically focus on the next "formItem" division. My form structure is organized as ...

javascriptjqueryhtmlangularjsangular-material

The performance of a Google Dart application starts to decline over time

Recently I developed a game called Paratrooper using Dart. However, after playing for just 2 minutes, the game starts to slow down significantly. Here are some key observations: Chrome spawns 3 processes, each consuming more than 80 MB of memory The game ...

htmlperformancehtml5-canvasdart

Conceal or eliminate an element from the list upon selection

I have a list that is unordered, and I am looking for a way to remove an option from the list if it is selected. For Example: If a user chooses one of the options from the list, I want that option to be removed as it will be considered the selected value ...

javascriptjqueryhtmlcss

What is the most effective method for incorporating CSS using Javascript to target a specific aria-label attribute?

Is there a way to add a CSS property to a specific tag with a particular aria-label on document load? My goal is to change the flex order of a section to 2. I need help using JavaScript to target the aria-label 'block 1' so I can set the order t ...

javascriptcsstwittertampermonkey

Tips on how to horizontally align an icon and text using Material UI

As a newcomer to Material UI, I am facing an issue where my icon and text are not aligned: What I'm aiming for: This is the code I have so far: <div style={{ display: 'inline-flex', VerticalAlign: 'text-bottom', Bo ...

htmlcssreactjsmaterial-ui

Tips for organizing certain elements in a horizontal row

In the process of developing a WordPress plugin for shortcodes generation. The user can choose to create testimonials. For example, the shortcode below functions as a slider: [testimonial]Content 1[/testimonial] [testimonial]Content 2[/testimonial] [test ...

javascriptjqueryhtml

conceal any unnecessary space occupied by setting visibility to hidden

Hey there, I'm trying to get rid of the extra space caused by using visibility:hidden. When I choose sort by date, the default content is displayed as expected. However, when I select sort by topic, it appears below the output for sort by date. I don& ...

javascriptphphtmlcss

Tips for managing the fixed position property in CSS when dealing with overlapping elements

This image displays the overlap of two divs. One div contains a table with two buttons floating on the right, while the other div features an image. Here, the overlapping issue does not occur. I have detailed my problem with overlapping above and I aim t ...

htmlcssasp.netvisual-web-developer

What possible solutions could be given for this HTML/images task?

Today my exam paper was returned to me and I unfortunately did not pass the ICT section. The question required me to provide HTML code for two scenarios involving a web page with an image named sunset.png. If the image could not be displayed, it would show ...

html

Navigational link behavior in the React component with the <tr> element

I am in the process of developing a React application with a component that shares a resemblance to the following: class TableRow extends React.Component { constructor(props) { super(props) } render() { const handleClick = () ...

javascripthtmldomreactjs

extracting characters in php

Here's the HTML code I'm working with: <p style="color:red;font-size:12px;">This budget-friendly car offers great value, complete with air conditioning making it perfect for couples and small families. There is a ?500 excess, but it can be ...

phphtmlsubstring

Troubleshooting issues with mail subscriptions using Ajax and PHP

My Idea for Implementation I successfully set up a subscription form using PHP initially. However, I wanted to enhance the user experience by implementing an Ajax feature that would display a nice image and a "thank you" message without reloading the pag ...

phphtmlajaxformsmailchimp

Tips for showcasing the dynamic legend in a line graph

Within my project, the legend is being displayed dynamically. However, I am looking to showcase names such as "student-marks" and "studentannualscore" instead of numerical values like 0, 1, 2, etc. Currently, the values are appearing as numbers (e.g., 0 ...

javascripthtmlcsskendo-ui