Organizing Content with CSS/Bootstrap Grid Row Alignment

I'm struggling to figure out why there is extra space above the nested grid row. I want to center align it, similar to how you would do in Excel. Any suggestions on how to achieve this?

My layout includes a fluid container with a nested grid row consisting of three columns. However, when I add another grid row inside the first column, it seems like an unwanted space appears above it.

Appreciate any help!

Issues with grid row alignment

.row>div:not(.row) {
  background: #ddd;
}

.row .row>div {
  background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6a7068706c">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-4">
      <div class="row">
        <div class="col-xl-6">Col content</div>
        <div class="col-xl-6">Col content</div>
      </div>
    </div>
    <div class="col-xl-4">Col content</div>
    <div class="col-xl-4">Col content</div>
  </div>
</div>

csstwitter-bootstrapbootstrap-4dreamweaver

Answer №1

Avoid using

<div class="container-fluid">

instead, try this approach

   <div class="col-12 d-flex justify-content-center">
     //customize your code here
   </div>

You can replace "col-12" with any number you prefer.

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

Showing ASP code within a DIV element (inline)

Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...

cssasp-classic

Tips on how to change the color scheme of a webpage

I am currently working with basic HTML and CSS, but I am facing an issue where my background color is only filling a third of the page instead of the entire page. Despite attempting to use the html and body classes for the background color, it did not prod ...

htmlcss

The Mystery of Blurriness: How CSS Transforms Can Cause Image Quality Loss

What causes an image to become blurry when rotated? I attempted to rotate an image 90 degrees, but the result is unexpectedly blurry. transform: rotate(90deg); This issue occurs in both Firefox and Chrome (other browsers have not been tested). For refe ...

cssimagecss-transforms

Using bootstrap-vue sticky columns without specifying a column variant is easier than you think

Let's cut to the chase with an example I created using bootstrap-vue's documentation to help clarify the issue: <template> <div> <div class="mb-2"> <b-form-checkbox v-model="stickyHeader" inline>Sticky header& ...

cssvue.jsbootstrap-4bootstrap-vue

Switching button appearance when hovered over

Looking to create a page layout with 4 buttons, each occupying one quadrant of the page? These buttons should feature images as their background and change to different images when hovered over. Wondering how this can be achieved using CSS? ...

htmlcss

Error encountered while validating jQuery word cloud

Can anyone please assist me with validating a jQuery word cloud in HTML5? I'm encountering issues with all of the rel values showing this error message: "Bad value 1 for attribute rel on element a: Not an absolute IRI. The string 1 is not a registere ...

jquerycsshtmlrel

The button functionality gets hindered within the Bootstrap well

I'm trying to figure out what's wrong with my code. Here is the code: https://jsfiddle.net/8rhscamn/ <div class="well"> <div class="row text-center"> <div class="col-sm-1">& ...

javascripthtmlcsstwitter-bootstrap

The issue arises when the mat-panel-description is not properly aligned with the shrinking panel

Within my HTML, I have a mat-panel with a description that is populated by a variable from the TS file. However, I am encountering an issue where if I shrink the panel and the description is too long, the text is cut off at the top and bottom. Is there a w ...

cssangularangular-materialmat-expansion-panel

Populate JSON data into a bootstrap-table

Just recently, I started working with bootstrap-table and I'm attempting to load data from a JSON file. According to the documentation, I have tried using: data-url="json/data.json" as well as: id="person" And for loading data, I am using this code: ...

jsonbootstrap-4bootstrap-table

Fade-in effect applied to images upon exposure

Is there a way to fade in an image based on the percentage scrolled, rather than a set number of pixels? I want my website to be responsive and adjust to all screen resolutions. Or perhaps is there a method to have the image fade in when it enters the fiel ...

javascriptjqueryhtmlcssdreamweaver

Is it possible to reverse the rendering process of a collection of JavaScript files?

Our current approach involves bundling Bootstrap files in the following manner: public class BundleConfig { // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862 public static void RegisterBundles(BundleCollecti ...

javascriptasp.net-mvcbootstrap-4

A more efficient approach to creating a personalized design

After realizing the original question was unclear and wouldn't solve my problem, I have decided to edit it and create a new one. For my project, I require a customized layout where users can move, resize, add, or remove each box according to their pr ...

javascriptjquerycsslayoutmargin

Tips for creating a wide mobile menu

I am attempting to make the mobile menu full width, but so far my efforts have been unsuccessful. #menu-main-2 { background-color:#FFFFFF !important; padding-left:15px; max-width: unset; width: 100%; } view mobile menu ...

csswordpress

Creating a tree-like design with the spry accordion換stepping up your spr

I want to style my accordion in a way that it resembles a tree structure. How can I achieve this using CSS? For example: + should be displayed when the accordion tab is closed, and - when the accordion is open. <div class="Accordion" id="systemAccordi ...

javascriptjquerycssspry

Incorporating images into CSS using an npm package

My npm package has the following structure: --src --styles -image.png -style.scss In the style.scss file, the image is referenced like this: .test { background-image: url(./image.png); } The issue arises when consuming the package, as th ...

javascriptcssnode.jsnpm

Display only the content that is within the container and visible

Within this demonstration, there are 2 divs present - one containing the text t, and the other containing the text s. Both of these divs are enclosed within the .items container. As it stands currently, both divs are visible. However, my goal is to modify ...

htmlcss

continuously repeating css text animation

How do I create an animation loop that slides infinitely, repeating non-stop in full screen without breaking at 'hello5'? I want to display 3 rows of the same item from my items array. Not sure which CSS is causing the issue. The result I am loo ...

htmlcssvue.js

What is the best way to efficiently align items to the bottom of a sidebar in Bootstrap 5?

I am struggling to responsively align items at the bottom of a side nav bar created using Bootstrap 5. I have tried various approaches, including incorporating the .offcanvas class and tweaking the styling, but none of them have worked as expected. In the ...

htmlcssfrontendpositionbootstrap-5

Implementing a striking image background for your Bootstrap website header

I am trying to add a background image to a main header that contains a navbar, but I am having trouble getting the image to display correctly. Here is the jsfiddle link for reference: http://jsfiddle.net/Mwanitete/fgkq759n/8/ Here is the HTML code snippe ...

htmlcssbootstrap-4

encountered net::ERR_EMPTY_RESPONSE while attempting to locate a CSS file within an AngularJS directive

Every time my webpage attempts to access the css file from a directive, I encounter a net::ERR_EMPTY_RESPONSE. I have implemented door3's on-demand css feature, which allows for lazy loading of css files only when necessary. This feature works flawle ...

javascriptjqueryhtmlcssangularjs