I'm trying to create a download button with an icon on it, using Bootstrap 4 and Font awsome for the icon.
The thing is when I add the icon using:
<i class="fa fa-mobile fa-3x pull-left" ></i>
it pushes the text out of the button, and I can't get the button width to grow with the contents.
Here is my jsFiddle:
http://jsfiddle.net/x1hphsvb/48/
That's because you are floating your <i> element.
Remove the pull-left class from <i> and try this:
<a class="d-inline-flex flex-nowrap">
</a>
And add a margin class to your txtAppStore div. For example:
<div id="txtAppStore" class="ml-3"></div>
Working fiddle: http://jsfiddle.net/x1hphsvb/50/
The main issue was that i had the following CSS, that I missed, and was limiting my button size:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
I've comment that out, and did some changes accoding to the first answer, and now it looks goot, Thank you!
http://jsfiddle.net/dumitrudan608/x1hphsvb/52/
just define width for #txtAppStore, or put that all to Bootstrap div like col-md-3 and center it, then inside col-md-3 you can putt this button with width: 100%; and for example inside txt for 80% of width.
Quickest solutions but not "auto" is:
#txtAppStore {
width: 150px;
}
Related
html
<div class="xxx">
<div class="xyz" ng-repeat="item in formList">
<div ng-show="formList.indexOf(app)!= -1" class="added-item">
<img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
</div>
</div>
<div class="abc" ng-hide="formList.length>20">
<button class="btn" ng-click="addItem()">
Add<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
css
.xxx {
width:500px;
height: 80px;
}
.added-item-icon, .abc {
width: 50px;
height: 50px;
}
I'm not good in css, and have only very basic knowledge
I am trying to add some list of items in a horizontal tab of height 80 and width 500 pixels, also an add app button too
As per the code, the add app button disappear when we add the 20th app
what I need to do is, lets say the xxx div(horizontal div) can have 5 items, after which overflow occurs
I want to set the overflow horizontal, not vertical
also at that stage(when 5 items are added), I want to fix the add app button at the very right of the division xxx, and the scroll due to overflow should not affect that button, it should be fixed there
we doesn't need to care more about the size of the item icons or add button,
Please help
For this you'll want to look into using flexbox. To get this working, all you really need to do is add display: flex; flex-direction: column to your container, and then overflow-y: auto to the section you want to scroll.
Heres a Plunker demonstrating it.
I have a button:
<div id="cta">
<a href="#" class="btn btn-lg">
Who are we?
</a>
</div>
#cta {
margin-left:35%;
position:absolute;
z-index:1;
}
#cta a{
border-radius:100px;
border-color:#FFF;
border-width:thick;
background-color:#ff8900;
font-size:1.75vw;
}
http://codepen.io/anon/pen/elcEi
(sorry no bootstrap on codepen)
And I'd like to adjust the position of the text inside, and the height of the button (which changes with size of text).
I have messed with paddings, margins, heights, aligns, vertical-aligns, line-heights, + all these in negatives.
Any ideas?
Also, Bootstrap has additional styles for aligning text in an element, such as text-center or text-right.
P.S. Was wondering why you surrounded the button with a div. To could just as the cta class to the button itself.
I'm trying to make a thumbnail with bootstrap3.
How can I make this, I mean to put this zoom-in glyphicon over the image?:
(sorry for paint shop :D)
Actually, I've got this:
with the following code:
<div class="thumbnail PNET-thumbcolor">
<div class="PNET-cursor-hand center-block text-center">
<img data-src="holder.js/140x140" alt="Producto">
<span class="glyphicon glyphicon-zoom-in"></span>
</div>
<div class="caption">...
</div>
</div>
Is there a way to make this with CSS only, without touching the bootstrap style?
Thanks in advance!
Please comment or ask if you need more information and/or improve! :)
UPDATE:
JSFIDDLE: http://jsfiddle.net/Leandro1981/AKwb4/1/
I edit only CSS, adding a position relative to Lens icon, and set a fixed width to container.
.PNET-cursor-hand
{
width:140px;
}
.PNET-thumbcolor .glyphicon-zoom-in
{
position:relative;
top:-20px;
right:5px;
text-align:right;
display:block;
}
Here the demo
Problem:
A button group I've created using bootstrap css appears cut off on the left, as you can see below.
Code:
I have the following HTML logic:
<div class="span5">
<div class="row show-grid">
<div class="btn-group>
<button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown">show info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><div id="address"><?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?></div></li>
<li><div id="logs"><?php echo anchor("mycontroller/method2/",'logs'); ?></div></li>
<li><div id="status"><?php echo anchor("mycontroller/method3/",'status'); ?></div></li>
</ul>
</div>
<br/>
<div class="span2"><?php echo anchor("mycontroller/method4/","Back to List")?></div>
</div><!-- end class row show-grid-->
<br/>
</div>
What I've Tried So Far:
I've been using Firefox's Inspect tool to try to find the differences between the top button and the bottom, but I don't know what property I should be looking for. I've tried modifying properties like:
padding-left
padding-right
margin-left
margin-right
I've also tried to reduce the number of classes applied to the button so that I only had:
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
But that didn't resolve the problem. Can someone point me in the right direction? Perhaps by naming the types of properties I should be tracking down? It's probably a CSS specificity problem... because I haven't modified any of the bootstrap stuff.
Thanks
Why are you using a button group for buttons that aren't grouped together? The reason it's "cut off" is because button groups are supposed to be merged together.
Regardless, it's displayed like that because the inner borders of the buttons don't have rounded edges. You can fix it by manually applying the border radius:
border-top-left-radius: 4px; border-bottom-left-radius: 4px
Give this CSS
.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}
this is a hack fix but on the containing div that is wrapped around the button - you may simply have
overflow:hidden
Inspect in chrome with firebug and go up and you will most likely see this.. Bootstrap hides data that overflows the columns.
OMG,
the answer is:
to change from:
<div class="btn-group>
to:
<div class="btn-group">
You forgot the "
You can see the live fix here: http://jsfiddle.net/kCsEs/
Following solved my problem
.btn {
width:auto !important;
}
I'm using twitter bootstrap. It has collapse module.
I'm using it like this.
<a class="dropdown" style="float: right;" href="#collpasediv" data-toggle="collapse"> Collapse </a>
This is the collpasediv
<div id="collpasediv" class="collapse in">
<div class"circlecount">
1
</div>
<div class"content">
Some text goes here
</div>
</div>
I would like to move half of the circle of circlecount outside the collapsediv.
By default bootstrap applies overflow:hidden attribute for collapsediv.
I tried by applying overflow:visible for both collpasediv and circlecount. But collapse not working properly. Can anyone help me to fix it? Thanks
PS: Circlecount div is just to display numbers with some circled background image. I want the half of the circle outside collpasediv and half of the circle inside collapsediv.
Thanks
In the stylesheet for the twitter bootstrap there is the following declaration:
.collapse.in { height: auto; }
Add to it like this:
.collapse.in { height: auto; overflow: visible; }
Or overload it by adding a new declaration like this (leave the other declaration untouched in the bootstrap - this makes updating in the future easier):
.collapse.in { overflow: visible; }