On this page: (link removed)
I'm starting to build a tumblr theme, and I have decided to build it using bootstrap. If you click the little I info button in the left corner, a div comes down with a user picture and description. The user picture and description appear as I want them to, but they are off center. I'd like them to be centered. I've tried < center >, using a fluid width container, etc with no avail. I also checked and bootstrap.css and the bootstrap.min.js are properly linked to the page.
Any help with this would be GREAT!
My code:
<div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">
<center>
<div class="container-fluid" style="height:auto;">
<div class="row">
<div class="col-md-2" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
<div class="col-xs-12 col-md-8" style="background-color:blue; margin-top:3%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>
<div class="container-fluid" style="height:auto; margin-bottom:2%;">
<center>
<div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
<br/>
<div class="btn-group" role="group" aria-label="..."> Ask
Archive
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div><!-- /.col-lg-6 --></center>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
{block:ifShowInfoButton}
<i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i>
{/block:ifShowInfoButton}
Change the col on the picture from md-2 to md-4.
Or change the col on the text from md-8 to md-10 (better)!
It works on a 12 grid system and currently it is only using 10 columns out of 12, which is why it appears to align to the left :)
You can also use offset.
papakia's answer is correct however you could also add an empty column in front of your image column that is col-md-2 this will sometimes help not throw off the scale of other items if they are already tuned to your liking.
Related
Background:The website I am working on there are several different filters that people can use in order to show only the data they need; basic stuff. To make things look nice since I am not css inclined, I am using bootstrap to make things look clean.
Problem: I can't seem to get the buttons to line up with the right side of the fields. I can make them pull to the very edge of the field set, I can make push/pull them to the general area they should be in, but I can't get them to line up nicely and stay that way regardless of how you rearrange the size of the page window.
JSFiddle: https://jsfiddle.net/v3cugpx1/1/
<div class="form-group col-md-12">
<div class="input-group-btn">
<div class="pull-right">
<a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
<button class="btn btn-primary" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
Any help would be greatly appreciated.
Cheers!
It's important to match the nesting of columns because of the gutters in the grid, which the other answers remark upon. If you start with the other two answers, it's easy enough to modify them to add the margin between the buttons you're looking for:
<div class="form-group col-md-12">
<div class="col-md-12">
<div class="btn-toolbar col-md-12">
<a class="btn btn-info pull-right" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
<button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
The only really real addition is the btn-toolbar class to the inner-most div. And for posterity here's the Fiddle.
Don't use .input-group instead use col-sm-* classes to give extra padding multiple times, so that you can match the padding available on all other form elements. And then arrange the buttons inside of it, like:
<div class="form-group col-md-12"> <!-- Extra Padding (15px) -->
<div class="col-xs-12"> <!-- Extra Padding (15px) -->
<div class="col-xs-12"> <!-- Extra Padding (15px) -->
<a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left pull-left"></i> Clear</a>
<button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
Have a look at the updated Fiddle.
Hope this helps!
You are using wrapper cols for the inputs. I included one "col-md-12" before the button's "form-group" and another one after it. This way your code stay consistent and you achieve what you want.
<div class="col-md-12"> <----
<div class="form-group col-md-12">
<div class="col-md-12"> <----
<div class="input-group-btn">
Updated Fiddle
I'm creating a query form using bootstrap's 12 column grid system (version 3). The layout consists of dropdown menu where a user can select an item.
The Problem:
When a user selects a value from the dropdown menu, the element overflows into the next column. Is there a recommended solution for correcting this?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-4">
<input type="text" />
</div>
<div class="col-md-3">
<div class="btn-group" uib-dropdown>
<button id="btn-append-to-body" type="button" class="btn btn-secondary" uib-dropdown-toggle="">
{{importTGModal.paramCondition1_selected}}
<span class="caret">
</span>
</button>
<ul class="dropdown-menu" ng-click="importTGModal.setParamCondition1($event)" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem" ng-repeat="condition in importTGModal.paramConditions1">
<a data-value={{condition}}>{{condition}}
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<input type="text" />
</div>
</div>
That's because the dropdown is larger than the container column.
Try one of the following:
1- (Recommended) Put the dropdown and the input text in same column
2- Make the column of the dropdown bigger. Like col-md-6
3- (Not Recommended) Bootstrap class .btn adds white-space: nowrap;. Set it to white-spsace: normal for this button, so if the button has long text (bigger than the column) the text will break to next line. Like so:
<button id="btn-append-to-body" type="button" class="btn btn-secondary" uib-dropdown-toggle="" style="white-space: normal;">
Im working on a section on a webpage, using bootstrap but cant keep filter on same line. Ive tried a few ways, currently trying columns, tried divs inline, still not lining up correctly.
div class="col-lg-12">
<div class="row">
<div class="col-lg-10">
<div class="rev-search" style="overflow: hidden; padding-right:.5em;" >
<input type="text" style="width: 80%;" id="rev-search" placeholder="Search" autofocus="" />
<span><i class="fa fa-search"></i></span>
</div>
</div>
<div class="col-lg-2">
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-toggle" style="float: right;" type="button" id="group_filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><?php echo $text_filter_group;?><span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="group_filter">
<?php
foreach ($customer_groups as $group){
echo '<li>'.$group['name'].'</li>';
}
?>
</ul>
</div>
</div>
</div>
I believe it's because there is padding on the col-lg-10 and col-lg-2. Add this to your css to remove the padding which is pushing your drop down to the next row.
.col-lg-10, .col-lg-2 {
padding: 0;
}
Following the Bootstrap documentation, please use lg (for larger desktops).
Also try wrapping your row in a fluid container.
<div class="container-fluid">
<div class="row">
</div>
</div>
I am working with a legacy bootstrap tool for my company. An issue I am having is using panels from bootstrap 3 in the legacy version.
While this is working to an extent, there are some span issues that are coming up.
I have a container with a panel on the page which is inside of a span12 (full length of the page). Within the panel, I am trying to add another panel that is full width of it. Normally I would say, span12 and it would adjust it to what is necessary but in this case, its causing it to hang over.
Here is a sample of the HTML being used:
<div id="main" class="container">
<div class="panel panel-primary custom-panel">
<div class="panel-heading ph"> <span class="panel-title"><i class="icon-bullhorn"></i> Request Communication</span><button name="addComment" commenttype="request" type="button" class="btn btn-mini pull-right"><i class="icon-plus"></i> Add Comment</button></div>
<div class="panel-body well">
<div id="requestComments" class="tab-pane active">
<span name="messages">
<div name="parent_32" class="row parentMessage">
<div class="span12">
<div class="panel panel-default">
<div class="panel-heading">
<small><a target="_BLANK" href="#">Name</a> <span class="text-muted">commented <a title="Timestamp: 2015-08-24 11:20 UTC" data-toggle="tooltip" class="deco-none">2 days ago</a></span></small>
<div class="btn-group pull-right">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-mini dropdown-toggle" type="button"><i class="icon-cog"></i></button>
<ul class="dropdown-menu">
<li><a messageid="32" name="deleteParent"><i class="icon-trash"></i> Delete Message</a></li>
</ul>
</div>
</div>
<div class="panel-body"><small>dgdfgdfg</small></div>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/j2j6gnb1/
How can I go about making the inner panel, the full width of its parent (with the same padding it has on the left)?
Remove the margins being set on elements .parentMessage and .span and set width: 100% on the .span12 element.
.parentMessage {
margin: 0;
}
.span12 {
width: 100%;
margin: 0;
}
Fiddle
I have two Bootstrap button dropdown menus. How to I prevent the menus from wrapping to two lines? I can control the width of the menus with span classes, but the code acts as if there's still more invisible input field which forces the next drop-down menu to the next line. The even more core problem is that these dropdown inputs force a fixed amount of space between them in the next element to their right, regardless of their actual width.
Ultimately, I want them to behave similarly to input buttons, which align right next to each other. See screenshot.
<div class="row-fluid">
<!--- BASIC INFO --->
<div class="span12 well" style="height: 160px; background-color:">
<input type="text" class="input-small" placeholder="Eye Color">
<input type="text" class="input-mini" placeholder="Hair">
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a>aa</a>
</li>
<li>
<a>aa</a>
</li>
<li>
<a>aa</a>
</li>
</ul>
</div>
<input class="span4" id="prependedDropdownButton" type="text" placeholder="Hair">
</div>
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a>mm</a>
</li>
<li>
<a>mm</a>
</li>
<li>
<a>mm</a>
</li>
</ul>
</div>
<input class="span4" id="prependedDropdownButton" type="text" placeholder="Hair">
</div>
</div>
</div>
After more reading on the Bootstrap documentation and testing I notice that those kind of dropdowns that you want to use suck, they are not responsive. I think you are better off using <select> dropdowns.
Demo
http://jsfiddle.net/sulfureous/X8hdg/
HTML
<div class="row-fluid">
<div class="well clearfix">
<div class="row-fluid">
<div class="span3">
<input type="text" class="span12" placeholder="Eye Color">
</div><!--.span3-->
<div class="span3">
<input type="text" class="span12" placeholder="Hair">
</div><!--.span3-->
<div class="span3">
<select class="span12">
<option>Hair</option>
<option>Black</option>
<option>Blonde</option>
</select>
</div><!--.span3-->
<div class="span3">
<select class="span12">
<option>Race</option>
<option>Race 01</option>
<option>Race 02</option>
</select>
</div><!--.span3-->
</div><!--.row-fluid-->
</div><!--.well .clearfix-->
</div><!--.row-fluid-->
So I guess this is an alternate solution, I cleaned up the code indentation, commenting and what not and divided the spans in a way that I feel would make sense for that kind of responsive menu.
Notice I added clearfix, removed the inline style and the height.
Let me know if this solution is what you expected, otherwise with the other kind of dropdown you want you use it's doable but you will need to hack quite a bit, if it was easy the guys at Twitter Bootstrap would have made that element responsive from the get go.
Cheers.