Reordering columns in WHMCS Template using Bootstrap 4

Question

Reordering columns in WHMCS Template using Bootstrap 4

Currently in the process of redesigning my website's theme powered by WHMCS with Bootstrap 4. I am facing challenges in implementing column ordering in the client area similar to the default "six" template in Bootstrap 3. The goal is to have the Primary and Secondary navigation on the left side in desktop view, with the main content on the right, and in mobile view, the primary navigation should move above the content, followed by the secondary navigation:

Desktop View:

PN | MC
SN |

Mobile View:

PN
MC
SN

Here is the basic layout html:

<div class="container">
    <main class="row">
        <aside class="col-sm-3">
            Bootstrap 4 Card containing Primary Navigation
        </aside>
        <article class="col-sm-9">
            Main client area content
        </article>
        <aside class="col-sm-3">
            Bootstrap 4 Card containing Secondary Navigation
        </aside>
    </main>
</div>

Having difficulty getting the secondary navigation to align on the left below the primary navigation in desktop view; it is currently positioned below the main content. With Bootstrap 4's use of flex-boxes, the previous solution of using a left float in Bootstrap 3 no longer works.

Edit:
Provided below are the fiddles for better understanding:

Note: Removed images as the fiddles demonstrate the same setup.

html css bootstrap-4 whmcs

Answer 1

Answer №1

There seems to be a mistake in the way you are using the bootstrap grid system. The sum of all columns should always add up to 12. I have provided the correct code for you below:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <main class="row">
        <div class="col-lg-3 col-ms-3 col-sm-3 col-xs-3">
        <div class="row">
        <aside class="col">
            BS4 Card containing Primary Navigation
        </aside>
        </div>
        <div class="row">
        <aside class="col">
            BS4 Card containing Secondary Nav
        </aside>
        </div>
        </div>
        <div class="col-lg-9 col-ms-9 col-sm-9 col-xs-9">
        <article class="col">
            Main client area content
        </article>
        </d

Don't forget to add a media query for the mobile view to make the secondary navigation position:fixed.

Answer 2

There seems to be a mistake in the way you are using the bootstrap grid system. The sum of all columns should always add up to 12. I have provided the correct code for you below:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <main class="row">
        <div class="col-lg-3 col-ms-3 col-sm-3 col-xs-3">
        <div class="row">
        <aside class="col">
            BS4 Card containing Primary Navigation
        </aside>
        </div>
        <div class="row">
        <aside class="col">
            BS4 Card containing Secondary Nav
        </aside>
        </div>
        </div>
        <div class="col-lg-9 col-ms-9 col-sm-9 col-xs-9">
        <article class="col">
            Main client area content
        </article>
        </d

Don't forget to add a media query for the mobile view to make the secondary navigation position:fixed.

Answer 3

Answer №2

Need a quick fix? Simply follow these steps: Assign the class 'adjust' (or any other name you prefer) to the third column.

<div class="container">
        <div class="row">
            <div class="col-sm-3">
                nav
            </div>
            <div class="col-sm-9">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque temporibus dolorum ea natus nam labore delectus vel, voluptatibus libero eligendi fuga optio! Nisi nemo architecto est, tenetur hic nesciunt distinctio totam repellat necessitatibus. Explicabo nam illum incidunt iusto recusandae nobis eos inventore dolore, suscipit cum earum numquam alias eveniet voluptatem!
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 adjust">
                nav2
            </div>
     </div>
</div>

Customize the appearance with CSS:

 .adjust{
   position:relative;
   bottom: 100px; /* adjust as needed */

 }

 @media(max-width:768px){
 .adjust{
  position:relative;
  top: 100px; /* modify for desired effect */
  }

 }

Answer 4

Need a quick fix? Simply follow these steps: Assign the class 'adjust' (or any other name you prefer) to the third column.

<div class="container">
        <div class="row">
            <div class="col-sm-3">
                nav
            </div>
            <div class="col-sm-9">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque temporibus dolorum ea natus nam labore delectus vel, voluptatibus libero eligendi fuga optio! Nisi nemo architecto est, tenetur hic nesciunt distinctio totam repellat necessitatibus. Explicabo nam illum incidunt iusto recusandae nobis eos inventore dolore, suscipit cum earum numquam alias eveniet voluptatem!
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 adjust">
                nav2
            </div>
     </div>
</div>

Customize the appearance with CSS:

 .adjust{
   position:relative;
   bottom: 100px; /* adjust as needed */

 }

 @media(max-width:768px){
 .adjust{
  position:relative;
  top: 100px; /* modify for desired effect */
  }

 }

Answer 5

Answer №3

I have successfully found a solution to this issue. Although I initially wanted to maintain the flexbox structure on the elements and position them accordingly using flexbox, the following solution works well for the time being.

To begin, I transformed the containing .row along with the inner .col-sm-* items into block-level items using Bootstrap 4's display utilities by including .d-lg-block on all four elements.
Then, I utilized float utilities to position each column as needed. Specifically, I applied .float-lg-left to the first and third columns (the navigation columns), and .float-lg-right to the middle column (the main content).

You can view a demonstration of this solution in action in Bootstrap 4 by visiting this link: https://www.bootply.com/0TrQZNXF1S

Answer 6

I have successfully found a solution to this issue. Although I initially wanted to maintain the flexbox structure on the elements and position them accordingly using flexbox, the following solution works well for the time being.

To begin, I transformed the containing .row along with the inner .col-sm-* items into block-level items using Bootstrap 4's display utilities by including .d-lg-block on all four elements.
Then, I utilized float utilities to position each column as needed. Specifically, I applied .float-lg-left to the first and third columns (the navigation columns), and .float-lg-right to the middle column (the main content).

You can view a demonstration of this solution in action in Bootstrap 4 by visiting this link: https://www.bootply.com/0TrQZNXF1S

Reordering columns in WHMCS Template using Bootstrap 4

Answer №1

Answer №2

Answer №3

Similar questions

Using jQuery to apply the "a" class with the addClass method

Dynamic Display Picture Banner - Adjustable Layout

Move a div element as you scroll down the page

Make a flexbox item scroll in the cross-axis once it aligns with the size of another element

Utilizing bootstrap tools and experiencing a deficiency in organization

How can I transfer PHP/MYSQL information into a PDF?

Can you tell me which specific font Adobe Edge Code (Brackets) uses in its code editor?

Issue with background image not resizing or repeating correctly on mobile devices

Is there a method to update the status of a Jquery UI Mobile navbar using Javascript?

The back-to-top button guides users back to their last visited page

What is the best way to generate two <div> elements, with one of them being centrally fixed?

Difficulty enforcing mandatory checkboxes

HTML code that has been "commented out" means

css optimizing image content for search engine visibility

What is the best way to add a hyperlink to my directory pictures?

Exploring the depths of complex structures with Selenium to uncover hidden elements

CSS can create a semi-circle shape using borders and outlines

Dealing with Overflow in CSS DIV Elements

Concerning dilemma with a div element

The line breaks in elements occur when the combined widths add up to 100%