I have tried to give the full length of div . But button could not get the full length . Please help me to fix out the errors.
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Try to update css:
.card {
padding-right: 0px;
padding-left: 0px;
}
.block {
display: block;
width: 100%;
}
And the button has already taken full width of parent div, if you want to make div wider, try to adjust bootstrap column size, for example col-md-3 to col-md-6:
<div class="col-md-6 col-sm-6 text-center card">
Because in bootstrap, the column have padding-right: 15px; and padding-left: 15px; by default. So if you want your button to get the full width of the column, you can overwrite these css or add the css below to your button:
Demo:
.block {
margin-right: -15px;
margin-left: -15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="block" data-toggle="modal" data-target="#myModal">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Use display: inline-block in both "span" and next "div" tag.
Remove padding to the column div:
.card{ padding:0px}
Here is the snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.card{ padding:0px}
</style>
</head>
<body>
<script src="script.js"></script>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<span class="icon">
<!-- <img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px"> -->
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
</body>
</html>
All Bootstrap columns (.col-*) have padding-x (padding-right: 15px; and padding-left: 15px;) by default.
If the button is the only child element of that column, and you don't want to override the class's styles, you can use the px-0 or p-0 class on the column to override the padding of only that column:
<div class="col-md-3 col-sm-6 text-center card px-0">
...
</div>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width:100%">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Use width:100% as style or add it in any class and then apply that class to the button
Just use padding zero .
<div class="col-md-3 col-sm-6 text-center card px-0" style="padding: 0px ">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#classRoutine" style="width:100%">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Related
From *ngFor loop I can populate images but I want to add a button below the image or on the image. I'm not familiar with CSS below is my code.
Html code
<div class="container">
<div *ngFor="let img of imageData">
<p [hidden]="true">{{img.Id}}</p>
<img class="original" [alt]="img.Name"
src="https://localhost:44349/{{img.ImagePath}}"
width="350" height="350"/>
<button type="submit" (click)="deleteImage()" class="btn btn-danger"><i
class="far fa-trash-alt"></i>
Remove
</button>
</div>
</div>
CSS
.container {
position: relative;
text-align: center;
}
.original {
width: 250px;
height: 250px;
float: left;
margin: 1.66%;
transition-duration: 0.3s;
border-radius: 15px;
}
Hope this is what you are looking for.
.container {
/* position: relative;*/
text-align: center;
display: flex;
flex-direction: column;
}
.original {
width: 250px;
height: 250px;
float: left;
margin: 1.66% auto;
transition-duration: 0.3s;
border-radius: 15px;
}
.content {
display: flex;
flex-direction: column;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="content">
<p>Image Id</p>
<img class="original" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" width="350" height="350" />
<button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
Remove
</button>
</div>
<div class="content">
<p>Image Id</p>
<img class="original" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" width="350" height="350" />
<button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
Remove
</button>
</div>
</div>
For angular with dynamic image your template will be like.
<div class="container">
<div class="content" *ngFor="let img of imageData">
<p [hidden]="true">{{img.Id}}</p>
<img class="original" src="https://localhost:44349/{{img.ImagePath}}" width="350" height="350" />
<button type="submit" class="btn btn-danger"><i class="far fa-trash-alt"></i>
Remove
</button>
</div>
</div>
I'm building a chat window - the height 100% works perfectly, but I can't make the messages appear on the bottom.
HTML:
<div class="d-flex justify-content-center">
<div class="container container-child">
<div class="card">
<div class="card-body">
<div class="text-left"><span class="badge badge-pill badge-secondary" title="2020-01-01 09:00:00">Hello</span></div>
<div class="text-right"><span class="badge badge-pill badge-primary" title="2020-01-01 09:00:00">World</span></div>
</div>
<div class="card-footer">
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Your message..." autofocus />
<div class="input-group-append">
<button type="button" class="btn btn-primary"><i class="fa fa-paper-plane-o fa-fw"></i><span class="d-none d-sm-inline"> Send</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.d-flex {
height: 100%;
}
.card {
height: 100%;
}
.card-body {
overflow-y: auto;
}
.badge {
font-weight: 400;
}
Screenshot:
You can align your texts to the bottom by turning .card-body into a flex element with display: flex, and then setting margin-top: auto on both .text-left and .text-right.
Unfortunately this brings the right-hand text to the left, and places it on the same line. This can be resolved by adding justify-content: space-between to .card-body, and a margin-bottom of about 20px to .text-left.
This can be seen in the following:
.d-flex {
height: 100vh; /* Changed purely for Stack example */
}
.card {
height: 100%;
}
.card-body {
overflow-y: auto;
}
.badge {
font-weight: 400;
}
/* NEW */
.card-body {
display: flex;
justify-content: space-between;
}
.text-left, .text-right {
margin-top: auto;
}
.text-left {
margin-bottom: 20px;
}
<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">
<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>
<div class="d-flex justify-content-center">
<div class="container container-child">
<div class="card">
<div class="card-body">
<div class="text-left"><span class="badge badge-pill badge-secondary" title="2020-01-01 09:00:00">Hello</span></div>
<div class="text-right"><span class="badge badge-pill badge-primary" title="2020-01-01 09:00:00">World</span></div>
</div>
<div class="card-footer">
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Your message..." autofocus />
<div class="input-group-append">
<button type="button" class="btn btn-primary"><i class="fa fa-paper-plane-o fa-fw"></i><span class="d-none d-sm-inline"> Send</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
Note that given this seems to be a chat application (that would write the messages out sequentially), you'll want to adjust the margin-bottom of each element to have the same value (of 20px in my example) added to it as each new message is generated.
I thought I had this, but no matter what I do I cannot seem to nail it.
This is what my output looks like:
What I am trying to do is have a title for each option section to the left (Check Functions and Print Flags) then have the options centered in the box on the right.
Instead the closest I can get is to have it center the right hand side in the entire box.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/VERSION/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/VERSION/styles/kendo.bootstrap.min.css">
<div class="row">
<div class="col" style="text-align: center;">
<div class="col" style="position: relative; text-align: center; border-style: solid; border-width: thin">
<div style="width: 120px; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); padding: 5px; background-color:cadetblue; font-weight: bold;">
Check Functions
</div>
<label class="text-right">Check number :</label>
<kendo-numerictextbox name="currency" id="txtCheckNumber" format="#" min="0" enable="true" max="9999999999" spinners="false" value="10001"> </kendo-numerictextbox>
<kendo-datepicker name="monthpicker" start="CalendarView.Month" depth="CalendarView.Month" format="MM/dd/yyyy" value="DateTime.Now"> </kendo-datepicker>
<kendo-button name="assignCheckNumbers" type="button" onclick="LoopGrid()">Assign Check Numbers </kendo-button>
</div>
<div class="col" style="position: relative; text-align: center; border-style: solid; border-width: thin">
<div style="width: 120px; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); padding: 5px; background-color:cadetblue; font-weight: bold;">
Print Flags
</div>
<kendo-button name="printTrue" type="button" onclick="FlipAllPrintFlags(1)">All Print To True</kendo-button>
<kendo-button name="printFalse" type="button" onclick="FlipAllPrintFlags(2)"> All Print To False</kendo-button>
</div>
</div>
</div>
I think you need more row column envelopes - you need two rows and two cols
<div class="row">
<div class="col-2 border" style="background-color:cadetblue; font-weight: bold;">
Check Functions
</div>
<div class="col-10 border text-center">
<label class="text-right">Check number :</label>
<kendo-numerictextbox name="currency" id="txtCheckNumber" format="#" min="0" enable="true" max="9999999999" spinners="false" value="10001"> </kendo-numerictextbox>
<kendo-datepicker name="monthpicker" start="CalendarView.Month" depth="CalendarView.Month" format="MM/dd/yyyy" value="DateTime.Now"> </kendo-datepicker>
<kendo-button name="assignCheckNumbers" type="button" onclick="LoopGrid()">Assign Check Numbers </kendo-button>
</div>
</div>
<div class="row">
<div class="col-2 border" style="background-color:cadetblue; font-weight: bold;">
Print Flags
</div>
<div class="col-10 text-center border">
<kendo-button name="printTrue" type="button" onclick="FlipAllPrintFlags(1)">All Print To True</kendo-button>
<kendo-button name="printFalse" type="button" onclick="FlipAllPrintFlags(2)"> All Print To False</kendo-button>
</div>
</div>
I have problem with my footer. I am using ASP.NET Core 2 MVC, with Razor View.
Right now I tryed everything from this, including comments:
https://css-tricks.com/couple-takes-sticky-footer/ & https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Note, that I do not want fixed footer. I know that there is several similar topics in SO, but I tryed already everything I found. I belive that I am missig something obvoius. I work on this whole day already and it just stops me.
Every time my footer is rendered just below Edit, Delete buttons, or somewhere in the middle of page. I am guessing that it might be something with my _Layout architecutre or for in Index file is causing ot somehow.
My _Layout.cshtml looks like this:
<div class="wrapper">
<div class="header">
<!--HEADER-->
</div>
<div class="content">
<!--BODY-->
#RenderBody()
</div>
<div class="footer">
<!--FOOTER-->
<footer>
<div></div>
</footer>
</div>
</div>
My Index.cshtml looks like (for most of the cases footer was rendered below Edit/Delete form:
<div>
#if (Context.User.Identity.IsAuthenticated)
{
<a asp-action="Create" class="btn btn-sm btn-primary adminBtn">Add new project</a>
}
<div>
#foreach (var item in Model)
{
<div class="projectContainer col-lg-6">
#if (Context.User.Identity.IsAuthenticated)
{
<form asp-action="Delete" method="post">
<a asp-action="Edit" class="btn btn-sm btn-warning"
asp-route-projectID="#item.ProjectID">
Edit
</a>
<input type="hidden" name="ProjectID" value="#item.ProjectID" />
<button type="submit" class="btn btn-danger btn-sm">
Delete
</button>
</form>
}
<div class="innerContainer" style="background-color: #item.BackColor">
<div class="projectHeader col-xs-12">
#item.Name
</div>
<div class="hyperButton col-xs-12">
<a asp-action="Details" asp-route-projectID="#item.ProjectID">See more ></a>
</div>
<div class="projectPictures col-xs-12">
<a asp-action="Details" asp-route-projectID="#item.ProjectID"><img src="#item.PictureUrl" asp-append-version="true" /></a>
</div>
</div>
</div>
}
</div>
</div>
My site.css looks like that right now:
html, body {
height: 100%;
overflow-x: hidden;
}
body {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
UPDATE with source code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="/src/lib/fontawesome/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="/src/lib/bootstrap/css/bootstrap.min.css">
<script src="/src/lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/dist/site.css" />
<style>
.input-validation-error {
border-color: red;
background-color: #fee;
}
</style>
<title>
Przemyslaw Bak - My projects
</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<!--HEADER-->
<div class="mainHeader">
<div class="helloTextContainer col-12">
<div class="helloTxtWrapper">Hi! I am</div>
</div>
<div class="mainTextContainer col-sm-9 col-xs-12">
<div class="mainTxtWrapper">Przemyslaw Bak {developer}</div>
</div>
<div class="socialContainer col-sm-3 hidden-sm-down">
<!--VIEW COMPONENT-->
<i class="fab fa-facebook-square"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-github-square"></i>
</div>
</div>
<div class="mainNavbar">
<div><a class="mainButton projects" href="/">my projects</a></div>
<div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
<div><a class="mainButton about" href="/Literature">literature</a></div>
<div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
</div>
<div class="stickyNavbar">
<div><a class="mainButton projects" href="/">my projects</a></div>
<div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
<div><a class="mainButton about" href="/Literature">literature</a></div>
<div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
</div>
<!--HERE TRIGGERS APP.JS-->
<div class="emptySpace" id="app"></div>
</div>
<!--BODY-->
<div class="content">
<!--button-->
<style>
.projects {
color: gray !important;
}
</style>
<div>
<div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #E8E8E8">
<div class="projectHeader col-xs-12">
Name of the project
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="#" />
</div>
</div>
</div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #fafafa">
<div class="projectHeader col-xs-12">
Name of the project
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" />
</div>
</div>
</div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #f9fbf8">
<div class="projectHeader col-xs-12">
Best project ever
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" />
</div>
</div>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="footer">
<footer>
<div class="footText">© 2018 - Przemyslaw Bak</div>
</footer>
</div>
</div>
<!--SCRIPTS-->
<script src="/dist/bundle.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
</body>
</html>
Currently after scrolling down my footer looks like this (2018 - Przemyslaw Bak):
UPDATE2:
I am using Bootstrap 4, maybe it changes something
Take out that position: absolute; in the footer CSS
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
html, body {
height: 100%;
overflow-x: hidden;
}
body {
min-height: 100%;
position: relative;
}
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
<div class="wrapper">
<div class="header">
<!--HEADER-->
</div>
<div class="content">
<!--BODY-->
<p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p>
</div>
<div class="footer">
<!--FOOTER-->
<footer>
<div>Div inside footer</div>
</footer>
</div>
</div>
if you using bootstrap 4 there good solition for you,
https://getbootstrap.com/docs/4.0/utilities/flex/#align-self
you need self item end if you wanna use to bootstrap I think you should be use this.
After Viktor`s comments I stripped out my HTML code and started to suspect, that my Bootstrap (previously 4.0.6) is messing up something.
So I started to Google "flush footer bootstrap" and I found this:
Flush footer to the bottom of the page in bootstrap 4
After installation Bootstrap 4.1.X files, I changed my site.css and _Layout.cshtml as follows:
body, wrapper {
min-height: 100vh;
}
footer {
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
_Layout.cshtml:
<body>
<wrapper class="d-flex flex-column">
//nav bar
//render body
<main class="container-fluid py-3 flex-fill">
#RenderBody()
</main>
//footer
<footer>
<div class="footText">© #DateTime.Now.Year - Przemyslaw Bak</div>
</footer>
</wrapper>
//scripts
</body>
And it works!
I've created a profile picture structure in Bootstrap.
I want ask how can I add an hover effect which allows the apparition of a plus symbol, like = + , which indicates to the user that they can add a new image or something like it.
Thanks.
#import url( 'https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="form-group text-center" data-type="admins operators secretaries customers">
<div class="profile-image-container">
<div class="profile-header-img">
<img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
<!-- badge -->
<div data-content="">
<span class="label label-primary rank-label" style="font-size: 13px;">
<label id="total-points">0</label>Points </span>
</div>
</div>
EDIT: gave parent div .profile-header-img the img's width and height to set :hover on it and prevent flickering:
.profile-header-img {
width: 120px;
height: 120px;
margin: 0 auto;
}
.glyphicon.glyphicon-plus-sign {
display: none;
color: white;
position: absolute;
z-index: 1;
left: 50%;
top: 44px;
transform: translate(-50%, 0);
font-size: 32px;
}
.profile-header-img:hover .glyphicon.glyphicon-plus-sign {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group text-center" data-type="admins operators secretaries customers">
<div class="profile-image-container">
<div class="profile-header-img">
<img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
<span class="glyphicon glyphicon-plus-sign"></span>
<!-- badge -->
<div data-content="">
<span class="label label-primary rank-label" style="font-size: 13px;">
<label id="total-points">0</label>Points
</span>
</div>
</div>
</div>
</div>