What's the correct way to get bootstrap button text to wrap? I'm trying to create big buttons with fontawesome icons in them:
<div class="col-sm-4">
<a role="button" class="btn btn-block btn-color" href="#">
<div><i class="fa fa-user fa-3x"></i></div>
<div>Text that needs to wrap to next line.</div>
</a>
</div>
Here's a fiddle.
You can add white-space: normal; to the .btn class.
More information about white-space:
w3schools.com
The CSS white-space Property Explained
Related
I'm using bootstrap 4 and I have a problem with navigation .nav .dropdown-menu and .text-truncate on mobile view when content text length is too long, it can't be ellipsis.
I have try set max-width 100% to .dropdown-menu so children element only expand maximum to parent width.
screenshot actualy happen
here the code
<nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-husr-navbar" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="collapse-husr-navbar" style="">
<ul class="navbar-nav" id="navbar-husr-right">
<div class="d-block d-sm-flex">
<div class="p-2 text-truncate">
<span class="d-inline">
<i class="fas fa-map-marker-alt"></i>
<small><span id="husr-branch-name">DUMMY BRANCH A</span></small>
</span>
</div>
</div>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">
<span class="d-inline d-sm-none d-md-inline d-lg-inline">Menu</span>
</a>
<!-- here the first I try to put max-width:100%; so children element can't push parent to expand, but not work. :( -->
<div class="dropdown-menu dropdown-menu-right show" style="max-width:100%">
<span class="dropdown-item-text text-nowrap" style="
">
<i class="fas fa-user"></i>
<span id="husr-user-name">Staff User</span>
(<em><span id="husr-user-type">STAFF</span></em>)
</span>
<!-- here the second I try to put max-width:100%; so children element can't push parent to expand, but also not work. :( -->
<span class="dropdown-item-text head-email" style="max-width:100%">
<!-- here the third time put max-width:100%; so children element can't push parent to expand, butthis also not work. :( -->
<div class="text-truncate" style="max-width:100%">
<i class="fas fa-envelope"></i>
<span id="husr-user-username">i_mean_it_to_be_ellipsis_text_truncated_but_container_div_still_expanded</span>
<!-- yeah the text has no space because it contain an email that should be nospace -->
</div>
</span>
</div>
</li>
</ul>
</div>
</nav>
screenshot expected
For text-overflow to work, you need a max-width but also overflow: hidden. You should be able to remove the text-truncate div and use this CSS:
.head-email {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
}
From the MDN documentation for text-overflow:
The text-overflow property doesn't force an overflow to occur. To make text overflow its container you have to set other CSS properties: overflow and white-space.
EDIT:
In your case bootstrap under 576px doesn't limit the size of the navbar itself. Adding a max-width: 100%; on your div with class navbar-collapse fixes smaller viewport sizes.
I have this code:
<div class="panel-heading clearfix">
<div class="col-md-11 left">
<button style="display: inline-block;" type="button" class="btn btn-success btn-circle"> <i class="fab fa-twitter"></i></button>
<h3 style="display: inline-block;" class="panel-title uppercased green"> Twitter</h3>
</div>
<div class="col-md-1">
<span class="clickable right"><i class="fa fa-2x fa-chevron-circle-up"></i></span>
</div>
</div>
I have a problem to center vertically col-md-1 and span with font-awesome chevron icon.
This is an image
This is beacuse the button inside the left div has a certain height that affects also the element on the right.
Just add a line-height equals to the height of the green button:
.clickable i {
line-height: 34px;
}
I also fixed your typo in icon class. There's an extra 'b' that causes the non-rendering of the twitter icon.
<i class="fa fa-twitter"></i>
I have updated the codepen.
I add a wrapper and background color, so you can easily see that now it's aligned correctly.
I have some jQuery mobile pages with header containing text and/or buttons. Sometimes there are centered text, others just crowded with buttons. There are several of screen sizes and/or number of buttons.
How do I duplicate this in Bootstrap collapsed navbar-header? I created this jsfiddle sample, but couldn't figure out how to center/justify text and buttons.
Jsfiddle Sample
<div class="navbar-header">
<!-- button left -->
<a type="button" class="navbar-toggle collapsed pull-left navbar-icon" data-toggle="collapse" data-target="#navbar">
<i class="fa fa-bars fa-2x"></i>
</a>
<!-- button right --->
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collapse">
<i class="fa fa-edit fa-2x"></i>
</a>
<!-- in the middle -->
<div style="text-align:center">
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
<i class="fa fa-reply fa-2x"></i>
</a>
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
<i class="fa fa-foward fa-2x"></i>
</a>
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
Some Text
</a>
</div>
</div>
<style>
body {
padding-top: 60px;
}
.navbar-header .navbar-icon {
line-height:30px;
height:30px;
border:0;
}
.navbar-header a.navbar-icon {
padding:0 0px;
}
</style>
The closest answer I can find is previous discussion. Tried the answers there, didn't work.
Any hint what I miss? Thanks
Update: Final version based on suggestions. Probably something to do with customized bootstrap, my local version looks a lot better than on jsfiddle.
The reason you are not able to center your icons is because they have a css property that is making them float right;
add a class to the icons for example 'no-float' then add this to your css
.no-float { float:none!important; }
that will make it work
So this
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
becomes this
<a class="no-float navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
You mean like this?
http://jsfiddle.net/aoyss2Lm/6/
I added the bootstrap class "text-only" inline to the <li>
I've managed to place a button group at the far side of a header (H1/H2/H3). However, I don't know how to make the button float vertically in the middle. It just stays at the top. I tried using margin-top but since it's a fixed value it won't be dynamically placed in the middle.
Here's the screenshot:
Here's the code:
<div class="container">
<section>
<div class="page-header">
<h1 class="pull-left">
The header
</h1>
<div class="pull-right">
<div class="btn-group">
<button class="btn btn-primary">
Actions
</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>
Action
</li>
<li>
Another Action
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
Contents
</section>
</div>
jsFiddle: http://jsfiddle.net/aurorius/PKrUC/
This how to get a button lined up with the header in Bootstrap 3.2, 3.3 without any additional CSS in case anyone is coming here from Google.
Option 1
http://jsfiddle.net/ypaL5nko/
<div class='page-header'>
<div class='btn-toolbar pull-right'>
<div class='btn-group'>
<button type='button' class='btn btn-primary'>Button Text</button>
</div>
</div>
<h2>Header Text</h2>
</div>
The button group is optional if you're only using a single button.
Option 2
http://jsfiddle.net/sLdnae3q/
<h1>
<span>Header Text</span>
<button class='btn btn-primary pull-right'>Button Text</button>
</h1>
<hr/>
Try this css code
.btn-group.my-class{
bottom: 15px;
position: relative;
top: 15px;
}
Dynamic header on H1/H2/H3 and may be H4
Demo: http://jsfiddle.net/PKrUC/2/
Using a float disables te display:inline-block; property, making it float to the top.
Just add the bootstrap class text-right to the container to keep the vertical align intact.
Problem
I want to be able to use btn group for twitter bootstrap and have the buttons show to the left of some text. Not sure if this is already available in twitter bootstrap or if I need to add some css.
What I Have
I currently have a btn-group defined with two buttons. I then have after the buttons a string of text.
<p>
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
String to display after buttons on same line
</p>
What I have tried
I have tried a few things here. I modified the <p> tag to be a <div class="row"> with two span divs one for the buttons and one for the text but this did not work. I also tried the following:
<div>
<div class="btn-group inline" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
<span class="inline">String to display after buttons on same line</span>
</div>
and defined in the css .inline {display:inline-block; zoom:1; *display: inline;} However this did not work either. This is what I am getting. As you can see the text is displaying below the button group. I want the text to the right of the button group.
Question
What can I do to get the button group to display to the right of the string? Is there something already built into twitter bootstrap for this, if so what? If not, was I on the right track of creating an inline class, if this is the case, why did it not work?
Update
Thank you RichardTowers for the suggestion on the pull-left class on the button group. However when adding more sets (which is needed) I get the following:
I assume that this is because of floating. Is this correct and how would I fix it?
Put pull-left on the buttons div: http://jsfiddle.net/dbTqC/653/
I think this just sets float: left, so you'll need to clear things below it. There's a clearfix class for this.
It's worth having a look at some CSS resources so that you understand what's happening here.
<p class="btn-toolbar">
<span class="btn-group">
Button 1
</span>
<span class="btn-group">
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</span>
<span class="btn-group">Text here.</span>
</p>
This works:
<p>Hello <span class="btn-group">...</span></p>
I did as suggested in this SO answer, so basically I started off of .navbar .brand style and adapted a little bit.
If interested, here is my changed style:
/* See .navbar .brand style in bootstrap.css for a reference */
.btn-toolbar .title {
display: block;
float: left;
margin-top: -4px; /* Recover part of margin set in child Header nodes */
margin-left: 10px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
}
HTML usage:
<div class="btn-toolbar">
<div class="btn-group pull-left">
<a class="btn" href="#/search">Search...</a>
</div>
<div class="title">
<h4>View offers</h4>
</div>
<div class="btn-group pull-right">
<a class="btn" href="#/batchDelete">Delete ...</a>
<a class="btn" href="#/new">New</a>
</div>
</div>
and end result: