Bollate

HTML

[ANSWERED] html – (bootstrap grid col-md-4) alignment not working

By

Nov 18, 2022 , , ,

Solution 1 :

Please Verify your code is like this
Now updated the code — you can view the difference now

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--bootstrap 4.0----> <!---this is importent--->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<style>
.border{
    border: 1px solid gray;
}
</style>
<body>



    <nb-card>
        <nb-card-header>
                <input nbInput id="search" class="search-input ml-3 mt-2 mb-2" placeholder="Search" #box (keyup)="onKey(box.value)">
        </nb-card-header>
           
        <nb-card-body>
           
            <nb-tabset fullWidth>
                <nb-tab tabTitle="TabA"> 
                    <div class="row">
                        <div class="col-md-2 col-sm-12 p-2 m-5 border" *ngFor="let item of list_of_detail">
                            <nb-card status="success" *ngIf="item.env == 'A'"> 
                                <nb-card-header> {{ item.host }}</nb-card-header>
                                <nb-card-body>
                                    version: {{ item.version }}
                                </nb-card-body>
                                <nb-card-footer>{{ item.service }} | {{ item.region }}</nb-card-footer>
                            </nb-card>
                        </div>
                    </div>
                </nb-tab>
        
                <nb-tab tabTitle="TabB"> 
                    <div class="row">
                        <div class="col-md-4 col-sm-12 p-2 m-5 border" *ngFor="let item of list_of_detail">
                            <nb-card status="danger" *ngIf="item.env == 'B'">
                                <nb-card-header> {{ item.host }}</nb-card-header>
                                <nb-card-body>
                                    version: {{ item.version }}
                                </nb-card-body>
                                <nb-card-footer>{{ item.service }} | {{ item.region }}</nb-card-footer>
                            </nb-card>
                        </div>
                    </div>
                </nb-tab>







    <!-----Bootstrap--> <!---this is importent--->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!---this is importent--->
    
</body>
</html>

you must add css file

 <!---bootstrap 4.0----> <!---this is importent--->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

And the script is

<!-----Bootstrap--> <!---this is importent--->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!---this is importent--->

You will get the answer like
you can view the code like this..

View image In Full Screen

Solution 2 :

i hope you know that the col-sm effected for small devices only , not in your computer screen .|

At Bootstrap 4, you can drop the “xs-” indicator for the lowest breakpoint:

<div class="row">
<div class="col-2 col-sm-3">Something here</div>
<div class="col-10 col-sm-9">Something else here</div>
</div>

Part of the “mobile first” mentality.

Uses..

.col- Extra small (this code is for extra small deive screen eg: small android devises)

.col-sm- Small (this code is for small deive screen eg: latest smart phones)

.col-md- Medium (this code is for medium size deive screen )

.col-lg- Large (this code is for large size deive screen eg: Computer screen)

.col-xl- Extra Large (this code is for extra large size deive screen eg: android tv or other big larger screen)

the Bootstrap col is mean how to display a content in different size of screens | you can set muliple class with class="col-sm-12 col-md-6 col-lg-4 col-2". and now this will show in differently in different devises….

if you cant creat it well, i recoment you to download Bootstrap themes from bootstrap’s own website | or if you want to learn Bootstrap , i recoment you to w3schools.com/bootstrap4

Problem :

I have the following issue displaying a page on Chrome and wondering if you encountered it as well.. Have you faced the following inconsistencies and how did you mitigate them?

In Chrome, one of my Nebular HTML tabs(TabB) is not left justified.

Although in TabA , using the same code, elements are left justified.

In Firefox, TabB as a completely different layout.

Also I noticed that whenever I change TabB bootstrap code let’s say from col-md-4 to col-md-9, the alignment changes in Firefox but not in Chrome..I tried clearing Chrome cache and restart, still no luck.

Here is my code. Thanks in advance!!

<nb-card>
<nb-card-header>
        <input nbInput id="search" class="search-input" placeholder="Search" #box (keyup)="onKey(box.value)">
</nb-card-header>
   
<nb-card-body>
    <nb-tabset fullWidth>
        <nb-tab tabTitle="TabA">
            <div class="row">
                <div class="col-md-4" *ngFor="let item of list_of_detail">
                    <nb-card status="success" *ngIf="item.env == 'A'">
                        <nb-card-header> {{ item.host }}</nb-card-header>
                        <nb-card-body>
                            version: {{ item.version }}
                        </nb-card-body>
                        <nb-card-footer>{{ item.service }} | {{ item.region }}</nb-card-footer>
                    </nb-card>
                </div>
            </div>
        </nb-tab>

        <nb-tab tabTitle="TabB">
            <div class="row">
                <div class="col-md-4" *ngFor="let item of list_of_detail">
                    <nb-card status="danger" *ngIf="item.env == 'B'">
                        <nb-card-header> {{ item.host }}</nb-card-header>
                        <nb-card-body>
                            version: {{ item.version }}
                        </nb-card-body>
                        <nb-card-footer>{{ item.service }} | {{ item.region }}</nb-card-footer>
                    </nb-card>
                </div>
            </div>
        </nb-tab>

….

Comments

Comment posted by AdDev

i hope you know that the col-sm effected for small devices only , not in your computer screen|

Comment posted by AdDev

the boostrap javascript and css is must to run col-sm-4

Comment posted by AdDev

after you did this, your code will run properly || thanks

Comment posted by John Smith

Thanks for the hint. Unfortunately I added the CSS file and scripts code above and the left justify alignment is still not happening…

Comment posted by John Smith

I just noticed I am getting a bunch of warning messages. Maybe these are the cause of my issue. ng “build” “–output-path=dist” gives me a Browserslist: caniuse-lite is outdated. Please run next command

Comment posted by AdDev

the problem is with your view only . it working well in all devices. if you want to see the difference add borders on

| after that you can see the difference

Comment posted by John Smith

Hi! Thanks for your reply 🙂 I just edited my question title and code. I actually was referring to col-md-4. I tried switching it to col-sm-4 at some point to see if it made a difference. Thx for clarifying the use for sm! Still wondering why col-md-4 not working as expected in my case. Neither in Chrome nor Firefox.

Comment posted by AdDev

i understand the problem — see the answer below…..

By

Related Post

HTML

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022
HTML

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022
HTML

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022