Bootstrap4 and Angular: text-right not working on column

0
votes

I must admit that I'm new to bootstrap 4 because used on my old project only 3.3 version that doesn't use flexblox grid system.

Now starting a new project and I'm stuck on this problem:

I just cant give "text-align" css style to col-12 element with native bootstrap class .text-right

I've tried to manually set style="'text-align: right!important'" on html tag and it worked!

I even tried to use a p instead writing text directly in html div-col tag but that's a block element.

Here's the code:

<app-footer>
        <div class="container">
            <div class="row">
                <div class="col-12 text-right">
                    I - Team - Pc System 2019 ©
                </div>
            </div>
        </div>
 </app-footer>

I just expected to see footer text on the right side of the col but this is the result: problem-view

console analizyng that html element: enter image description here

Have you any idea of the problem? I just want not to apply styling on html element but make native bootstrap class work properly!

Thanks in advance.

EDIT: Just as you said in comments, maybe this is a problem about bootstrap configuration in my project.

In package.json I have bootstrap: "^4.2.1" as dependency.

Then in angular.json we have this:

             "styles": [
                        "node_modules/bootstrap/dist/css/bootstrap-reboot.css",
                        "node_modules/bootstrap/dist/css/bootstrap-grid.css",
                        [...]
                        "src/dx-styles.scss",
                        "src/styles.scss"
                    ],

This project come from a template angular project and is possible that configuration is now right.

Thanks in advance

3
htmlangularflexboxbootstrap-4
do you add bootstrap.css in angular-cli.json ?\ - Nisharg Shah
can you add your project in stackblitz stackblitz.com/edit/angular-jgwtme - Nisharg Shah
did you try margin-left: auto; ? - Hameed Syed
Thanks a everyone, i'm going to answer to erikrunia under his answer. My project use angular7, i don't have angular-cli.json but instead angular.json @Hameed Syed: it works but i just want to solve this with native bootstrap 4 classes - Tobet

3 Answers

1
votes

It seems something is wrong with your bootstrap includes. A simple fiddle with your code, whilst including boostrap js and css works.

https://jsfiddle.net/qdfy91r5/

    <div class="container">
        <div class="row">
            <div class="col-12 text-right">
                I - Team - Pc System 2019 ©
            </div>
        </div>
    </div>
0
votes

you can use

div class="container">
            <div class="row">
                <div class="col-12 col push 5">
                    I - Team - Pc System 2019 ©
                </div>
            </div>
        </div>
0
votes

You can use something like

.content{
     display: flex;
     justify-content:end;
 }

div class="container">
        <div class="row">
            <div class="col-12 col content">
               <p> I - Team - Pc System 2019 ©</p>
            </div>
        </div>
    </div>

or you can use something like this

    div class="container">
        <div class="row">
            <div class="col-12 col d-flex flex-end">
               <p> I - Team - Pc System 2019 ©</p>
            </div>
        </div>
    </div>