I'm using form-group in Bootstrap 3. It is causing some horizontal alignment issues.
Here's an example of what I mean: http://jsfiddle.net/7723q8kr/. Notice columns 3 and 4 are lower than 1 and 2.
<div class="container-fluid">
<div class='row'>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
<div class='row'>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
</div>
When form-group is removed, as shown here http://jsfiddle.net/1kL4tfux/, the problem goes away.
Is there a way to use form-group within this context and not have it affect alignment?
Any col class divs in Bootstrap have a float applied. But the form-group is a block element, which by default will take up 100% width. It also has a margin-bottom property which will push the next divs down. This causes the form group items to stack (which is what it is intended to do).
You can wrap them in a form-inline element. But you lose a bit of your formatting, so you'd need to specify the width of the form-group. As the Bootstrap documentation says:
Requires custom widths
Inputs and selects have width: 100%; applied by
default in Bootstrap. Within inline forms, we reset that to width:
auto; so multiple controls can reside on the same line. Depending on
your layout, additional custom widths may be required.
So you could do something like this? http://jsfiddle.net/7723q8kr/1/
Related
I have an issue with col that aren't in one row. I have all of them in one container, row and 3 columns col-md-5, col-md-2 and col-md-5. All paddings and margins are set from CSS bootstrap.
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<div class="col-md-5 col-xs-12">
<div>
<div class="row-7 clearfix">
<p class="text">Výtečně<br>chutnám</p>
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
<div class="button-holder">Koupit</div>
</div>
</div>
<div class="col-md-2 col-xs-12 mobile-hide">
<div class="line"></div>
</div>
<div class="col-md-5 col-xs-12">
<p class="text-3">TEXT</p>
</div>
</div>
</div>
</div>
</div>
Dev page here: http://dev.ekolok.cz/
Thank you for advice and help.
I don't know what exactly your layout should look like but here is how bootstrap column layout should look:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
The problem in your code is that columns aren't a direct child of row etc.
Try to refactor the code and see if you understand what is going on...
Bootstrap columns must add up to 12 per row. If you would like multiple elements in a row, your 'col-whatevers' must add up to 12.
For example if you want your title and your button on the same row your code would need to look like this:
<div class="container">
<div class="row">
<div class="col-6">
<p class="text">Výtečně<br>chutnám</p>
</div>
<div class="col-6">
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
</div>
</div>
You would then need to add another 'row' element and fill that up with columns that add up to 12. Not sure if this is what you're asking but it's what I could make out from your question.
Also, empty 'divs' are redundant, it doesn't mean anything. You can remove all your tags that don't carry a class, id etc.
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
I have a screen split in two, using two columns.
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
I need a small (approx 10px) gap between the two columns.
http://www.bootply.com/vaOb1WdR5I
Can this be done?
Both boxes would need to reduce by 5 pix (in the above example), as I need the total width to remain.
Edit: Some ideas nearly work, but I am getting an extra Well that I don't want. With this:
<div class="row">
<div class="col-md-6">
#Html.Action("ShowDuePayments", "Transaction")
</div>
<div class="col-md-6">
#Html.Action("ShowRecentTransactions", "Transaction")
</div>
</div>
I get this:
The 'under' well div shouldn't be visible.
A couple of points:
You shouldn't add extra classes to the Bootstrap columns (that's not a hard and fast rule, but a good recommendation)
You are missing the container wrap.
Make changes using those rules and it looks like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well">Left Top Box</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">Left Bottom Box</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well">Right Box</div>
</div>
</div>
</div>
How about this?
<div class="row">
<div class="col-md-6" style='padding-right:5px'>
<div class='well'>
Left Box
</div>
</div>
<div class="col-md-6" style='padding-left:5px'>
<div class='well'>
Right
</div>
</div>
</div>
http://www.bootply.com/Ogrte6IQzw
If you remove the inline styling, you will have the natural spacing provided by bootstrap, which is 15px padding.
You can change the class of col-md-6 and add width:49%, and to the 2nd div add pull-right class like:
HTML:
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well pull-right">
Right
</div>
</div>
CSS:
.col-md-6{
width:49%;
}
You can also try to add padding to the two div tags ie:
.col-md-6{
padding:5px;
}
This would add a bit of padding to all the sides - unless you use padding-left & padding-right and assign different class names to the divs - depending on how you want your code to be layed out.
You could also use an additional class so you only modify special column-6 elements and not all on your site. This example also uses percentage based widths as Flopet17s. You could tweak the percentage number to better fit your desired gap width.
.withgap {
width: 49%;
margin-right:1%;
}
<div class="row">
<div class="col-md-6 well withgap">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
In Bootstrap, I am using col-md-6 to bring two columns but how to remove the gap in the middle and fill the spaces?
For example in photoshop:
HTML Code:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Note: I just want to apply for this section only, not everything by default.
Assuming that you want to have just the backgrounds touching, then you don't need to do anything. The column gutters (that are represented on your photoshop file by the blue lines) in Bootstrap are produced by padding. So, you can simply do the following to achieve what's in your photoshop file:
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 blue-section">
1
</div>
<div class="col-md-6 red-section">
2
</div>
</div>
</div>
CSS:
.blue-section{background:blue;}
.red-section{background:red;}
This will result in still having padding for your content.
Use the .row with negative margins to remove the gutter (padding) between columns..
<div class="row">
<div class="col-md-6">
<div class="row blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="row red-section">
2
</div>
</div>
</div>
Demo: http://www.bootply.com/TytFvxummt
It's a pretty old question, but just to make it helpful for anyone coming now, Bootstrap now has a g (gutter) class which removes the spaces in between edges of columns.
<div class="row g-0"> // the g-0 will remove all spaces. Ranges from 0-5.
<div class="col-6">
// content
</div>
<div class="col-6">
// content
</div>
</div>
For Bootstrap 5, you can refer to this link as well if needed: https://getbootstrap.com/docs/5.0/layout/gutters/
i think you have to take your structure like this
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">1</div>
</div>
<div class="col-md-6">
<div class="row">2</div>
</div>
</div>
</div>
Using this:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Will achieve that, have you added any padding or margins on the divs? By default there is none on the bootstrap rows/cols. So it must be with the css on .red-section & .blue-section?
I added a background colour to the cols so you can see, http://jsfiddle.net/bnyrL54u/
Hope this helps.
Using Bootstrap, I have a grid column class="col-lg-3" that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).
<div class="row">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Just the same way like the left column in LifeHacker.com
You will see that the left part is fixed however I scroll though the page.
I use bootstrap v3.1.1
<div class="row">
<div class="col-lg-3">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
Normal data enter code here
</div>
</div>
iterating over Ihab's answer, just using position:fixed and bootstraps col-offset you don't need to be specific on the width.
<div class="row">
<div class="col-lg-3" style="position:fixed">
Fixed content
</div>
<div class="col-lg-9 col-lg-offset-3">
Normal scrollable content
</div>
</div>
Following the solution here http://jsfiddle.net/dRbe4/,
<div class="row">
<div class="col-lg-3 fixed">
Fixed content
</div>
<div class="col-lg-9 scrollit">
Normal scrollable content
</div>
</div>
I modified some css to work just perfect:
.fixed {
position: fixed;
width: 25%;
}
.scrollit {
float: left;
width: 71%
}
Thanks #Lowkase for sharing the solution.
in Bootstrap 3 class="affix" works, but in Bootstrap 4 it does not.
I solved this problem in Bootstrap 4 with class="sticky-top"
(using position: fixed in CSS has its own problems)
code will be something like this:
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Updated for Bootstrap 4
Bootstrap 4 now includes a position-fixed class for this purpose so there is no need for additional CSS...
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="position-fixed">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
</div>
https://www.codeply.com/go/yOF9csaptw
Bootstrap 5
The solution is very similar to v4, but you can use responsive variations with .sticky-*-top classes.
<div class="row">
<div class="col-lg-3">
<div class="sticky-md-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Docs: https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top
Use this, works for me and solve problems with small screen.
<div class="row">
<!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
<div class="col-lg-3 device-lg visible-lg">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
<!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
<div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
<div>
NO fixed position
</div>
</div>
Normal data enter code here
</div>
</div>
With bootstrap 4 just use col-auto
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto">
Fixed content
</div>
<div class="col-sm">
Normal scrollable content
</div>
</div>
</div>
If you really want to do it that way, you can't do it in "col- *", because it's going to overlap each other, you should do it in the parent class "row", but depending on what you're doing, you might have a problem with the browser scroll that will be "cut" from the screen, however, is simple to solve, just control the column width and everything will be fine.
<div class="row fixed-top h-100">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9 overflow-auto h-100">
Normal scrollable content
</div>
</div>
Use .col instead of col-lg-3 :
<div class="row">
<div class="col">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>