I have this simple user profile -https://jsfiddle.net/mt15199/fgogetrh/
I want to pull the envelope icon on the left, so I put it on span element and added a class pull-left but icons dropped and overlapped the container. Without this span element with pull left class the envelope icon and other icon sitting inside of div.
How can I fix this?
<span class="pull-left">
<a data-original-title="Broadcast Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
</span>
Whenever you are using float don't forget to use clear or else element will overlap.
See demo
Use clearfix class or clear:both; after floated element
use
<div class="clearfix"></div>
or
<div style="clear:both;"></div>
First example is from bootstrap having same style given in second one.
Related
I have the following part of the form:
<div class="d-grid mb-3">
<button class="btn btn-primary mb-3" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
Button rstpss is conditional and appears only in case user has entered wrong login or wrong password at the same time.
Both buttons currently use 100% of div's width and placed strictly one below another.
But I want the rstpss button to be placed below the userlogin one only in case there is no available predefined div's width to place them one next to another keeping in mind they both will take all available div's width, be the same width and contain the same space between them as their bottom margins (the same margin is used with the input above the buttons).
When only userlogin button is shown it must take 100% div's width.
I suppose it shouldn't be very difficult and must be clearly described at the Bootstripe's documentation, but I've started using Bootstrap just yesterday and just don't know what to look for. Any example I have found doesn't answer my question.
A clear example will help me greatly to understand how to deal with such cases in the future. And what to search at the Bootstrap's documentation, too.
Here is an example of what I am trying to achieve:
Try this:
<div class="d-flex mb-3">
<button class="btn btn-primary mb-3 flex-fill" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3 flex-fill" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
This should expand the first button to a 100% if the second one doesn't exist, and keep both buttons on same line with equal width if both exist.
I have made the following pile of tags. It does the job while it seems to be not the most elegant one.
<div class="row" style="--bs-gutter-x: 1rem">
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" type="submit" name="userlogin">Click or tap here to login</button>
</div>
</div>
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" formaction="/reset.php" name="rstpss">Click or tap here to recover your password</button>
</div>
</div>
</div>
The default value of the row class is 1.5rem. I have not found how to set the row class' size through predefined classes so I've made it 1rem with inline style to make the horizontal space between two buttons equal to vertical space between the form's elements with mb-3 class applied.
There is also inline style white-space: nowrap for the button tag to prevent its height growing instead of putting the long texted button to the next line.
I've used the first example from the Bootstrap's Grid system except the outer div with the container class as it prevents achieving my goal.
My code still appear to me as an overproduced and incorrect one so I can't accept this answer as the answer.
The correct solution is still highly appreciated.
I am trying to take the Bootstrap justified grouped buttons style and create divs that will appear like grouped buttons will be just result in non-link divs. I am using it as a "steps" representation, so button one would be highlighted with text symbolizing that we're on step 1, or button two would highlight when you're on step 2. Please see my attached image here for an example.
The buttons I screenshotted work wonderfully as stage indicators, but I don't want users to be confused and think they should be linking to something. I've tried replacing the button input with spans as follows:
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<span class="btn btn-default">Q&A</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-info">Proposal Submissions</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-default">Best & Final Offers</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-default">Final Selection</span>
</div>
</div>
I don't know if this is even the way I should be going about this, or if there's a standard way to do this with divs. I also tried using divs with the btn classes instead of buttons or spans, same result, it still becomes a link. I am happy to keep using the button classes so long as I can remove the link effect when a cursor is hovered over it.
Thanks for your help.
I would suggest you to see if bootstrap has a component like breadcrumb, because that makes more sense for your use case. But if you want to hack something quickly, you can override btn classes. You could give the parent a class like c-steps and then override the styles for the btn groups:
html
<div class="btn-group btn-group-justified c-steps" role="group">...
css
.c-steps .btn-group,
.c-steps .btn.btn {
text-decoration: none;
/* other override styles */
}
I have a link that looks like a button that needs to be at the center of the page horizontally.
This is the link:
Return to Top
I have tried:
style = "margin: 0 auto"
style = "text-align: center"
class="btn btn-info btn-xs center-block"
Nothing works. Is it because my ui-view is set like so this?
<div class="col-md-10 col-md-offset-1">
<ui-view></ui-view>
</div>
What should I do?
You can just wrap your button inside a div and add the text-center class to the div as follows:
<div class="text-center">
Return to Top
</div>
axc, Hi there. Along the line of what Imgonzalves has said.
You need to give some width to center something within.
Have a look at this Fiddle.
The top block you will see the button is centered.
Using the Bootstrap class text-center which is placed in the parent and then it will center all text within that div and ones within.
The parent has width because it uses the class col-md-10.
The second orange block in this demo shows you what you were trying to do.
Hope this shows you that you need to give a div some width to center the button within.
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
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;
}