I'm having a problem in chrome
see http://jsfiddle.net/qLenP/
if you resize the window in chrome the button text is getting cut but in firefox its overflowing.
is there any way to get it working like same in both the browsers.
see the screen shot for more details
<div class="row-fluid">
<div class="span12">
<button type="button" class="btn span3 btn-large btn-primary">LargebuttonLargebutton</button>
<button type="button" class="btn span3 btn-large">LargebuttonLargebutton</button>
</div>
</div>
Have you tried simply adding:
button{
overflow:hidden;
}
This looks OK to me in FF
If you want to target specific Bootstrap classes, you can refine the selector accordingly.
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'm using the Angular UI modal and would like to make it smaller. According to Bootstrap's website, to make the modal smaller I should use the modal-sm modifier class:
<div class="modal-dialog modal-sm">
I'm having trouble incorporating this div into my Angular modal template. Every Angular UI modal example I have found includes only the modal-header, modal-body, and modal-footer divs in the template. Are the outer modal, modal-dialog, and modal-content divs already provided by Angular? If so, is there any way to overwrite them so that I can apply "modal-sm" to the modal-dialog div? I tried adding the full modal div structure to the template and it caused problems with my modal. I also tried setting windowClass = "modal-dialog modal-sm" in my controller but that didn't work either. Any ideas? Thanks.
Update: here is the content of my modal template after I tried to include the outer Bootstrap div's. It is a very simple modal to confirm the user wants to delete an item.
<div class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4>Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="confirm()">Confirm</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
The result is it doesn't show my modal correctly. I can see the backdrop and a very tiny sliver of what I assume to be my modal.
Update: Using #lmyers's solution worked for me, but instead of specifying the width as 60% I did the following to make use of the #modal-sm Less variable.
.confirm-modal .modal-dialog {
width: #modal-sm;
}
OK, I understand now. Here's what we did in the .css:
.appcustom-modal-med > .modal-dialog {
width: 60%;
}
then in the controller:
windowClass: 'appcustom-modal-med'
Is there an easy way to add some margin between the twitter bootstrap btn-group-vertical buttons, and to make them all have rounded corners?
My first attempt was to just add some margin between them, using css, but then I saw that, except for the first and last one, none of them had rounded corners, so instead of "playing on", I hope there is a "decent" way to accomplish this...
I think this is the easiest way to do that.
CSS
.btn-group-vertical > button{
margin-bottom:10px;
border-radius:10px !important;
}
Working Demo
With Bootstrap 5.1 you can now use the gap utilities to achieve this:
https://getbootstrap.com/docs/5.1/utilities/spacing/#gap
<div class="btn-group-vertical gap-3">
<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button>
</div>
I'm pretty stuck on this problem that I'm having getting Bootstrap modals to pop up. Here's an example:
http://jsfiddle.net/xaU5d/
<div class="container">
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">
Launch demo modal</a></p>
</div>
And pulling the css from:
//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css
Essentially, the when the button is pressed, the modal tries to load (the style changes to the body happen which causes it to dim), but the tags containing the modal content never get rendered.
I believe this is a CSS problem at heart. When you remove the css and rerun, the styles go away, of course, but clicking on the anchor actually causes the change to happen.
I have to assume it's something that I'm doing, so could anyone look at the jsfiddle example and let me know where my error is?
Thanks in advance!
Not a full answer, but adding modal-content to your `div id="example`` allows the modal to run, but not on the correct layer.
Bootstrap 3 changed how they load modals a bit:
Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior.