The question is simple, i have a button:
<button class="btn btn-warning" style="width: 20%; color: white">
<i class="fa fa-plus-circle">
<h5>
<strong>Añadir sucursal</strong>
</h5>
</i>
</button>
From this:
To something like this:
How can i do that?
Thanks!
try this
<button class="btn btn-warning" style="width: 20%; color: white">
<h5><strong>Añadir sucursal</strong> <i class="fa fa-plus-circle"></h5>
</button>
The button text is below the icon because it is in an <h5> tag, and the <h5> is a block element.
If you want to use the styling of <h5> but keep it on the same line, add the d-inline class to the h5 tag, which will change it into an inline element:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css">
<body class="p-4">
<p>Original button with <h5></p>
<button class="btn btn-warning" style="width: 20%; color: white">
<i class="fa fa-plus-circle">
<h5>
<strong>Añadir sucursal</strong>
</h5>
</i>
</button>
<p class="mt-4">Button with <h5 class="d-inline">:</p>
<button class="btn btn-warning" style="width: 13rem; color: white">
<i class="fa fa-plus-circle">
<h5 class="d-inline">
<strong>Añadir sucursal</strong>
</h5>
</i>
</button>
</body>
Related
I have a row of buttons in the bootstrap HTML website when I open it in desktop view it works perfectly, but in mobile view, it is a mess.
here is my code :
<div class="creative ">
<div class="container" style=" padding-top: 50px">
<div class="card mt-3" style=" background-color: rgba(255,255,255,.6);">
<div class="mt-1 card-body" id="artical">
{# <h4>El Gouna</h4>#}
<a class="btn btn-primary warn" href="#about">
<span>Divecenter</span>
</a>
<a class="btn btn-primary warn" href="#about">
<span>Hotels</span>
</a>
<a class="btn btn-primary warn" href="{% url 'price_list' %}">
<span>Price & Booking</span>
</a>
<a class="btn btn-primary warn" href="#contact">
<span>Book Hotel</span>
............
You can use block buttons on small devices and use flexbox on larger screens like this.
.wrap {
border: 1px solid black;
max-width: 500px;
padding: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap d-grid gap-2 d-md-flex">
<button class="btn btn-primary flex-md-fill">
Button
</button>
<button class="btn btn-primary flex-md-fill">
Button
</button>
<button class="btn btn-primary flex-md-fill">
Button
</button>
</div>
I am working on a code where I have to make my buttons in vertical and to right side of image, which was placed horizontally on top of image before
My piece of code is :
<div style="display: flex; width:100%; height: 100%;">
<div class="thumbnailSelector" *ngIf="seriesList.length > 1" style="margin-right: 5px;">
<div class="thumbnails list-group" style="height: 100%;">
<a *ngFor="let series of seriesList; let i=index" [ngClass]="{'active': currentSeriesIndex === i}"
class="list-group-item" oncontextmenu="return false" unselectable="on" onselectstart="return false;"
onmousedown="return false;" (click)="showSeries(i)">
<div thumbnail [imageData]="series.imageList[0]" class="csthumbnail" oncontextmenu="return false"
unselectable="on" onselectstart="return false;" onmousedown="return false;">
</div>
</a>
</div>
</div>
<!--container where image will be loaded-->
<div style=" width: 100%; height: 100%;">
<div style="width: 80%; height: calc(100% - 60px);position:relative;display:inline-block;color:white;"
oncontextmenu="return false" class='cornerstone-enabled-image' unselectable='on'
onselectstart='return false;' onmousedown='return false;'>
<div cornerstone
style="width: 100%; height: 100%;top:0px;left:0px;position:absolute;outline:none;margin: 0 auto;"
id="dicomImage">
</div>
{{viewPort.zoomValue | async}}
</div>
<!-- Toolbar in RS -->
<div>
<div class="btn-group" style="transform: rotateZ(90deg);">
<div class="btn-group" *ngIf="enableViewerTools">
<!-- Invert -->
<button type="button" (click)="invertImage()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Invert"><span class="fa fa-adjust"></span></button>
<!-- Zoom -->
<button type=" button" (click)="enableZoom()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Zoom"><span class="fa fa-search"></span></button>
<!-- Pan -->
<button type="button" (click)="enablePan()" class="btn btn-sm" style="font-size: 24pt; color:white;"
data-container='body' data-toggle="tooltip" data-placement="bottom" title="Pan"><span
class="fa fa-arrows-alt"></span></button>
<!-- Length measurement -->
<button type="button" (click)="enableLength()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Length"><span class="fa fa-arrows-alt-v"></span></button>
<!-- Angle measurement -->
<button type="button" (click)="enableAngle()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Angle"><span class="fa fa-angle-left"></span></button>
<!-- Pixel probe -->
<button type="button" (click)="enableProbe()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Pixel Probe"><span class="fa fa-dot-circle"></span></button>
<!-- Elliptical ROI -->
<button type="button" (click)="enableElliptical()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Elliptical ROI"><span class="fa fa-circle"></span></button>
<!-- Rectangle ROI -->
<button type="button" (click)="enableRectangle()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Rectangle ROI"><span class="fa fa-square"></span></button>
<!-- Reset Image -->
<button type="button" (click)="resetImage()" class="btn btn-sm"
style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
data-placement="bottom" title="Reset Image"><span class="fa fa-window-restore"></span></button>
</div>
</div>
</div>
</div>
Now it looks like :
https://imgur.com/a/mxp0uPa
What I want my image to look like is : https://imgur.com/a/KM6UHh4
I am using angular so pardon me for the data binding, in case I am missing anything let me know.
You may take a look at writing-mode.
basic example with flex and writing-mode:
.button-sideway {
writing-mode: vertical-rl;
}
/* flex layout used */
.flex {
display: flex;
height: 100%;
}
figure {
margin: auto;
}
.button-sideway {
margin: 1em 1em 0 auto;
}
/* demo*/
img {
max-height: 70vh;
}
body {
margin: 0;
padding: 0;
height: 100vh;
box-sizing: border-box
}
<div class="flex">
<figure>
<img src="http://dummyimage.com/400">
<figcaption>
<!-- description-->
</figcaption>
</figure>
<nav class="button-sideway">
<button>btn</button>
<button>btn</button>
<button>btn</button>
<button>btn</button>
</nav>
</div>
if it is not about rotating the container, but stacking icon, drop the wrtiting-mode and make your buttons block so they stack on top of each others.
I'm stuck working with this code on my company's site. I can't seem to figure out how to float the buttons with the code given.
<div class="text-center"><a class="text-center" href="/contact-us"><button class="btn btn-small btn-default"><i class="fa fa-envelope" aria-hidden="true"></i>CONTACT US</button></a></div>
<div style="text-align:center;"><button class="text-center btn btn-default" style="padding-top:5px;"> <i class="material-icons" style="vertical-align: middle; font-size:1.25em;">local_florist</i>SEND FLOWERS</button></div>
Current view. Links to imgur.
Any help would be greatly appreciated. Thanks so much
You can use float left or right for horizontal align and for centralize use margin and as in bootstrap use pull-left or `pull-right class for the same.
like:
<div class="text-center pull-left"><a class="text-center" href="/contact-us"><button class="btn btn-small btn-default"><i class="fa fa-envelope" aria-hidden="true"></i>CONTACT US</button></a></div>
<div style="text-align:center;" class="pull-left"><button class="text-center btn btn-default" style="padding-top:5px;"> <i class="material-icons" style="vertical-align: middle; font-size:1.25em;">local_florist</i>SEND FLOWERS</button></div>
try this
<div class="center">
<button id="btn1">Button1</button>
<button id="btn2">Button2</button>
</div>
css
#btn1, #btn2
{
width:20%;
float:left;
}
I am building a login page with social buttons using Font Awesome icons. On larger devices the buttons are displayed horizontally next to each other, but as I resize my screen the right-most button will wrap underneath the other two buttons when they get too wide for the column. I would like for the buttons to stack vertically and expand to fill the space of the column instead of having a misplaced button underneath. I've tried a method using media queries but it's a bit hacky and I'm afraid it won't be easy to maintain, so I scratched that idea.
Here's what I have so far:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<div class="row">
<button id="login" class="btn btn-default">Login</button>
<button id="facebook" class="btn btn-default"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
Any suggestions on how to tackle this?
You have two options. In my opinion media queries would be the cleanest but here are the options:
1) Adding a media query and targeting a special class that you can add to just those buttons:
#media screen and (max-width: 768px){
.loginBtns {
width:100%;
display:block;
margin: 10px 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8 col-xs-12">
<div class="row">
<button id="login" class="btn btn-default loginBtns">Login</button>
<button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
2) Duplicating the buttons and hiding one version on small screens while showing the other. I'm not a big fan of duplicating code so I wouldn't recommend this option but if you don't like media queries it could be an option.
.loginBtns2 {
width:100%;
margin: 5px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8 hidden-xs">
<div class="row">
<button id="login" class="btn btn-default loginBtns">Login</button>
<button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
<div class="col-xs-12 visible-xs">
<div class="row">
<button id="login" class="btn btn-default loginBtns2">Login</button>
</div>
<div class="row">
<button id="facebook" class="btn btn-default loginBtns2"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
</div>
<div class="row">
<button id="google" class="btn btn-default loginBtns2"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
Here is a working codepen with both options too:
https://codepen.io/egerrard/pen/woVEJW
not sure if this helpful. but try this..
<div class="container">
<div class="row text-center">
<div class="col-md-6">
<button id="login" class="btn btn-default">Login</button>
<button id="facebook" class="btn btn-primary"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-danger"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
This is my product template file.
<br>
<div>
<div ng-if="SearchText.length<3" ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']" >
<h2 ng-show="product.group_by_CHANGED">{{product.BrandName}} </h2>
<div class='box'>
<ng-include src="'commonTemplate.html'"></ng-include>
</div>
</div>
<!-- template (common piece of code) -->
<script type="text/ng-template" id="commonTemplate.html">
<div class="BrandName"> <b>{{product.BrandName}}</b> </div>
<div class="ProductName"> {{product.ProductName}} </div>
<br>
<div> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img> </div>
<div class="ProductVariants">
<select class="form-control btn btn-default btn-xs text-center" ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants" ng-change="ChangeVariant(product.ProductID, SelectedVariant.VariantID)"></select>
</div>
<div class="Price">
<strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}}
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart==0">
<a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart>0">
<a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-sm btn-info disabled">{{SelectedVariant.InCart}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
</script>
</div>
Box class is defined like this in CSS:
.box {
margin : 5px;
display : inline-block;
width: 170px;
height: 275px;
background-color: #F5FBEF;
text-align:center;
vertical-align: top;
}
When display my product list look like this:
I want to show products side by side.
Can some one help me how to do that?
EDIT:
After changes suggested by Rachel Gallen, it turn out like this:
I want to display brand name in new line when new brand encounters. rest all looks good.
I put in .ng-repeat:display:inline plus a wrapper
#wrapper {
display: inline!important;
height: 275px;
max-width: 540px;
}
.box {
margin: 5px;
display: inline-block;
width: 170px;
height: 275px!important;
background-color: #F5FBEF;
text-align: center;
float: left;
}
.ng-repeat {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<div ng-if="SearchText.length<3" ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']">
<h2 ng-show="product.group_by_CHANGED">{{product.BrandName}} </h2>
<div id=wrapper>
<div class='box'>
<div class="BrandName"> <b>{{product.BrandName}}</b>
</div>
<div class="ProductName">{{product.ProductName}}</div>
<br>
<div>
<img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img>
</div>
<div class="ProductVariants">
<select class="form-control btn btn-default btn-xs text-center" ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants" ng-change="ChangeVariant(product.ProductID, SelectedVariant.VariantID)"></select>
</div>
<div class="Price">
<strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}}
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart==0">
<a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart>0">
<a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-sm btn-info disabled">{{SelectedVariant.InCart}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
</div>
<div class='box'>
<div class="BrandName"> <b>{{product.BrandName}}</b>
</div>
<div class="ProductName">{{product.ProductName}}</div>
<br>
<div>
<img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img>
</div>
<div class="ProductVariants">
<select class="form-control btn btn-default btn-xs text-center" ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants" ng-change="ChangeVariant(product.ProductID, SelectedVariant.VariantID)"></select>
</div>
<div class="Price">
<strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}}
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart==0">
<a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart>0">
<a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-sm btn-info disabled">{{SelectedVariant.InCart}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Add property float:left to box class. If that doesn't work, please provide a demo.
Jsfiddle: http://jsfiddle.net/z9jbhmd4/
You can add float in your css:
.box {
margin : 5px;
display : inline-block;
width: 170px;
height: 275px;
background-color: #F5FBEF;
text-align:center;
vertical-align: top;
float: left;
}
And to keep the height of the container, move <div class="box">...</div> inside container like <div class="box-container">.....</div>
Then, add css:
.box-container:after {
content: " ";
display: block;
height: 0;
clear: both;
}