Adjusting boxes (both up and across) as the window is resized with Bootstrap 4

CSS

.main{
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 20px
}

.left{
    max-width: 250px;
    height: 1%;
    border-radius: 20px;
}

.right{
    max-width: 250px;
    height: 1%;
    border-radius: 20px;    
}   

.parent-container {
    display: flex;
}

HTML

<div class="parent-container">
   <div class="container left">
       <div class="row">
           Left content
       </div>
   </div>

    <div class="container card main py-3">
        <div class="container card">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2>TITLE2</h2>
                    </div>
                </div>
            <div class="row">
                <div class="col-md-12 text-center">
                    <a href="#" class="link1">
                      <img src="2.jpg">
                        <h3>Title3</h3>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container right">
        <div class="row">
            <div class="right-content">
               Right content here
            </div>
       </div>       
   </div>
</div>

When my page layout is full width, it appears as follows:

[navbar]
[1][2][3]

Previously, I was advised to use "order-last order-md-first", but this did not produce the desired arrangement as demonstrated when resizing the window:

[navbar]
[2][3][1]

My aim is to achieve the following effect:

[navbar]
[2][3]

....[1]

(placing the [1] div just below the [3] div)

Is there a way to achieve this layout? Thank you for your help.

Answer №1

In order to achieve the desired outcome, it is essential to incorporate both the order classes and the offset classes.

Firstly, addressing the columns:

col-lg-3 - col-lg-6 - col-lg-3 in the provided code signifies that the sidebar columns occupy 3 units on larger screens, while the center column accounts for 6 units (totaling 12 units).

For smaller screens (smaller than lg), the center column expands to 8 units (col-8) and the right column to 4 units (

col-4</code), maintaining a total of 12 units even on smaller screens. </p>

<p>Consequently, the left column necessitates <code>col-4
and an 8-unit offset on smaller screens to align directly below the right column.

Therefore, a specific combination of order and offset classes is crucial for the left column:

order-last order-lg-first offset-8 offset-lg-0

  • order-last denotes the default order for the left column, applicable to the smallest screens (Bootstrap 4 follows a "mobile-first" approach).

  • order-lg-first signifies that the left column gains priority from large (lg) screens and onwards.

  • offset-8 establishes the default offset for the smallest screens.

  • offset-lg-0 confirms that there should be no offset from the large (lg) screen size onwards.

Presented below is the functional code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>
    
<div class="container mt-3">
    <div class="row">
        <div class="col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0 bg-warning">
            <h2>1</h2>
            Left content <br>
            Left content <br>
            Left content <br>
        </div>
        <div class="col-8 col-lg-6 bg-primary">
            <h2>2</h2>
            Center <br>
            Center <br>
            Center <br>
        </div>
        <div class="col-4 col-lg-3 bg-secondary">
           <h2>3</h2>
            Right content <br>
            Right content <br>
            Right content <br>
        </div>
    </div>
</div>

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

Utilizing CSS3 transformation perspective on a div element when the window has finished loading

Greetings everyone. I've been experimenting with CSS3 perspective, and I'm encountering an issue where it only shows up while the window is loading. Here's a fiddle ._red{ background-color:#f00; display:block; width:100px; ...

Obtaining select options in jQuery by utilizing the $(this) selector

Looking for a way to loop through and log each option available in a select dropdown box, but struggling with how to use $(this). This is the code I have so far: $('select').each(function(){ $(this).find('options').each(function() ...

Can someone please clarify how the nth-of-type selector functions?

I can't understand why the nth-of-type selector needs to be set to 2 instead of 1 for the first sibling of this type in the code. To see the code in action, check out this jsfiddle: https://jsfiddle.net/xj5hvn16/ If anyone could kindly provide an ex ...

Struggle with uploading images in codeigniter

My issue lies in saving data to the database after displaying it on the front end. Specifically, I have a problem with the image upload function. When I try to save the image path in the database, it saves the full file path like C:/xampp/www/htdocs/rentoz ...

adjust the size of the textarea to perfectly fill the available space

I want my textarea within the wrapctxt container to always fill up the remaining space below the wrapctop section, reaching the bottom of the wrapc element. .panelb{ display:grid; grid-template-columns: 130px 34% auto; height:100vh; width: ...

Can you use ng-show within ng-if in Angular?

How can I make this input only show a property is true per the ng-if? The current code looks like this: <input type="button" class="naviaBtn naviaBlue" ng-if="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)" value="outstandin ...

Looking to place the bootstrap menu icon on the right side of the page

I have a bootstrap menu item on my website and I want to move the menu icon to the right corner of the page. How can I modify the code to achieve this? #menu { position: relative; color: #999; width: 200px; padding: 10px; margin: auto; font-fa ...

Implementing CSS animations in ReactJS: A guide to activating onClick and onHover events

Is there a way to activate the onClick and onHover CSS animations for the ReactJS button component below? I attempted to use ref = {input => (this.inputElement = input)}, but I only see the animation when clicking the button. <td> ...

Guide for accessing and interpreting a random folder arrangement using JavaScript located alongside index.html

I am currently developing a testing reporting tool that organizes images into folders, resulting in a structure similar to this: root/ /counter/ img1.png img2.png /alarm/ img3.png The names of the folders like counter and alarm are not f ...

Absence of peer dependencies

As a novice in the world of npm and angular projects, I have encountered an issue while using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfadddbf8ed9aa7beb1aea1b0">[email protected]</a> in my package. ...

Remove information inside table cells <td> when the table is in edit mode by using JavaScript or jQuery

I am facing an issue where I need to clear the data in a HTML td onfocus, especially in an editable table using JQuery tabledit. The table is populated with data from a database and I want to be able to edit a td without having to manually delete the exist ...

The onclick function fails to function properly following an Ajax reload of the <div> element

I have an issue with my onclick function that only works the first time. Every time the onclick function triggers an ajax request, it successfully reloads a div which contains code to retrieve values from SQL and build an HTML table using a for loop. Alth ...

Eliminate the need for background video buffering

I have a piece of code that I'm using to remove all the created players for my video elements. The code works fine, but I'm facing an issue where the video keeps buffering in the background after it's changed via an ajax call success. Can yo ...

Ensuring even distribution of three divs within a container

Imagine a container that is 1200px wide, with three divs inside. Each div is only 292px wide. The first div should align with the left margin, the third div with the right margin, and the second div should sit right in the middle of them. Adding to the c ...

The exact problem with aligning the table

Below is a simplified version of my code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body style="font-size: 36px"> </body> </html> <html> ...

Strategies for patiently waiting for an object to appear before loading the HTML

After logging into my service, I download data from a REST API, and based on that data, I display certain tabs. However, I am experiencing issues with loading the HTML content once the data has been retrieved. The ngif directive at the beginning of the H ...

GAE does not have access to background images

Having trouble loading background pictures in my GAE front-end app. "Failed to load resource: the server responded with a status of 404 (Not Found)". My app is a simple website, no GAE backend. Using Eclipse with Google AppEngine Plugin. Background pict ...

What could be causing this table to exceed its dimensions by 2 pixels?

Why is the height of this table 102px instead of 100px? Is there another CSS attribute that needs to be set besides: table { border-spacing:0; border-collapse:collapse; } For example, check out this example link. ...

Difficulty displaying SVG in Opera browser when using the Raphael JS library

Currently, I am experimenting with Raphael JS to create visually appealing SVG graphics on a webpage. You can view my progress at . Most browsers display the graphics properly except for Opera 11. In Opera, the graphics fail to render when clicking on any ...

Still Facing the 'appendChild' Error Even After Defining it

Looking for assistance in creating new elements to display information on a Discord bot list I'm currently developing. var btn = document.createElement("BUTTON"); btn.innerHTML = "Try It"; document.body.appendChild(btn); ...