I have a header with three sections, left, middle and right. I cant seem to come up with the proper css to make the column on the right (with 'email history' and 'back to list') float to the right side of the column. How can anyone tell me how this is done? Any help is appreciated.
<div class="col-sm-5" style="text-align:left">
<button type="submit" class="btn btn-primary btn-lg navbar-btn">Save Contact</button>
</div>
<div class="col-sm-2" style="text-align:center">
<h2 class="branding">Edit Contact</h2>
</div>
<div class="col-sm-5">
<ul class="nav nav-pills">
<li class="active">Email History</li>
<li class="active">Back To List</li>
</ul>
</div>
NOTE: The answer below is valid for Bootstrap 2 and 3; in Bootstrap 4 the equivalent class is float-right, and viewport-specific float classes are also available.
The easiest option is to add the class pull-right to the ul element. This will float the pills to the right.
Sidenote: you can replace those inline styles with the helper classes text-left (which is often redundant) and text-center.
Here's a bootply example: http://www.bootply.com/134139
Need to overwrite some Bootstrap styling...
You'll need to remove the float on the list items and set it to display:inline-block. Then for the unordered-list element, add text-align:left.
Here's the CSS:
ul.nav.nav-pills {
text-align: right;
}
.nav-pills>li {
float: none;
display: inline-block;
}
Enjoy!
Try a style="float:left;" on each div. And a <ul class="nav nav-pills" style="float:right;">. After that clear the float.
Related
I am creating a list and styling it with Bootstrap. The HTML looks something like this:
<div class="list-group">
Name
Name
</div>
When this displays, the list elements take up the whole page.
If not for the coloring, this would not be a big deal. How can I make the list elements stretch only as far as the text? Thanks!
try adding style display:inline-block to the .list-group
.list-group{
display:inline-block;
}
<div class="list-group">
Name
Name
</div>
You can use display:inline or display:inline-block property to get it
.somethingClass > .list-group {
display:inline-block; /* You can use inline also */
}
HTML PART
<div class="somethingClass">
<div class="list-group">
Name
Name
</div>
</div>
When you are using somethingClass > list-group it will effect only list-group when it will come inside the somethingCalss so bootstrap list-group class is save with own propery which gives by bootstrap.
Bootstrap includes shorthand responsive margin and padding utility classes to modify an element’s appearance.
<li class="list-group-item p-0">Something in list.</li>
.p-0 { padding: 0 !important; }
See bootstrap documentation reference for bootstrap 4.0
As of Bootstrap 4.6, you can use the class d-inline-block to set the property display: inline-block directly:
<div class="list-group d-inline-block">
Name
Name
</div>
See Bootstrap's Documentation on setting the display property.
Use the Bootstrap grid system and enclose the list group as in example below.
<div class="col-12 col-md-6">
<ul class="list-group">
<li class="list-group-item">one.</li>
<li class="list-group-item">two.</li>
<li class="list-group-item">three.</li>
</ul>
</div>
How can I put this button inline to be responsive?
had tried doing but doesnt work.
<div class="form-group btn-group" >
<ul class="btn-group list-inline social " style="display: flex;">
<li class="col-xs-12">
<button type="submit" class="btn btn-default" name="btn-login" id="btn-login">
<span class="glyphicon glyphicon-log-in"></span> Sign In
</button>
</li>
<li class="col-xs-12">
Sign in with Facebook
</li>
<li class="col-xs-12">
Sign UP Here
</li>
</ul>
</div>
You've placed style="display: flex;" on your ul. By default flex containers do not wrap. If you want it to wrap, you need to add
flex-wrap:wrap;
...to it.
Or, if you only want it to apply on some screen widths, move that declaration in a CSS file, where you'll be able to use #media queries.
Not being able to add responsiveness rules to it is one of the main reasons inline style is considered very bad practice (the other is because it's hard to maintain).
You better use #media queries. Set the #media query based on your target screen. Your button's text is too lengthy as well so it would be best if you display your lists by block to prevent overlapping the screen size.
Mobile View:
#media all and (max-width: 479px) {
ul.btn-group {
display: block;
}
ul.btn-group li {
display: block;
}
}
I would remove the style="display: flex;" from you ultag. Without it the two buttons will be full width (they have the col-xs-12 class).
To have them in one line in case the modal is displayed larger on larger screens you can add an additional class like col-sm-6 or col-md-6 to both.
I'm tring to make a little toolbar right next to a header. So I thought list-inline ought to work pretty well. And it works, but the alignment is off and I can't seem to figure it out.
<ul class="list-inline">
<li><h3>Editor</h3> </li>
<li><div class="btn-toolbar editor toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">other</button>
</div>
</div>
</li>
</ul>
http://jsfiddle.net/yhaJG/1/
The following CSS might be what you're looking for. Hard to tell exactly what you want from the question though.
.list-inline { margin-top: 5px; }
.list-inline li { vertical-align: top; }
.list-inline h3 { margin-top: 6px }
Just adjust the margin-top values as needed.
JSFiddle: http://jsfiddle.net/yhaJG/7/
Also, you might want to add another class to the ul element and apply the styles to that. You can still leave list-inline on the ul element, but that way these styles won't be applied to every list-inline since there may be other uses for inline lists on your site.
I'm using the Bootstrap framework and I've created a column in which I've used text-align:center; css property on two elements and there are not aligned the same and I don't understand why.
Here's the markup:
<div class="row text-center">
<div class="col-lg-4">
<div class="thumbnail-header">
<h1>Brand</h1>
</div>
<div class="thumbnail-content">
<ul>
<li>Identity</li>
<li>Strategy Brand</li>
<li>Identity Manual</li>
<li>Guide Brand</li>
</ul>
</div>
</div>
'text-center' class has text-align:center; css property.
And here is a working fiddle: fiddle
Can someone explain me why those elements are not aligned properly ?
It's the default left padding on the <ul>
ul {
padding-left: 0;
}
Updated fiddle
I suggest instead of using .text-center Helper class use the .center-block for centering an element in bootstrap because this helper class use margin and display css properties for cenetering the element
What I'm trying to do is have the search box in the center of the navbar (image here). How would I do that?
HTML:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">logo</a>
<div class="nav-collapse collapse">
<form class="navbar-form pull-right">
<div class="input-append">
<input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
<button class="btn" type="button">Search</button>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
I'm using the default CSS that comes with Bootstrap.
wrap the form element within its own div and give it a class or an id, then create a custom line of code to center it, example:
HTML:
<div id="search">
*form code here*
</div>
CSS:
#search { width: 200px; margin: auto; }
if you need to override built in CSS in an application, use !important like so:
<div style="margin: 0px auto !important;"></div>
Or, put it in your css class.
See this...
.nav-collapse{
margin-right: 50%;
}
Example
Struggled with this for a long time too, for Bootstrap 3.
I finally found this solution which worked perfectly for me:
Bootstrap NavBar with left, center and right aligned items
Just added a class to the inside my navbar around my search box, with the css definition in Skelly's answer.
I did then have to apply text-align:left to some of elements in my form (e.g. typeahead suggestions attached to my search form).