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

Issue with wrapper not aligning correctly at the top of the screen

I keep noticing a gap between my wrapper and the top of the page. Despite trying multiple solutions, none seem to work for me. The background image covers the entire background and is aligned at the top perfectly, but the wrapper with its own background a ...

htmlcsstwitter-bootstrap

Toggle the visibility of a div based on the id found in JSON data

I am looking to implement a JavaScript snippet in my code that will show or hide a div based on the category ID returned by my JSON data. <div id="community-members-member-content-categories-container"> <div class="commun ...

javascripthtmlcss

Stylesheets per module in Angular 2

For my website design, I've decided to adopt a modular structure using sass. To ensure consistency throughout the module, instead of defining stylesheets at the component level, I plan to define them at the module level and import them into each compo ...

cssangularsass

Looking for some guidance and feedback on how to improve a workflow utilizing Bower, Grunt, and Bootstrap

So far, I've taken the following steps: Installed Bower globally using npm Installed Grunt globally using npm Set up a folder for my project ("test") Created a bower.json file (could have used bower init) with "bootstrap": "latest" as the sole depen ...

twitter-bootstrapgruntjsnpmbower

The dimensions of images and text in HTML

I'm having trouble adjusting my page to fit the resolution of the screen. The image I'm using is 1920 pixels wide, but it's extending beyond the window. Click this link for the code and images: index1.html and style1.css are not needed. < ...

htmlcss

"Add a touch of magic to your webpage with text effects that appear

I am looking to create a glowing text effect, and I stumbled upon this resource. http://jsfiddle.net/karim79/G3J6V/1/ However, the client prefers the text effect to appear after the page loads, rather than on hover. Unfortunately, I do not have experien ...

jqueryhtmlcss

Issue with jQuery incorrectly calculating height post-refresh

I am currently utilizing jQuery to vertically center various elements on a webpage. Due to lack of support in older versions of IE, I cannot use the table-cell CSS statement. Therefore, I am using jQuery to calculate half of the height and then position it ...

javascriptjqueryhtmlcssheight

What is the best way to continuously run a series of functions in a loop to create a vertical news ticker effect?

I'm in the process of creating a vertical latest news ticker, and although I'm new to javascript, I'm eager to learn and build it myself. So far, I've come up with this, but I want the news cycle to restart once it reaches the end. ...

javascripthtmlcssloops

Resetting the "clear: both" property for the nth-child element when multiple nth-child elements are being inherited

Currently utilizing CSS (specifically SCSS) to style the same element on various media sizes - A, B, and C. Utilizing the following for A: &:nth-of-type(2n+1) { clear: both; } For B: &:nth-of-type(3n+1) { clear: both; } Finally, for C: ...

csssasscss-selectors

Issue with calculating positions in the jquery.quicksand plugin

I've been playing around with a website for the past couple of days and I have successfully implemented the jquery.quicksand plugin to organize my portfolio entries. However, I've run into an issue when selecting the 'all' filter. If a ...

jqueryhtmlcss

Customizing your buttons in Wordpress with extra CSS styles upon clicking

I am in the process of developing a Wordpress website and I require a button for switching between mobile and desktop versions manually. Within my .css file, I have included: @media (pointer:coarse) {} This adds modifications for the mobile version ...

javascriptcsswordpressbuttonmobile

Is Bootstrap CSS Carousel malfunctioning following a float adjustment?

Currently, I am trying to implement a carousel in bootstrap, but I am facing two significant issues. The alignment of the carousel is vertical instead of horizontal (my div elements are stacking downwards). When I apply the float: left property, the carou ...

htmlcssbootstrap-4

The bottom border of the HTML header does not properly wrap around the Table of Contents (ToC), although the text within the header does. What steps

I have created a Table of Content (ToC) using a Div element and styled it with the following HTML and CSS: h3.articletitle { font-weight: bold; font-size: 30px; border-bottom: 1px solid #4F120B; } h4.articlesubtitle { font-weight: bold; ...

htmlcss

Display only the highest image in the picture carousel using Jquery

My goal is to create a simple image slider using HTML, CSS, and Jquery. However, when I try to move it left by 750px, only the topmost image moves and the rest of the images are not displayed. It seems like all the images are moving at once instead of jus ...

jqueryhtmlcss

The link in the navigation bar is not functioning correctly

Let me break down the issue I'm facing here. The problem arises with the navigation buttons that have sub-lists nested within them (ul>li>ul). When attempting to click on these buttons, the link does not work unless I specifically click on the t ...

htmlcss

Organizing flex-items in a specific manner

My goal is to organize flex-items in a specific layout: To achieve this, I am referencing the following example: .Container { display: flex; overflow: hidden; height: 100vh; margin-top: -100px; padding-top: 100px; position: relative; widt ...

htmlcssflexbox

Limiting the click event to the parent div only

I've encountered a problem with my overlay setup. I have an overlay with a child div inside, and I want the overlay to close only when the user clicks on the overlay itself, not the child div. Even though I've implemented the closing function, it ...

htmlcssreactjs

How can I change the background image using CSS instead of HTML?

I initially created a non-responsive website for an existing project. Now I need to convert it into a responsive site. I tried changing the logo image to make it responsive, but it's not working as expected. <td colspan="2" style="background-image ...

javascriptcsshtml

How to vertically center align divs of unpredictable height

Currently grappling with a dilemma related to the vertical-align attribute and floating div elements. The heights of these divs are unknown as they are dynamically created based on text content. If you want to take a look at the code snippet, here is the ...

css

Tips for refreshing the <img> tag using a user image

I am currently designing a bootstrap webpage and trying to implement a feature where the user can input an image, which will then be displayed in a preview modal along with some text provided by the user. The modal is functioning correctly. Here is the co ...

javascriptjqueryhtmlcsstwitter-bootstrap