Currently i have this setup on a page, there are three buttons in a button group acting as tab toggle buttons and below them is a bootsrap well having tab pages. Is there a way to have the button group become part of the well, so it sits in the center of the top edge of the well?
I have tried code from here: Bootstrap - Adding legend to well but didnt work.
Here is img of current setup
Code is simple
<div style="text-align:center">
<div id="tab" class="btn-group" data-toggle="buttons-radio">
<a style="padding:9px;font-size:16px" href="#tdel" class="btn active" data-toggle="tab">Delegations</a>
<a style="padding:9px;font-size:16px" href="#tind" class="btn " data-toggle="tab">Individuals</a>
<a style="padding:9px;font-size:16px" href="#tobs" class="btn " data-toggle="tab">Observers</a>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane" id="tind">
</div>
<div class="tab-pane" id="tobs">
</div>
<div class="tab-pane" id="tdel">
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/mikeyfreake/CbNfa/2/
Place the buttonset div inside the well div.
Fiddle for reference.
You can also margin-top: -15px; in your CSS sheet to further move it up to sit in the center top part of the well. Hope this helps!
Related
I'm using semantic-ui as my site ui framework, alongside angular 1.5.8.
What happens when the sidebar is visible is that the browser must hide nearly 50% of the card, within a ui cards dive, before the card responsively moves to a new row.
<body ng-controller="MainCtrl">
<div class="pushable">
<div class="ui left vertical inverted visible thin sidebar menu">
<a class="item">
Overview
</a>
<a class="item">
Upcoming
</a>
</div>
<div class="pusher">
<div style="margin: 20px;" class="ui cards">
<div class="card" ng-repeat="bill in bills">
<div class="content">
<div class="header">
{{bill.name}}
</div>
<div class="meta">
{{bill.biller}}
</div>
</div>
<div class="extra content">
<div class="ui two buttons">
<div class="ui basic green button">Edit</div>
<div class="ui basic red button">Delete</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If I remove the visible class from the sidebar div, then it works as expected. As soon as the browser window chrome gets close to the border of the card, the card wraps to a new row. What am I doing wrong? Do I have to manually account for the size of the sidebar myself? It doesn't seem like I would have to, considering the cards and sidebar are both semantic-ui components.
I've got a working plunker demonstrating this issue as well.
From http://semantic-ui.com/collections/menu.html
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
Add the container class to your to your cards div to make it responsive.
There are so many questions on this, but they all seem to just want one item on the left and one on the right, or a button group. All of those are straightforward.
How can I achieve similar to this bootply
but instead of two buttons in the group on the right, two other elements - two divs, or two h3 for example?
Whatever I try these 2 elements always end up vertically stacked and not horizontally aligned in the right side of the footer.
EDIT
#Harinder88 provided this solution which, as you can see, does do what I asked and so I have accepted as the answer as I think in the vast majority of use cases, this is what most people are trying to achieve.
However, you can see that if the text is too long for the column, it gets wrapped and now everything is not on a single line. But I accept that is the compromise of having a responsive design. It just so happens that in my actual use case, that last item cannot be allowed to wrap, so I just have to give it a fixed width to solve that. Thanks #Harinder88.
Now see this example i aligned 2 items horizontal in left and right with 2 methods u can use any 1 of them
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<div class="pull-right">
<div class="row">
<div class="col-md-6 col-xs-6">
<p>Left side with col</p>
</div>
<div class="col-md-6 col-xs-6">
<p> Right side with col</p>
</div>
</div>
</div>
<div class="pull-left">
<div class="pull-left">Left side with pull</div>
<div class="pull-right">Right side with pull</div>
</div>
</li>
</ul>
</div>
</div>
<div class="panel-body">Content here..</div>
</div>
<hr>
you can use pull-right for align div right and pull-left for align div on left side .
if you want to do further partition you can use use same things again.
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<div class="pull-right">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</div>
<div class="pull-left">
<h4>
Fotter (you can use anything here button code or link tag , you can remove hr tag and use anything you want )
</h4>
</div>
</li>
</ul>
</div>
</div>
<div class="panel-body">Content here..</div>
</div>
I managed to figure this out by replacing the button groups and the buttons with spans, then it works fine. Everything aligned on one line, 1 item pulled left and 2 pulled right.
<div class="panel-footer">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<span class="pull-right">
<span>Recording - Last updated at x</span>
<span class="trail-status">PUBLISHED</span>
</span>
<h5>x comments
</h5>
</li>
</ul>
</div>
<div class="clearfix">
</div>
</div>
I am using Bootstrap 3 and I would like to add some buttons in panel header, on top-right corner. When trying to add them, they are show below title baseline.
Code : http://bootply.com/82631
What are the missing CSS I should add either to the title, panel heading, or buttons ?
I would start by adding clearfix class to the <div> with panel-heading class. Then, add both panel-title and pull-left to the H4 tag. Then, add padding-top, as necessary.
Here's the complete code:
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</div>
...
</div>
http://bootply.com/98827
I'm a little late to the game here, but the simple answer is to move the H4 AFTER the button div. This is a common issue when floating, always have your floats defined BEFORE the rest of the contents or you'll have that extra line-break problem.
<div class="panel-heading">
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
<h4>Panel header</h4>
</div>
The issue here is that when your floats are defined after other items, the float's top will start at the last line-position of the element immediately before it. So, if the previous item wraps to line 3, your float will start at line 3 too.
Moving the float to the TOP of the list eliminates the issue because there are no previous elements to push it down and anything after the float will be rendered at the top line (assuming there is room on the line for all items)
Example of correct and incorrect ordering and the effects:
http://www.bootply.com/HkDlNIKv9g
You should apply a "clearfix" to clear the parent element. Next thing, the h4 for the header title, extend all the way across the header, so after you apply clearfix, it will push down the child element causing the header div to have a larger height.
Here is a fix, just replace it with your code.
<div class="panel-heading clearfix">
<b>Panel header</b>
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</div>
Editted on 12/22/2015 - added .clearfix to heading div
I placed the button group inside the title, and then added a clearfix to the bottom.
<div class="panel-heading">
<h4 class="panel-title">
Panel header
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</h4>
<div class="clearfix"></div>
</div>
Try putting the btn-group inside the H4 like this..
<div class="panel-heading">
<h4>Panel header
<span class="btn-group pull-right">
## Lock
## Delete
## Move
</span>
</h4>
</div>
http://bootply.com/lpXoMPup2d
You are part right. with <b>title</b> it looks fine, but I would like to use <h4>.
I have put <h4 style="display: inline;"> and it seams to work.
Now, I only need to add some vertival align.
In this case you should add .clearfix at the end of container with floated elements.
<div class="panel-heading">
<h4>Panel header</h4>
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
<span class="clearfix"></span>
</div>
http://www.bootply.com/NCXkOtIkD6
I've found using an additional class on the .panel-heading helps.
<div class="panel-heading contains-buttons">
<h3 class="panel-title">Panel Title</h3>
<a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>
And then using this less code:
.panel-heading.contains-buttons {
.clearfix;
.panel-title {
.pull-left;
padding-top:5px;
}
.btn {
.pull-right;
}
}
The h4 element is displayed as a block. Add a border to it and you'll see what's going on. If you want to float something to the right of it, you have a number of options:
Place the floated items before the block (h4) element.
Float the h4 element as well.
Display the h4 element inline.
In either case, you should add the clearfix class to the container element to get correct padding for your buttons.
You may also want to add the panel-title class to, or adjust the padding on, the h4 element.
or this? By using row class
<div class="row">
<div class=" col-lg-2 col-md-2 col-sm-2 col-xs-2">
<h4>Panel header</h4>
</div>
<div class=" col-lg-10 col-md-10 col-sm-10 col-xs-10 ">
<div class="btn-group pull-right">
## Lock
## Delete
## Move
</div>
</div>
</div>
</div>
I am using bootstrap 3 css framework.
I added facebook like buttona and twitter follow button. It works when I don't resize the window. When I resize my window, twitter and facebook buttons appear but I cannot click on it (there is no hyperlink mouse sign when i hover over these buttons)
when i resize the window and when the point reaches such that the buttons move to next row, buttons are no more click-able
how can i fix this ?
<div class="row" style="padding-top:4px;padding-left:4px;padding-right:4px; background:#09C;">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="input-group input-group-sm" style="padding-bottom:4px;">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="button">Go</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="pull-right" style="margin-top:10px;">
<!-- my social buttons are here-->
<!-- facebook and twitter are embedded inside iframe
</div></div></div>
</div>
</div>
jsfiddle http://jsfiddle.net/VZk5G/
The div with the .col-md-3 class is hovering the div with those buttons (.col-md-5). Use z-index to fix that:
.col-md-3
{
z-index: 2;
}
.col-md-5
{
z-index: 3;
}
A working jsFiddle Demo
I'm having trouble finding a solution to my issue.
I'm working in the footer of a page. From left to right in a single row, there's a disclaimer div, then a parent div containing a FaceBook and a Twitter button.
(Blue ~ disclaimer div, pink ~ parent div, red ~ the twitter button's color; the facebook button does not have a separate color).
The goal is for the Twitter button to always be on the right of the FaceBook button.
The disclaimer div is set up be a minimum size (the page is using Twitter Bootstrap), so when it is resized small enough the parent div of the buttons is moved to the next line below the disclaimer div.
The issue I'm running into is that when this button-parent div moves down, the Twitter button pops out of the parent div and is laid out below the FaceBook button in a column.
The code for the footer itself:
<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
<xsl:copy-of select="data/footer-content/entry/content" />
</div>
<div class="row">
<div class="span3 social-media-footer">
<div id='face' class="span1">
<!-- FaceBook Button -->
<a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
<img id="fb-btn" class="social-img" src="/f.svg" alt="...." />
</a>
</div>
<!-- Twitter Button -->
<div id='twitt' class="span1">
<a class="button-link" href="https://twitter.com/...." target="_blank">
<img id="twitt-btn" class="social-img" src="/t.svg" alt="...." />
</a>
</div>
</div>
</div>
</div>
</div>
Aside from the arbitrary coloring, there are no specific CSS rules on the buttons or their parent div.
I really have no idea on this one, and the only seemingly viable solutions I can find involve position the buttons with absolute or fixed, neither of which keep them in their parent in the footer how I'd like.
My primary goal that I'd like help accomplishing is just getting the Twitter button to stay in the parent div on resize.
Any ideas? And thanks ahead of time!
See if this will work for you:
http://jsfiddle.net/panchroma/yX4ZV/
I have edited your HTML a little so that the twitter and facebook icons are in the same span instead of seperate spans in a nested grid. Doing this solved the question for desktop and smartphone window sizes, but not for tablets.
To solve for tablets I wrapped the two icons in a class which I force to have a min-width:
HTML
<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
<xsl:copy-of select="data/footer-content/entry/content" />
</div> <!-- close span9 -->
<div class="span3 social-media-footer">
<div class="social-wrapper">
<!-- FaceBook Button -->
<a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
<img id="fb-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/facebook.jpg" alt="...." />
</a>
<!-- Twitter Button -->
<a class="button-link" href="https://twitter.com/...." target="_blank">
<img id="twitt-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/twitter.jpg" alt="...." />
</a>
</div><!-- close social-wrapper -->
</div> <!-- close span3 -->
</div> <!-- close row -->
</div><!-- close container -->
CSS
.social-wrapper{
min-width:185px !important; /* adjust as necessary depending on icon sizes */
}
Good luck!