Is there a way to make the row inline when the width is less than 579px? I want it to look the same on both mobile and desktop.
"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
"../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
"styles.scss",
"../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
],
<div class="card-body text-left">
<div class="container">
<div class="row">
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
{{contact.firstName}} {{contact.lastName}}
</div>
<div class="col-md-1 col-xs-1 col-sm-1 col-lg-1 ">
<a href="http://maps.google.com/?q={{address}}" target="_blank">
<i class="fa fa-map-marker" title="{{address}}"></i>
</a>
</div>
<div class="col-md-1 col-xs-1 col-sm-1 col-lg-1 ">
<a href="tel:{{contact.phoneNumber}}">
<i class="fa fa-phone" title="{{contact.phoneNumber}}">
</i>
</a>
</div>
<div class="col-md-1 col-xs-1 col-sm-1 col-lg-1 ">
<a href="mailto:{{contact.email}}">
<i class="fa fa-envelope" title="{{contact.email}}">
</i>
</a>
</div>
<div class="col-md-2 col-xs-2 col-sm-2 col-lg-2 ">
</div>
<div class="col-md-1 col-xs-1 col-sm-1 col-lg-1 ">
<button type="button" mat-mini-fab color="primary" (click)="edit(contact)">
<i class="fa fa-edit left"></i>
</button>
</div>
<div class="col-md-1 col-xs-1 col-sm-1 col-lg-1 ">
<button type="button" mat-mini-fab color="warn" (click)="delete(contact)">
<i class="fa fa-trash left"></i>
</button>
</div>
</div>
</div>
</div>https://i.sstatic.net/6vPnU.jpg
https://i.sstatic.net/6xbHd.jpg
Update As suggested in all comments changed to the col-1 pattern As you can see bellow still the same https://i.sstatic.net/uhZBC.jpg
You can see that the upper part set with col-1 pattern and the one on the bottom with previous configuration.
All that leads me to believe that somehow I need to adjust the reference to the css somewhere in my Angular-CLI project. Now as I use Material Design and MDBootstrap that has to give me a support for responsiveness it is weird it doesn't..
package.json
"angular-bootstrap-md": "^6.0.1",
In angular, I don't think it's best practice just to put the CSS files in index.html. I probably can npm install bootstrap package, but the question is will it override and mess up other frameworks like Material Design and MDBoostrap?
I'll try and update here.
Update
NPM installed bootstrap
"bootstrap": "^4.1.1",
Installed Bootstrap 4 for an Angular-CLI project yet no effect on the code. :(
Update
It worked after clearing cache and refreshing. Cool. Thank guys!
Still need to adjust for PC and mobile.. Now it's just ugly (especially on mobile) in any option, but it's a good direction.. Thanks!