I have the following problem: i have a <div> and inside of that tag i have a button, but i cant center the button vertically and horizontally inside the <div> also i want the button to be center for phones for that i saw it toggle device toolbar
Really dont know how to solve it, im new using Angular
Below i will let the code of my <div> that has the button inside, the picture of how the button is displayed also i'm using Angular material
Div tag code
<div *ngIf="nav_bar==false" class="colour large">
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [routerLink]="'/'">
<mat-icon>dialpad</mat-icon>
<span>Inicio</span>
</button>
<button mat-menu-item [routerLink]="['/nosotros']">
<mat-icon>voicemail</mat-icon>
<span>Nosotros</span>
</button>
<button mat-menu-item [routerLink]="['/contacto']">
<mat-icon>notifications_off</mat-icon>
<span>Contacto</span>
</button>
</mat-menu>
<button class="mat-button col-xs-3" (click)="nav_bar=!nav_bar">
<img src="./assets/icons/baseline_visibility_white_18dp.png" class="mdc-icon-button__icon"/>
</button>
</div>
It's not an angular thing, it's an html/css thing. If you're going to use bootstrap you might want to check out the grid documentation a bit to better familiarize yourself with how it works, along with the utility classes. Something like this would probably be more what you're looking for.
<div *ngIf="nav_bar==false" class="colour large d-flex align-items-center">
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [routerLink]="'/'">
<mat-icon>dialpad</mat-icon>
<span>Inicio</span>
</button>
<button mat-menu-item [routerLink]="['/nosotros']">
<mat-icon>voicemail</mat-icon>
<span>Nosotros</span>
</button>
<button mat-menu-item [routerLink]="['/contacto']">
<mat-icon>notifications_off</mat-icon>
<span>Contacto</span>
</button>
</mat-menu>
<button class="mat-button mx-auto" (click)="nav_bar=!nav_bar">
<img src="./assets/icons/baseline_visibility_white_18dp.png" class="mdc-icon-button__icon"/>
</button>
</div>
1.How to put a modal in the center?
2.Using Angular 2/4 with html5,JS and css!
<ng-template #content let-c="close">
<div class="modal-header">
<h4 class="modal-title">Deseja excluir definitivamente?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" title="Confirmar Ação" (click)="c('Close click')" (click)="deleteUser(user)">Confirmar</button>
<button type="button" class="btn btn-secondary" title="Cancelar Ação" (click)="c('Close click')">Cancelar</button>
</div>
</ng-template>
<ng-template #content let-c="close">
<div class="modal-header">
<h4 class="modal-title">Deseja excluir definitivamente?</h4>
</div>
<!--add this in start here--><div class="modal-body">
<p>Some text in the modal.</p><!--end here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" title="Confirmar Ação" (click)="c('Close click')" (click)="deleteUser(user)">Confirmar</button>
<button type="button" class="btn btn-secondary" title="Cancelar Ação" (click)="c('Close click')">Cancelar</button>
</div>
</ng-template>
AS per your requirement your modal should be in fixed height, so based on that you can set top margin and other css.
OR
You have to calculate modal height after DOM/HTML render in your modal body and then again apply some calculation logic and set top-margin from back end.
I would like to add 3 spaces between two right align button. Is there any bootstrap solution for it without adding custom css?
I do this :
<div class="text-right">
<button class="btn-info btn">Log in</button>
<!-- Add 3 spaces between button -->
<button class="btn-info btn">Log Out </button>
</div>
Fiddle demo : http://jsfiddle.net/6816gq84/1/
You can add btn-toolbar class to the container div.
<div class="text-right btn-toolbar">
<button class="btn-info btn">Log in</button>
<button class="btn-info btn">Log Out </button>
</div>
Have a look here.
I do this rudimentary solution: How to add space between bootstrap buttons in same div?.
<div class="btn-group pull-right row">
<div class="col-md-3"><button class="btn btn-default" type="button">Clôturer</button></div>
<div class="col-md-1"></div>
<div class="col-md-3"><button class="btn btn-primary" type="button">Soumettre</button></div>
</div>
This also work fine for me:
<div style="display: flex ; justify-content: flex-end">
<button class="btn-info btn mr-3">Log in</button>
<button class="btn-info btn">Log Out </button>
</div>
I'm not sure any bootstrap solution already exists for what you want to do, but there are other way, depending what you mean by "custom css".
You can add a span balise for exemple and add an inline css defining the width to 3em (3 spaces). It's HTML/CSS but you don't modify the css of the button's class.
<div class="text-right">
<button class="btn-info btn">Log in</button>
<span style="width:3em;"> </span>
<button class="btn-info btn">Log Out </button>
</div>
I have a list, how I can do to put 2 buttons to the right and one on the left?
This is my code, I tried many things but not working.
<ion-content>
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="refrescarNuevosPosts()">
</ion-refresher>
<div class='list'>
<a class='item item-avatar-left' ng-repeat="post in posts" ng-click='openLink(post.url)'>
<img ng-src='{{ post.thumbnail}}' ng-if="post.thumbnail.indexOf('http') === 0"/>
<h2 class='post-title'>{{ post.title}}</h2>
<p><span am-time-ago="post.created_utc" am-preprocess="unix">{{ post.domain}}
</p>
</a>
</div>
<ion-infinite-scroll
on-infinite="cargarNuevosPosts()"
distance="1%">
</ion-infinite-scroll>
</ion-content>
Try this
<ion-list>
<ion-item collection-repeat="c in clientes | filter:pesquisa" ng-click="getCliente(c)" class="item-button-right item-button-left">
<!-- 1 button -->
<button class="button button-positive">
<i class="icon ion-ios-telephone"></i>
</button>
<p>{{c.email}}</p>
<!-- 2 buttons -->
<div class="buttons">
<button class="button button-energized">
<i class="icon ion-android-locate"></i>
</button>
<button class="button button-dark">
<i class="icon ion-android-arrow-forward"></i>
</button>
</div>
</ion-item>
</ion-list>
The result of ion-list
See http://pointdeveloper.com/add-multiple-buttons-to-list-item-for-ionic-framework-apps/
I hope that I have helped in some way
I want a button to take up the full width of the column, but having difficulties...
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
How do I make the button as wide as the column?
Bootstrap v3 & v4
Use btn-block class on your button/element
Bootstrap v2
Use input-block-level class on your button/element
Why not use the Bootstrap predefined class input-block-level that does the job?
Full-Width Button <!-- BS2 -->
Full-Width Button <!-- BS3 -->
<!-- And let's join both for BS# :) -->
Full-Width Button
Learn more here in the Control Sizing^ section.
Bootstrap / CSS
Use col-12, btn-block, w-100, form-control or width:100%
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>
In case some are noticing btn-block not working anymore in bootstrap 5.1+:
It was dropped in bootstrap 5.1 (changelog):
Breaking Dropped .btn-block for utilities. Instead of using .btn-block
on the .btn, wrap your buttons with .d-grid and a .gap-* utility to
space them as needed. Switch to responsive classes for even more
control over them. Read the docs for some examples.
You can now make a button full width by adding the class w-100, as the authors do in their official Pricing example page:
<button type="button" class="w-100 btn btn-lg btn-outline-primary">
Sign up for free
</button>
Source: https://getbootstrap.com/docs/5.1/examples/pricing/
If you want to make a stack of block buttons, the official docs recommend the following :
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Source: https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons
I simply used this:
<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
use
<div class="btn-group btn-group-justified">
...
</div>
but it only works for <a> elements and not <button> elements.
see: http://getbootstrap.com/components/#btn-groups-justified
You should add these styles to a CSS sheet
div .no-padding {
padding:0;
}
button .full-width{
width:100%;
//display:block; //only if you're having issues
}
Then change add the classes to your code
<div class="span9 btn-block no-padding">
<button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>
I haven't tested this and I'm not 100% sure what you want, but I think this will get you close.
In Bootstrap 5, the class btn-block doesn't work anymore. But instead, you can add the class w-100 to the button to make it as wide as its container.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row"><div class=" col-5 ">
<a class="btn btn-outline-primary w-100 " href="# "><span>Button 1</span></a>
</div><div class="col-5 ">
<a class=" btn btn-primary w-100 weiss " href="# "><span>Button 2</span></a>
</div></div>
I would have thought this would be the most bootstrap-esque way of doing things:
<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>
All I'm doing is adding the class col-xs-12 to the button.
<div class="col-md-9">
<button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>
In Bootstrap 3, this should be all you need. I believe btn-large was overriding the width of btn-block.
Update 2022:
You have multiple ways to make button full width.
You can add the w-100 to the class.
You can add d-grid and gap-2to a container above the button:
<div class="d-grid gap-2"> <!-- Here -->
<button class="btn btn-primary" type="button">Button</button>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>
We can Use a Block Level Full-Width Button
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">
Block level button
</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">
Block level button
</button>