Bootstrap 3 use 'btn-group' and align - html

I appreciate the new Bootstrap 3 but ...
I created a table with 5 columns.
The last 3 columns contain 2 x 'a href' and 1 x 'form' but everyone works as a button with a size of 30 x 30.
The form was the biggest problem because it is a block element and I wanted all buttons next to each other in one line.
So my solution so far:
<table>
<tr>
<td colspan="3">
<div class="btn-toolbar">
<div class="btn-group"> Link 1 </div>
<div class="btn-group"> Link 2 </div>
<div class="btn-group"> Form 1 </div>
</div>
This works great. But I want to align these 3 objects at the right of my cell.
There is no way I found to align it right.
<div class="btn-toolbar text-right">
Don't work!
<tr colspan="3" class="text-right">
Don't work!
<div class="btn-toolbar pull-right">
Works!
But I feel really uncertain if this is the right way.
For me it is to much nested code.
Is there any way to solve this with less code?

There is nothing wrong with using pull-right to achieve what it is you require.
<h2>Stock Management</h2>
<hr/>
<div class='btn-group pull-right'>
<a href='#' class='btn btn-default'>Add New Product</a>
<a href='#' class='btn btn-info'>Supplier List</a>
<a href='#' class='btn btn-danger'>Stock Alerts</a>
</div>
<div class='clearfix'></div>
<hr/>
You will just require a div with a class of clearfix afterwards otherwise you may have overlapping issues.
A note from the bootstrap docs regarding use of the pull-right class in dropdown menus:
Deprecated .pull-right alignment
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.
PS - Do not use tables for ANYTHING other than displaying data. That kind of web design should be left back in 1998 :P

See if this solves your purpose. I added a bit of css to your existing code
<style type="text/css">
.btn-group{
display: inline-block;
text-align:right;
}
</style>
The HTML is same as yours
<table>
<tr>
<td colspan="3">
<div class="btn-toolbar">
<div class="btn-group"> Link 1 </div>
<div class="btn-group"> Link 2 </div>
<div class="btn-group"> Form 1 </div>
</div>

Related

prevent bootstrap navbar-fixed-bottom overlap

In some cases the bootstrap navbar-fixed-bottom will overlap other content without displaying a scrollbar.
For example https://jsfiddle.net/m5vgd9g7/1/:
<div>
<a class="btn btn-primary" href="#">
Button
</a>
</div>
<div class="navbar navbar-default navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px">
bottom
</div>
If you make the display pane very short vertically, the text "bottom" overlaps the button:
How can the overlap be prevented, so a vertical scrollbar appears before they overlap?
You should add a class to your top div which is row, so your top html would look like
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
This will add you a scrollbar for your content vertically. But when we declare a fixed navbar you should keep in mind to add a padding/margin to the rest of the content to the size of the navbar, which should display the rest of the content without being intruded by the navbar. So your final html for the top div would look like,
<div class="row" style="padding-bottom:15px;">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
Note: I would never use inline styles as it would complicate the html in the long run and hard to debug. I did it here for the sake of demonstration.
And the fiddle example is here : https://jsfiddle.net/m5vgd9g7/
EDIT
Thanks to #JDiMatteo who commented about the row class addition. I was about to maintain the bootstrap standards in grid system. (ref: http://getbootstrap.com/css/#grid). Apparently it seems row should be contained within container or container-fluid classes for it to work. This will define a row, where elements/columns(as in bootstrap) could reside in. And by using this, you can get rid of the custom styling we used earlier, padding/margin.
<div class="container">
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
</div>

How to place <h3> and <button> elements side to side

I'm trying to figure out how to place my <h4> tag and <button tag to be side by side.
Current Behaviour - Right now they are underneath my image and I want them to put in a horizontal position.
Required Behaviour - I want the <h4> to be side by side with the image and the <button> side by side with the <h4>.
I tried floating to the right and display blocks, but the elements are still underneath the image and one another.
Codepen Link
Browsers by default typically display header elements as block. Use inline-block to not have it be in it's own line.
HTML
<h4>title</h4>
<button>button</button>
CSS
h4 {
display: inline-block;
}
DEMO: http://codepen.io/anon/pen/bVPXOK
Maybe
<h4 style="display:inline-block;">
heading
</h4>
<button> submit </button>
?
I saw your codepan the real problem was that your button was outside the right div that is why it was not aligned next to <h4>. I have edited the code (Updated Working Codepan)-
Modified CODE
<div class=" panel-body">
<div class="row-fluid">
<div class="row-fluid">
<img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
<h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
<button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
</div>
</div>
</div>
instead of this (your previous code) -
<div class=" panel-body">
<div class="row-fluid">
<div class="row-fluid">
<img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
<h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
</div>
<button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
</div>
</div>
and to align both <h4> and <Button> next to image you have to change your css and add display: inline-block !important; like this (Updated Codepan with image alignment) -
CSS
/* Hotel Search Panel */
.hotel-img {
display: inline-block !important;
width: 250px;
}
Another option you can use is the "float-right" class. If you nest your button in the h4, it can be accomplished like so:
<h4>Title<button class="float-right">My Button</button></h4>
Hope that helps!

Grid Issue By Using <div> and <a>

I have one silly question about Bootstrap Grid System.
Is that okay to use <a href="#" class="col-lg-4"> instead of <div class="col-lg-4">?
Is it because I want create a column-4 grid menu with hyperlink.
Basically, it should look like this which the hyperlink only cover the text not the whole column even if I had styled width: 100%; height: 100%; inside the <a> tag.
<div class="row">
<div class="col-lg-4">
Menu 1
</div>
</div>
After I change the code, it should look like
<div class="row">
<a href="#" class="col-lg-4">
Menu 1
</a>
</div>
Is this a best practice of using Bootstrap?
Or we have to follow the standard which define by Bootstrap?
do it like this and it will be looking great:
just add a class or style to your a element.
or add class "btn btn-default btn-block" to use bootstrap button styles
<div class="row">
<div class="col-lg-4 text-center">
<a href="#" class=" btn-block">
Menu 1
</a>
</div>
</div>
The only problem I see with that is that the A won't have the css property display: block; by default so you might run into styling issues. If you fix this issue by adding this property, I can see any problem with that.

Bootstrap floating drops item onto second line

This is my code: http://www.bootply.com/Tm5C3Ja7RL
<div class="col-md-12">
<h3>Test</h3><button class="btn btn-default pull-right">Button</button>
</div>
It drops the button onto a second line as well as aligning it to the right. I only want to push it to the right. Can anyone show me the best way of doing this.
As EWit mentioned, a header is a block element.
This block will push down other elements behind it.
There are several solutions, one better/cleaner than the other
Changing the header to an inline element
h3 {
display:inline;
}
This will result in your title with the button right next to it.
I don't think the pull-right will have an effect on it. Should be tested.
You could also add the condition that the h3 must have a certain class or must be inside an element with a certain class.
Splitting the column in 2
<div class="col-md-10">
<h3>Test</h3>
</div>
<div class="col-md-2">
<button class="btn btn-default pull-right">Button</button>
</div>
By also using col-sm, for example, you could alter this so that the button is displayed next to the title in a medium/large screen and under it in a small screen.
However, the pull-right might make it look pretty weird then.
<div class="col-md-10 cold-sm-12">
<h3>Test</h3>
</div>
<div class="col-md-2 col-sm-12">
<button class="btn btn-default pull-right">Button</button>
</div>
Put the button in the h3-element
As EWit mentioned, you can also put the button inside the h3-element.
This will keep the button in the same line, but might alter the text formatting.
<div class="col-md-10">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
Put it inside the <h3>. Headers in HTML take up the full width as a block object. As such other objects are pushed down.
Try:
<div class="col-md-12">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
I myself extend it with some markup for basic links but to align it to the same height as the text in the header.
h1 .pull-right {
padding: 15px 5px 0 0;
}
But I have no idea what values would be best for a button to align it. Trial and error I guess.

Arrange columns according to height

I am using bootstrap for grid.
When the an column is expanded the other columns which are on right are aligning properly but the elements which are left to it are not aligning properly.
<div class="row">
<div class="repeater" ng-repeat="student in students | filter : query">
<div class="span{{12/columns}} col-sm-6 panel panel-warning">
<div class="panel-body">
<div class="row">
<div class="col-md-5"><img ng-src = "img/{{student.img}}" width="80px;" class="img-circle"></div>
<div class="col-md-7">
<button class="btn btn-info" style="margin-top:20px;" ng-click="show=!show">{{student.name}}</button>
<button type="button" class="close pull-right" ng-click="remove(student)">× </button>
</div>
</div>
<table class="table table-striped table-hover" ng-show="show">
<tr><th style="padding-right:0px;">Father Name:</th><td>{{student.fathername}}</td> </tr>
<tr><th>Class: </th><td>{{student.class}}</td></tr>
<tr><th>Subj1: </th><td>{{student.results.subj1}}</td></tr>
<tr><th>subj2: </th><td>{{student.results.subj2}}</td></tr>
<tr><th>subj3: </th><td>{{student.results.subj3}}</td></tr>
<tr><th>subj4: </th><td>{{student.results.subj4}}</td></tr>
</table>
</div>
</div>
</div>
</div>
Here is the fiddle link view in fullscreen view.
I want all the elements in the grid to align properly without leaving any place.
Can anyone help me?
This is not entirely possible with bootstrap. To explain you why, the .col-md-4 class has css property float: left which means whenever you open the right-most box, the left-side elements takes the height of the right-box, thus not allowing any other boxes below it.
You could get it working for the left and right elements by giving float:right for every last element in the row (in your case using .col-md-4:nth-child(3n){ float:right; }) like in the demo here but the middle element cannot be helped because it is still under float:left.
For your requirement, I recommend you use a JS library like Masonry which does exactly what you are expecting and used in cases where containers have variable heights and you want to fix them tightly, leaving no gap.
Here is what you are looking for: http://jsfiddle.net/ewNc6/
The trick is to insert a 'clear:both' on the first of each row.
<div class="col-md-4" ng-repeat="student in students" style="{{$index % 3 == 0 && 'clear:both'}}">
This normally will tie the code to the number of rows, but then again so does <div class="col-md-4" ,so you might be ok when doing so.