I am using bootstrap & font awesome, and i am looking to make something like this:
I have this:
I want something like this:
Markup:
<div class="alert alert-success"><i class="fa fa-paperclip icon-alert"></i> Everything was edited!</div>
CSS:
.icon-alert {
font-size: 30px;
float: left;
margin-right: 10px;
opacity: 0.7;
}
You'll need to set a height to the container and then you can hide the overflow of the nested font-awesome icon, using overflow:hidden.
CSS:
.clipped-alert{
overflow:hidden;
height:55px;
}
HTML:
<div class="clipped-alert alert alert-success">
<i class="fa fa-paperclip fa-5x icon-alert pull-right text-success"></i>
Everything was edited!
</div>
DEMO
You would create a container around the icon that has the property of over-flow: hidden;
You can then position the element inside however you want.
http://jsfiddle.net/MathiasaurusRex/W9WC2/1/
Related
I am trying to center a spinner in a button. The spinner will appear while the system is getting a response. I have changed margins and padding and the changes show when I inspect element, but it just adds margin and padding to the bottom without moving the spinner further up within the button.
Here is my Jade:
div.form-group
div.col-sm-4
button.form-control.btn.btn-success.strong-button(type='submit' ng-model='pressed' ng-disabled="pressed") Delete
spinner(ng-show="submitDelete")
The css for spinner is
.font-awesome-spinner{
width: 100%;
text-align: center;
}
The spinner element creates a div inside the button element that looks like (taken from page source)
<button (all the stuff here)>
<div class="font-awesome-spinner ng-isolate-scope" ng-show="submitDelete">
<i class="fa fa-circle-o-notch fa-spin"
::before
</i>
</div>
</button>
You cannot center a block element like a DIV with text-align: center; Set the width of your spinner div and then add margin: auto; to the spinner div.
Also your HTML is malformed. Check (all the stuff here) in your button element.
<!DOCTYPE html>
<head>
<style type="text/css">
#button_element {
width: 100px;
}
#button_element .font-awesome-spinner {
width: 50px;
margin: auto;
}
</stlye>
</head>
<body>
<button id="button_element">
<div class="font-awesome-spinner ng-isolate-scope" ng-show="submitDelete">
<i class="fa fa-circle-o-notch fa-spin"></i>
</div>
</button>
</body>
</html>
I have a button and some text next to it. I'd like to match the text's vertical alignment with the button's. Here's what I have now:
Basically, I'd like the or Sign Up text to go a bit higher. I'm using MaterializeCSS as well. Here's the code I have for this:
HTML
<div class="center">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span class="alternate-option">or Sign Up</span>
</div>
CSS
.alternate-option {
margin-left: 20px;
}
I have tried using padding-bottom as well as margin-bottom.
This is caused by MaterializeCSS's button style :
margin-bottom: 15px;
An alternate solution to Mousa Dirksz's span repositionning would be to
remove the button's default margin :
HTML
<div class="center">
<div class="alternate-option">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span>or Sign Up</span>
</div>
</div>
CSS
.alternate-option button {
margin-bottom: 0px;
}
.alternate-option span {
margin-left: 20px;
}
Try to use:
.alternate-option {
margin-left: 20px;
vertical-align: baseline;
position: relative;
top:-5px;
}
Also look at: http://www.w3schools.com/cssref/pr_class_position.asp
For anyone looking to center a button and a link it's possible to use the following snippet:
<div class="valign-wrapper">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span class="alternate-option">or Sign Up</span>
</div>
.alternate-option {
margin-left: 10px;
}
It's important to note that using Materialize valign-wrapper class will vertically align children elements but it will remove the spacing between them that's why we need to add a margin-left on the span children.
Without knowing the full CSS, I suspect that you need to vertically align the button and span..such as:
button, span {
vertical-align: middle;
}
Try this suggestion
Use absolute positioning
CSS:
.alternate-option {
position:absolute;
left:numeric value*(adjust according screen size)*
top:numeric value*(adjust according screen size)*
}
I have the following code. Only part of the image is clickable.
HTML
<div class="row">
<div class="col-md-4 text-center">
<div class="portfolio-item">
<a>
<img class="btn img-portfolio project-img-responsive" data-toggle="modal" data-target="#project-modal" src="img/map_image.jpg">
</a>
</div>
</div>
</div>
CSS
.btn -> bootstrap CSS class
.row -> bootstrap CSS class
.col-md-4 -> bootstrap CSS class
.text-center -> bootstrap CSS class
.img-portfolio {
margin: 0 auto;
}
.project-img-responsive {
display: block;
max-width: 50%;
height: auto;
}
.portfolio-item {
margin-bottom: 25px;
}
The problem is only with chrome. Works fine in mozilla.
What property am I missing out or getting wrong?
Hello try to add attribute Href
<a href="#" >
<img class="btn img-portfolio project-img-responsive" data-toggle="modal" data-target="#project-modal" src="img/map_image.jpg">
</a>
it works with me .
If #DStruOne's suggestion doesn't work trying adding display: inline-block to your anchor element.
a { display: inline-block; }
If you want to trigger a modal, then maybe move
data-toggle="modal" data-target="#project-modal"
to your anchor tag. In my opinion you shouldn't add '.btn' class to your image. Try moving it to anchor tag too.
Given that the JS fiddle works fine, I suspect another (invisible) element on the page is overlapping your image. I managed to fix a problem similar to this by setting the z-index and position (because the first won't work without the second) of the <a> tag...
position: relative;
z-index: 100;
I am using Bootstrap 3. Here is my HTML page:
As you can see the star is downside to the title. I want to align with title
Here is my html code:
<p class="pull-right visible-xs">
<h3><center>2000 Cadillac Eldorado Esc (Prospect heights) $3500
<button type="button" class="btn bookmark" id="1799" >
<span class="
glyphicon glyphicon-star-empty "></span>
</button>
</center>
</h3>
</p>
and css:
button.bookmark {
border:none;
background: none;
padding: 0;
}
.btn.bookmark .glyphicon {
line-height: inherit;
vertical-align: middle;
}
My answer to your previous question only works when the icon is adjacent to a .btn.
The idea being that the two align perfectly as if they were two .btns.
In this case you don't need the .btn class, you can just set the vertical align on the button.
<button type="button" class="bookmark" id="1799">
button.bookmark {
border:none;
background: none;
padding: 0;
vertical-align: middle;
}
Demo
I believe the line-height in your css that's causing it. It is inheriting the attribute and it might be smaller causing it to have too much space above it. If you have a link I can check it in firebug. If not try messing with that. You can also find some cool info about it Here
Hopefully that helps, Let me know if that does it
Iv looked every where and most people are changing the backgrounds first :p is there any way I could change the color straight away without changing the background ? Thanks a lot, examples will be gladly appreciated :)))
Just use "color" on your CSS. Sample :
<div>
<i class="icon-5x icon-search red"></i>
</div>
<div>
<i class="icon-5x icon-search green"></i>
</div>
<div>
<i class="icon-5x icon-search blue"></i>
</div>
Then for coloring it :
div {
width:200px;
height:80px;
background: grey;
margin-bottom: 6px;
}
i.icon-5x {
display:block;
text-align: center;
}
i.green {color:green}
i.blue {color:blue}
i.yellow {color:yellow}
And finally :
DEMO