Arrange the bootstrap columns in a grid layout both vertically and horizontally adjacent to one another

I need help with displaying my columns in this specific layout

https://i.stack.imgur.com/2hzju.jpg

Code

<div class="row">
  <div id="id-orders-stats" class="col-md-6 col-sm-6">
  </div>
  <div class="col-md-6 col-sm-6 stats-box">
    <div id="id-time-tab">
      <ul class="nav nav-pills nav-justified nav-prima">
        <li><a href="#" type="Daily" class="agraphType" data-toggle="tab">Daily</a>
        </li>
        <li><a href="#" type="Weekly" class="agraphType" data-toggle="tab">Weekly</a>
        </li>
        <li><a href="#" type="Monthly" class="agraphType" data-toggle="tab">Monthly</a>
        </li>
        <li class="active"><a href="#" class="agraphType" type="Quarterly" data-toggle="tab">Quarterly</a>
        </li>
        <li><a href="#" type="Yearly" class="agraphType" data-toggle="tab">Yearly</a>
        </li>
      </ul>
    </div>
    <div id="id-sales-pie">
    </div>
  </div>
</div>
<div class="row">
  <div id="id-channel-stats" class="col-md-6 col-sm-6 stats-box ">
  </div>
  <div class="col-md-6 col-sm-6 stats-box">
    <div id="id-sales-line">
    </div>
  </div>
</div>

Can someone provide guidance on how to achieve the desired layout?

https://i.stack.imgur.com/c3UdH.png

I've explored javascript and CSS solutions but have not been successful. Any assistance would be greatly appreciated.

csstwitter-bootstrap

Answer №1

Issue 1 - Widget Arrangement: The widgets #3 and #4 are appearing on a different row compared to widgets #1 and #2, resulting in the observed whitespace caused by clearing floats with CSS.

Resolution: To resolve this issue, group all widgets within the same container element.

Issue 2 - Vertical Layout: There may still be vertical spacing problems due to varying widget heights and float rendering in the document flow.

Possible Solutions: Consider using CSS Columns for vertical alignment or use a Javascript library like Masonry to dynamically layout your widgets.

Answer №2

Understanding the grid system in Bootstrap is key to creating responsive layouts. The grid is divided into 12 columns, allowing for easy customization of column widths. To make your first column half the width of the page, you would use the following code:

<div class="col-md-6"></div>

For the other two items that should each take up a quarter of the page, you would apply the class:

<div class="col-md-3"></div>

More information on using Bootstrap's grid system can be found on the official Bootstrap website. To see a demo of this solution, check out this fiddle: http://jsfiddle.net/jwlaospt/

Edit: By nesting the first two divs (1 and 2) within a row, the row will automatically adjust to the height of the tallest element, ensuring proper alignment of subsequent rows. I have updated the fiddle to reflect this change. Please take a look.

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

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

Unable to generate a vertical navigation bar

When attempting to create a vertical menu, the final result doesn't align as expected. https://i.stack.imgur.com/2ok47.jpg This is the current code being used: $("#example-one").append("<li id='magic-line'></li>") ...

javascripthtmlcss

Update the styling of buttons in CSS to feature a unique frame color other

Can anyone help me with styling Bootstrap buttons and removing the blue frame around them after they're clicked? Here's what I've tried: https://i.stack.imgur.com/jUD7J.png I've looked at various solutions online suggesting to use "ou ...

htmlcssangularbootstrap-4

How CSS can affect the layout of elements on a webpage

I am looking to achieve something similar to this: The left box should maintain a fixed width, while the right one resizes to fit the full width of the browser window. I also need the height of both boxes to be resizable. Apologies for any inconvenience ...

htmlcss

Hovering over a container will display the text in a single line

<div class="flex-container"> <div class="red hover flex"> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </h1> </div> ...

htmlcssflexbox

IE11 experiencing issues with font loading

I need help troubleshooting why the fonts are not loading properly in the body section of my articles, specifically when viewed in Internet Explorer. Take a look at an example article here: I am fetching from this CSS file: , and I have included the nece ...

htmlcssfontscross-browserinternet-explorer-11

Centering numerous elements on all screen sizes and devices

Is there a way to align elements in the center of the screen both vertically and horizontally without specifying width and height for mobile and desktop views? How can I make it responsive so that it appears centered on all devices? .parent-container{ ...

htmlcss

Can anyone recommend a user-friendly JavaScript dialog box compatible with jQuery that is mobile-responsive?

Mobile browsers. Using Jquery dialog alert box. Avoiding the use of alert() due to its unattractive appearance in web browsers. In the process of creating a website for both mobile and web platforms, seeking a dialog box that is compatible with both. ...

javascriptjquerycssbrowsermobile

CSS Switchable Style Feature

I am in need of some assistance with the navigation on my website. You can find the current code at this link: http://jsfiddle.net/Sharon_J/cf2bm0vs/ Currently, when you click on the 'Plus' sign, the submenus under that category are displayed bu ...

javascriptjqueryhtmlcss

trouble with overlapping mdl-sheet instances

Hey there! I have a quick question - Is it possible to have multiple mdl-sheets on one page that all share the same form? I tried implementing this but ended up with them overlapping each other instead of displaying next to each other from left to right. ...

jqueryhtmlcssmaterial-design-lite

The drop-down menu fails to appear when I move my cursor over it

#menu { overflow: hidden; background: #202020; } #menu ul { margin: 0px 0px 0px 0px; padding: 0px 0px; list-style: none; line-height: normal; text-align: center; } #menu li { display: inline-block; } #menu a { display: block; position: relative; padding ...

javascripthtmlcssreactjs

Creating an input field within a basic jQuery dialog box is not possible

Can anyone assist me in adding an input box to my dialog box? I am working with jquery-ui.js. Here is the code I currently have: $(document).on("click",".savebtn",function(). { var id = $(this).attr("id"); $.dialog({ ...

javascriptjqueryhtmlcssajax

Exploring the magic of Hover effects using CSS and JQuery

I am exploring ways to enhance the display of an element when hovering over it. I have implemented a button and my objective is for the first click to activate the hover effect, while the second click will reset it. However, I am facing an issue where the ...

javascriptjquerycss

What is the best way to design lists that adjust to different screen sizes by incorporating multiple columns within the available width?

Back in my old fixed-width days, I had a clever method of distributing data across three columns by dividing the number of elements by three. It worked pretty efficiently. Now in this modern responsive world, my current solution involves splitting data in ...

htmlcssresponsive-designtwitter-bootstrap-3

Is it possible to make the body background image adjust its size to the browser window

Looking to change the body background using a jQuery script. The goal is to scale the background image to fit the browser window size. I've come across a script called , but it seems to affect the class img and not the background-img. Any suggestions ...

jqueryhtmlcssautoresize

Resize a div within another div using overflow scroll and centering techniques

Currently, I am working on implementing a small feature but am facing difficulties with the scroll functionality. My goal is to zoom in on a specific div by scaling it using CSS: transform: scale(X,Y) The issue I am encountering lies in determining the c ...

javascriptjqueryhtmlcss

Issue with JavaScript causing circles to form around a parent div

I am struggling to position a set of circles around a parent div in my code. I want 6 circles to form a circle around the parent div, but they are not lining up correctly. Can someone help me identify what I'm doing wrong? var div = 360 / 6; var ra ...

javascripthtmlarrayscss

Tips for designing scrollable overlay content:

I am currently in the process of building a page inspired by the design of Hello Monday. Right now, I have added static content before implementing the parallax effect and auto-scroll. Here is my progress so far: Check out the Sandbox Link One challenge ...

javascripthtmlcssoverlay

Definitions that are displayed dynamically when hovering over a particular element

I am seeking a way to implement popup definitions that appear when a div is hovered over. My website showcases detailed camera specifications, and I want users to see a brief definition when they hover over the megapixel class called '.mp'. One o ...

javascriptjqueryhtmlcsshover

Animating the mobile menu transition using Bootstrap CSS

Can anyone help me with animating the mobile menu when I click the menu icon? This is what I have for the menu: .overlay-menu { position: fixed; display: none; z-index : 1040; width: 100vw; height: 100vh; background: rgba(0, 0,0, 0 ...

javascripthtmlcssbootstrap-4