Issue with alignment in Bootstrap 4 grid system

I am really impressed with Bootstrap's grid system, and I want to take full advantage of it to minimize the need for custom CSS in my projects.

Below is the code snippet that I have been working on. You may notice that the alignment of the first row seems a bit off compared to the rest of the rows. Is there a way to fix this alignment issue?

You can also find the code on CodePen at this link

<div>
    <div class="row">
        <div class="col-4">
            <div class="bg-red">
                This is a content
            </div>
        </div>

        <div class="col-8">
            <div class="bg-red">
                This is a content
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-8 row">
            <div class="col-6">
                <div class="bg-red">
                    This is a content
                </div>
            </div>

            <div class="col-6">
                <div class="bg-red">
                    This is a content
                </div>
            </div>

            .... (more content) ....

        </div>

        <div class="col-4">
            <div class="bg-red">
                This is a content
                This is a content
                This is a content
                This is a content
                This is a content
                This is a content
            </div>
        </div>
    </div>
</div>
cssbootstrap-4

Answer №1

It seems like the main issue here is that you are trying to combine rows and columns within a single div, which can cause conflicts with Bootstrap CSS. To resolve this, it would be best to split the problematic div 

<div class="col-8 row">
into two separate divs.

<div>
    <div class="row">
        <div class="col-4">
            <div class="bg-red">This is some content</div>
        </div>

        <div class="col-8">
            <div class="bg-red">This is some content</div>
        </div>
    </div>

    <div class="row">
        <div class="col-8">
            <div class="row">
                <div class="col-6">
                    <div class="bg-red">This is some content</div>
                </div>

                <div class="col-6">
                    <div class="bg-red">This is some content</div>
                </div>

                <div class="col-6">
                    <div class="bg-red">This is some content</div>
                </div>

                <div class="col-6">
                    <div class="bg-red">This is some content</div>
                </div>

                <div class="col-6">
                    <div class="bg-red"></div>
                </div>
            </div>
        </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

Uneditable border in Bootstrap table

I am currently utilizing Bootstrap table to showcase some basic information, however, I am facing a peculiar problem. Upon using the bootstrap-table stylesheet, the table displays as desired without an outer border. However, upon initializing the styleshe ...

htmlcsstwitter-bootstraphtml-tablebootstrap-4

altering the number of columns in Bootstrap based on screen size to prevent stacking

Is there a way to use the 'col' classes without having them stack on top of each other? I have a form row that requires different numbers of columns on various screen sizes. <div class="form-row"> <div class="col-3"></div> ...

csstwitter-bootstrapbootstrap-4

css element remains stationary and in view

Issue at hand: I have created a logo file named .art-obj1631017189 and I am looking to fix its position. It appears to work fine, but when scrolling down and it encounters the content section, my object falls behind the content (item-layout). I desire to ...

jqueryhtmlcss

How to eliminate padding between Bootstrap col-xx columns

When using Bootstrap's col-xx classes, the padding can sometimes result in wasted space on smaller screens. To address this, I have decided to remove the padding by nesting col-xx with specific CSS settings like shown below: <style> div[class^= ...

csstwitter-bootstrap

Delete Bootstrap icon ::before

I'm currently working on dynamically adding Bootstrap icons and I want them to display on separate lines, but for some reason they're appearing on the same line as the text. Take a look at this image https://i.sstatic.net/GUZtl.png Here's ...

htmlcsstwitter-bootstrapbootstrap-4pseudo-element

How to dynamically style NavLink using a variable in react-router-dom with Emotion?

Is there a way to extract styles to a variable when using react-router-dom's NavLink activeStyle prop? I want to avoid repeating the same styles without using a css file. Ideally, I would prefer to achieve this using Emotion, but if that's not f ...

cssreactjsreact-routerreact-router-domemotion

The navigation bar components created with Bootstrap are experiencing issues with their active state functionality

I created a Navbar using Bootstrap code but I am facing an issue where the 'active' state is not being applied to the Navbar elements on my webpage. I have been attempting to add and remove the active class on the Navbar elements, but I have bee ...

htmlcssbootstrap-4navbar

Tips for relocating anchor elements to less desirable locations

My website has an issue with anchor elements appearing too frequently and not in the desired location. I need someone to help fix this so there are only two anchors displayed. After checking my code, it seems like there are not more than the specified num ...

htmlcss

How do I switch the background-image on li hover and revert it back when I move off the li element?

Looking to update the background image of a div upon hovering over a li element? Check out this example here. So far, I've got that part working fine. But now I want the background picture to revert back to its original CSS when I move away from the l ...

javascriptjqueryhtmlcssbackground-image

Can someone explain the purpose of `svg:not(:root) {overflow: hidden}` in simple

I am facing an issue with displaying my .svg file in my next-js project. It seems that the CSS code svg:not(:root) { overflow: hidden; } is causing the problem. Could someone explain what this particular CSS rule is for? After changing the code to svg:no ...

cssreactjssvg

Is concealing a button an effective strategy?

Recently, I decided to design a login form for my website. To quickly style the form, I opted to use Bootstrap through CDN. While working on the form, I encountered an issue with the button size as the device width changed. Initially, I applied the classes ...

htmlcsstwitter-bootstrapfrontend

Is it possible to create HTML code that remains unaffected by alterations in CSS class names?

Having been using Twitter Bootstrap 3 for some time, the arrival of Twitter Bootstrap 4 has caught my attention. The new Twitter Booststrap comes with various changes, such as the renaming of .table-condensed to .table-sm, for instance. In anticipation of ...

htmlcsstwitter-bootstrap-3twitter-bootstrap-4bootstrap-4

Transforming the text to be "unreadable"

I find myself in a rather odd predicament where I must display my name and contact details on a webpage. Although I am comfortable with sharing this information, I would prefer that it remain unreadable to robots or other unauthorized sources. Essentially ...

javascripthtmlcssweb

Personalizing the pop-up window using window.open

When clicking a hyperlink on a page, I need to open multiple pop-up windows. To achieve this, I must use the Window.open function instead of showModalDialog. However, I have noticed that the appearance is not satisfactory when using Window.open. (Essentia ...

javascriptcss

Creating an HTML table with colspan and rowspan using ng-repeat from a deeply nested JSON dataset

I'm working on creating a table layout shown in the attached image: Composite Class Routine Check out my progress so far in this Plunker demo: https://plnkr.co/edit/4WiWKDIM2bNfnmRjFo91?p=preview The JSON data I'm using is as follows: $scope. ...

htmlcssangularjsjsonangularjs-ng-repeat

Sass effortlessly transforms the color black into its hexadecimal counterpart #000000

I am in the process of developing a mixin that simplifies the task of incorporating multiple fonts in a single line. Within the mixin, I specify the desired font weights as follows: $font-weights: ( "hairline": 100, "thin": 200, "light": 300, "regular": 4 ...

csssasscompass

Achieving a perfectly centered alignment of two divs in Bootstrap 5 can be accomplished by placing one div with an input field next to another div

I am trying to center an input and a button on the same line within a div in the middle of the page. Currently, as shown in the image, they are aligned to the left of the page and I want them to be centralized. https://i.sstatic.net/o3RLs.png <div cla ...

htmlcssbootstrap-5

The disablement of the button is a result of concealed select elements

I'm facing an issue with a form that contains three select options: Fit Colour Size By default, the 'Fit' dropdown and 'Colour' dropdown are active with a default value selected (e.g. Regular Fit and Blue Colour). There are mul ...

javascriptjqueryhtmlcss

Guide on how to use dropdown menus to choose rows and columns and generate tables with the help of bootstrap and css

Is there a way to achieve functionality similar to draw.io where users can select rows and columns to insert a table? Any ideas on what this feature is called or how to implement it? https://i.sstatic.net/23cNY.png ...

htmlcssvue.jsbootstrap-4draw.io