The main question is, is there a way to add a space between the html div's generated by a .pug file?
I have been converting a collogues HTML into Pugs format, and everything transitioned fine except for one small piece. A group of buttons, lost all spacing between each.
After a lot of examining of both the original HTML and the generated HTML, I had noticed the only main difference was spacing between each button element. So I tried manually changing it so they had the spaces. Lo and behold the margins showed up.
While this sounds like it is really unexpected behavior or a bug from Bootstrap's side of things to me, I'm hoping there is a work around that lets me add the spaces to the pug file.
Here is the origional HTML:
<div class="my-3 text-center" role="group">
<button class="btn btn-primary" id="saveBtn" type="button" disabled="">Save</button>
<button class="btn btn-danger" id="undoChangesBtn" type="button" disabled="">Undo Changes</button>
<button class="btn btn-secondary" id="viewSignPage" type="button">View Sign Page</button>
<button class="btn btn-secondary" id="viewDataPage" type="button">View Data Page</button>
</div>
Here is the pug I created from it:
.my-3.text-center(role="group")
button.btn.btn-primary#saveBtn(type="button" disabled) Save
button.btn.btn-danger#undoChangesBtn(type="button" disabled) Undo Changes
button.btn.btn-secondary#viewSignPage(type="button") View Sign Page
button.btn.btn-secondary#viewDataPage(type="button") View Data Page
The HTML it generates that has an issue:
<div class="my-3 text-center" role="group"><button class="btn btn-primary" id="saveBtn" type="button" disabled="">Save</button><button class="btn btn-danger" id="undoChangesBtn" type="button" disabled="">Undo Changes</button><button class="btn btn-secondary" id="viewSignPage" type="button">View Sign Page </button><button class="btn btn-secondary" id="viewDataPage" type="button">View Data Page</button></div>
Turns out there is a simple fix. You just need to add a margin class to each button. Here is an example of how the buttons are now formatted in pug
button.btn.btn-primary.m-1#saveBtn(type="button" disabled) Save
i have a ng-repeat with some forms. Each form has a button - Edit Profile which needs to redirect the user to /userProfile with $stateParam(userId).
This is my code:
<button type="button" class="btn btn-grey btn-ripple">Edit profile</button>
I tried the follows with no success:
Edit profile
- Works fine but the css doesn't work perfectly on <a> tag
I tried to include the <button> tag into the <a> one , doesn't work.
I want to make in HTML, no javascript . I tried with form tag and action=url, doesn't work, he tries to acces an "http:\\"url.
Any suggestions?
Thanks
Assuming you are using AngularJS, you can do:
<button type="button" ng-click="location.assign('/userProfile?userId=' + staff.UserId)" class="btn btn-grey btn-ripple">Edit profile</button>
So i tried this :
<a href="/userProfile?userId={{staff.UserId}}">
<button type="button" class="btn btn-grey btn-ripple" >Edit profile</button>
</a>
Works perfectly :)
How would one put a link on a button with bootstrap?
there are 4 methods in the bootstrap documentation:
Link Button
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
The first one doesn't work for me, no button shows, just the text with the link, have a feeling its the theme im using.
The second one shows the button which is what i want, but whats the code make the button link to another page when clicked?
Cheers
The easiest solution is the first one of your examples:
Link Button
The reason it's not working for you is most likely, as you say, a problem in the theme you're using. There is no reason to resort to bloated extra markup or inline Javascript for this.
If you don't really need the button element, just move the classes to a regular link:
<div class="btn-group">
<a href="/save/1" class="btn btn-primary active">
<i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
</a>
Cancel
</div>
Conversely, you can also change a button to appear like a link:
<button type="button" class="btn btn-link">Link</button>
You can call a function on click event of button.
<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">
<script>
function relocate_home()
{
location.href = "www.yoursite.com";
}
</script>
OR
Use this Code
Link Button
Another trick to get the link color working correctly inside the <button> markup
<button type="button" class="btn btn-outline-success and-all-other-classes">
Button text with correct colors
</button>
Please keep in mind that in bs4 beta e.g. btn-primary-outline changed to btn-outline-primary
This is how I solved
<a href="#" >
<button type="button" class="btn btn-info">Button Text</button>
</a>
Combining the above answers i find a simply solution that probably will help you too:
<button type="submit" onclick="location.href = 'your_link';">Login</button>
by just adding inline JS code you can transform a button in a link and keeping his design.
You can just simply add the following code;
<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>
Just use the anchor tag as a button. Change the role to type as below in bootstrap 5.
<a type="button" class="btn btn-info" href="#">Button</a>
I think the most easiest and clean approach is (without any extra javascript functions):
<a class="btn" href="#">
<i class="fas fa-cloud"></i>
</a>
To use fontawesome icons, you can just put the following link in your header:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
And that's all
As you are asking with Bootstrap, the best option in my opinion is to choose the class btn-link.
<button type="button" class="btn btn-link">Link</button>
If you want the btn-link to send you to another page or activate something such as a modal, you can include the onClick like others suggested.
If you really need the button element, a nice trick that I found to make it work looks like this:
Create a data attribute with the url that you want to redirect
Attach an event listener to fetch the url from the data attribute on element
Open the url using window.open or your preferred method
Html file
<button type="button" id="newpagebutton" class="btn btn-primary mt-4 ml-3">Open new page</button>
Javascript file
$( "#newpagebutton" ).attr('data-buttonlink', 'https://www.apple.com')
$( "#newpagebutton" ).click(function() {
const buttonlink = $("#newpagebutton").data('buttonlink')
window.open(buttonlink)
});
Have a look at how the implementation works on fiddle.js
<div>
<a href='#' className='text-decoration-none'>
<button className="btn btn-primary btn-lg px-5 d-flex justify-content-center" type='submit'>Sign In</button>
</a>
</div>
I am converting my bootstrap 2 site to bootstrap 3 and am a bit stuck on a particular control which is several sets of tab pages controlled by toggle buttons.
Here is an example of my working bs2 code:
http://bootply.com/97187
If I run this code in bs3, I get this:
http://bootply.com/97189
The problem as you will see is that the buttons no longer behave like a group of radio buttons. They toggle individually.
I am currently here:
http://bootply.com/97184
This looks like it works but it doesn't. The grey colour you get when you click on a button is in fact, the "I've now got the focus" colour. Click somewhere else and it goes back to white.
I really need the buttons to toggle as they did in bs2. What small thing am I neglecting here?
Your problem is in here:
<div class="well well-sm">
<span>Set A:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default active" href="#tab1" data-toggle="tab">1</button>
<button class="btn btn-sm btn-default" href="#tab2" data-toggle="tab">2</button>
</div>
<span> Set B:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default" href="#tabA" data-toggle="tab">A</button>
<button class="btn btn-sm btn-default" href="#tabB" data-toggle="tab">B</button>
<button class="btn btn-sm btn-default" href="#tabC" data-toggle="tab">C</button>
</div>
</div>
Adding the class active to the button class for tab1 seemed to prevent the buttons from toggling as you want them to. Simply removing the active class seems to fix the problem.
Demo: http://bootply.com/97199
Ok, I've been playing around quite a bit and got to an acceptable solution.
Unlike the Bootstrap 2 version, it requires a bit of JavaScript.
Here it is: http://bootply.com/97426
The only thing it doesn't do is group the button groups into a single component but this is acceptable, unless someone can find a way to do this as well.
Would be nicer if Bootstrap just worked the same way as V2 in this case.
I have created a button using
<button type="button" class="btn btn-success btn-lg ">Register</button>
How could I give a link to another page when the button is pressed?
Use a anchor instead, and you can still style it as a button..
Register
Bootply: http://www.bootply.com/99320