I am trying to figure out how to do something with a Bootstrap 5 button. I would like to be able to have the text label of the button left-justified and the FontAwesome icon right-justified. If I use a fixed-width button, how do I make sure it scales according to screen size along with all of the other content?
Here's my button now, but the icon is on the wrong side, and nothing is justified:
<button type="button" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="fa fa-angle-right"></i></span>
Learn More
</button>
Thank you in advance for your help, everyone!
Here you go...
button {
min-width: 20vw;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between">
<div class="col-10">Learn More</div>
<div class="col-2"><i class="fa fa-angle-right"></i></div>
</button>
Related
I have an incomprehensible problem in our web application. I have reduced the page to a minimum, here it is:
https://www.aschemeier.net/bug1.html
Everything works fine on the desktop. When I test the page either in the Firefox browser (screen size set to iPhone) or on an Android smartphone (Chrome browser), display errors occur when I open the drop-down menu at the bottom. In the mobile emulation on the desktop the touch input is registered after a few clicks about 200px further up, on the smartphone the picture jumps up and you can't scroll down anymore. If I reduce the height of the red framed container it works from a certain limit. If I don't open the menu to the left (dropleft) there are no problems either, but I need this function at this point.
I hope someone can help me. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Alle globalen, externen Javascript Dateien -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>bug sample</title>
</head>
<body>
<div class="container mb-5 mt-4">
<div class="card">
<div class="card-body" style="height:1000px; border:2px solid #f00;"></div>
</div>
<div class="mt-4">
<div class="row">
<div class="col-md-1 col-4">AB</div>
<div class="col-md-2 col-4">AB</div>
<div class="col-md-1 col-4">
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I would handle it by assigning an expander class into the parent row and toggle expander class on each button click.
Sample CSS:
.expanded-row {
min-height:30vh;
}
Toggling the class:
$( ".dropdown-toggle" ).click(function() {
$( ".row" ).toggleClass( "expanded-row" );
});
I hope it helps.
I am very new to CSS responsive layouts and need help structuring my navbar. I am aware that there are many other similar SO Q&As, but none of them give me the desired output.
I tried using the suggestion from this SO question, but instead of the buttons resizing, a scrollable scrollbar appears upon window resize which is not what I want.
Here's what my HTML code looks like at the moment:
.nowrap{white-space: nowrap;}
.column2 {
float: left;
width: 33%;
text-align: center;
overflow:auto;
}
.column3 {
float: center;
width: 33%;
text-align: right;
}
.column4 {
float: right;
width: 33%;
text-align: right;
overflow:auto;
}
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://bootswatch.com/4/united/bootstrap.min.css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="row">
<div class="container">
<div class="column2"><h4 >Welcome back <span>Example</span></h4></div>
<div class="column3">
<h1 style="font-size:2.5vw;" title='About'>Example<span class="text-primary">TEXT</span>Example</h1>
</div>
<div class="column4" >
<div class="col-md-6 col-md-offset-3 responsive nowrap">
<button type="button" class="btn btn-danger btn-responsive">Search</button>
<button type="button" class="btn btn-primary btn-responsive" id="logoutButton " >Logout</button>
<button type="button" class="btn btn-primary btn-responsive" data-toggle="modal" data-target="#loginModal" >Login</button>
</div>
</div>
</div>
</nav>
Summary of button requirements:
The three buttons in the same row
Buttons responsively get smaller without the need to scroll.
The content in the three <div> tags don't overlap
Please do take into consideration that I am very new to CSS styling and so would appreciate all the constructive feedback!
You can use bootstrap 3 classes. Is that close to what you try to achieve?
(Edit snippet per comments:)
.nowrap{white-space: nowrap;}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-4 text-left"><h4 >Welcome back <span>Example</span></h4></div>
<div class="col-xs-2 col-sm-4 text-center">
<h1 style="font-size:2.5vw;" onclick="about()" title='About'>Example<span class="text-primary">TEXT</span>Example</h1>
</div>
<div class="col-xs-7 col-sm-4 text-right">
<div>
<button type="button" class="btn btn-danger btn-responsive" onclick="search()" >Search</button>
<button type="button" class="btn btn-primary btn-responsive" id="logoutButton " >Logout</button>
<button type="button" class="btn btn-primary btn-responsive" data-toggle="modal" data-target="#loginModal" >Login</button>
</div>
</div>
</div>
</div>
</nav>
There are tons of button styling questions out there, but I can not find the one for my case, if you see one please link me to it.
What I want:
All buttons should be distributed across the whole available width
As soon as there is an overflow, the text should be hidden and only the symbol shown instead
Linebreaks should never occur - if space is getting too small even with only symbols left, the overflowing buttons should be hidden
I'm using bootstrap 3.
First my buttons look like this:
...and when I make my browser window a bit smaller, like this:
Instead of doing line breaks, I want the buttons to become more narrow.
But since cut-off text would look bad, it should be hidden, only leaving a symbol.
This should also work with 3 buttons, which is currently as mess as well:
Here's my example, the parent has a certain width, which I simulated by setting it to 75%. The problem is, that the buttons are line breaking now. And I also don't know how to make the text disappear on overflow using only less and css.
.fixed-footer {
width: 75%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="fixed-footer">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default"><i class="fa fa-plus"></i> Neues Projekt</button>
</div>
<div class="btn-group">
<a class="btn btn-success" href=""><i class="fa fa-upload"></i> Projekte exportieren</a>
</div>
<div class="btn-group">
<button class="btn btn-default"><i class="fa fa-edit"></i> Bearbeiten</button>
</div>
</div>
</div>
Here is my solution
Make the button parent flex-container.
Then give flex:1 to each button, this will make them flexible and also u will be able to add more buttons.
Then using the #media(max-width:400px) rule, hide the text below 400px
Add this to your css
.b-container {
display: flex;
}
.b-container .btn {
flex: 1
}
#media(max-width:400px) {
.b-container .text {
display: none;
}
}
.fixed-footer {
width: 75%;
}
.b-container {
display: flex;
}
.b-container .btn {
flex: 1
}
#media(max-width:400px) {
.b-container .text {
display: none;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="fixed-footer">
<div class="btn-toolbar b-container">
<button class="btn btn-default"><i class="fa fa-plus"></i> <span class="text"> Neues Projekt </span>
</button>
<a class="btn btn-success" href=""><i class="fa fa-upload"></i> <span class="text">Projekte exportieren </span>
</a>
<button class="btn btn-default"><i class="fa fa-edit"></i><span class="text"> Bearbeiten</span>
</button>
</div>
</div>
You can add span tag around button text.
Here I have added span with class btn__txt
then hide it in small screen using media queries
.fixed-footer {
width: 75%;
}
#media only screen and (max-width: 768px) {
.btn .btn__txt{
display:none;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="fixed-footer">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default"><i class="fa fa-plus"></i><span class="btn__txt"> Neues Projekt</span></button>
</div>
<div class="btn-group">
<a class="btn btn-success" href=""><i class="fa fa-upload"></i><span class="btn__txt"> Projekte exportieren</span></a>
</div>
<div class="btn-group">
<button class="btn btn-default"><i class="fa fa-edit"></i> <span class="btn__txt">Bearbeiten</span></button>
</div>
</div>
</div>
I have properly linked the online bootstrap style sheet in html, but when I open the link, the 'Click here!' doesn't come in a button. How do I solve this?
Here's my code:
using btn-primary
This is the output:
No button there
To get the button, the <button> tag is used. And type is set on the basis of necessary like button, submit.
<div class="container">
<button type="button" class="btn btn-primary">Primary Button</button>
</div
For further detail, you can visit to https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
set button not div
<button type="button" class="btn btn-primary">Primary</button>
see here:https://getbootstrap.com/docs/4.0/components/buttons/
BUT IT WORK WITH DIV check if you have bootstrap script
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="btn btn-primary">Primary</div>
</div>
It should work with a div as well as button or anchor tag just try.
<div class="btn btn-primary">Primaray</div>
OR
<button type="button" class="btn btn-primary">Primary</button>
OR
Primary
I have this .card-footer:
<div class="card-footer">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>
The buttons .toleft and .toright are in the correct position, however the button #more should be exactly on the center of the footer, but it is still on the left.
Any ideas?
Bootstrap 3
You can use the following solution adding .text-center to the .card-footer container:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-footer text-center">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>
Bootstrap 4.0+
On Bootstrap 4.0+ there is no class .pull-left or .pull-right anymore. You have to use .float-left and .float-right instead. You can also use .text-center to center the second button.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="card-footer text-center">
<button class="btn btn-dark float-left" type="button" id="toleft"><</button>
<button class="btn btn-dark" type="button" id="more">+</button>
<button class="btn btn-dark float-right" type="button" id="toright">></button>
</div>
Note: I don't recommend to use custom CSS rules. Bootstrap is a CSS Framework to provide solutions for many design problems. Overwriting CSS properties on components can cause problems.
If you're seeing this in 2018 or beyond, please note that some of these old answers will not work with Bootstrap 4...
However, there is no need to include additional CSS as a couple of the previous answers suggest.
The pull-left and pull-right classes no longer work in Bootstrap 4.
Instead, we now use float-left and float-right to float our left and right buttons.
The easiest way to achieve the desired effect would be to start by centering the footer contents by adding the text-center class to the footer.
Next, we can float the left button with the float-left class and float the right button with the float-right class.
Here's the final HTML:
<div class="card-footer text-center">
<button class="btn btn-theme float-left" type="button" id="toleft">left</button>
<button class="btn btn-theme" type="button" id="more">center</button>
<button class="btn btn-theme float-right" type="button" id="toright">right</button>
</div>
Which gives us the following result:
Just tried this with the latest alpha6 build of Bootstrap 4 (I'm assuming you're using BS4 as you mentioned the card component), and it looks as though the default behaviour is to align buttons in card footers to the middle anyway.
Note that I also had to introduce the .pull-left / .pull-right utility classes, as these no longer appear to be defined in the Bootstrap CSS.
See demo below:
.pull-left {
float: left;
}
.pull-right {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
<div class="card-footer text-muted">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button> </div>
</div>
Try This :
.card-footer{
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="card-footer">
<button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
<button class="btn btn-theme" type="button" id="more">+</button>
<button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>