Div tag alignment with Bootstrap - html

I'm sure this has been answered many times - but I've searched here with no luck...
I'm new to bootstrap (and div tags)... Here's what I've spent all day trying to figure out... I have 2 rows. The 1st row has 3 columns (1,2,3). The 2nd has 2 columns (4,5) . I'm trying to simply "allow" column "3" to extend into and beside column "5" - currently column 4 & 5 get pushed down below the end of 3...
Column "3" may contain an article or contact form - not sure yet- either way I need the flexibility...
I have successfully done this by nesting 4 into 1 & 5 into 2... but when I view in mobile view column 3 gets pushed to the end of section5... I want 3 to remain number 3 in the mobile vertical view list..
Does Bootstrap have something built into CSS to accomodate?
Are multiple 'containers' required?
I'd rather not add CSS, but if that's the only way so be it... Thanks!
My code:
<div class="row-fluid">
<div class="col-md-4">
<h2>section1 </h2>
</div>
<div class="col-md-4">
<h2>section2 </h2>
</div>
<div class="col-md-4">
<h2>section3 </h2>
</div>
</div>
<div class="row-fluid">
<div class="col-md-4">section4</div>
<div class="col-md-4">section5</div>
</div>

I believe this is what you're looking to accomplish:
Bootply
First, there is no .row-fluid class in Bootstrap 3. For this design, you'll need just a single .row and you'll use the helper class .pull-right on the section 3 element as follows:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<h2>Section 1</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<h2>Section 2</h2>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 pull-right">
<h2>Section 3</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-8">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<h2>Section 4</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<h2>Section 5</h2>
</div>
</div>
</div>
</div>
</div>
So, what's going on here is that the col-* classes have float: left applied to them by default. That means that if you were to have very long content in the 3rd column, when the remaining two columns wrap, there would be a gap between them and the first two columns, equal to the height of the 3rd column. We can fix this by telling the third column to float right instead. That's what the class .pull-right does -- it applies float: right to the element on which it's used.
When the third column is floated to the right, the 4th and 5th columns can sit neatly right below the left floated columns 1 and 2 at the md and lg breakpoints (991px and up). At the sm and xs breakpoints though, the source order is honored and section 3 displays in the proper position below section 2 and above section 4.
Finally, using a single row allows all of the columns to wrap at 12-grid units.
**If your content is dynamic or uneven in length, you can use the technique shown in the Bootply of nesting columns 1 and 2 together in a single column, as well as columns 4 and 5.
If you're new to Bootstrap, I encourage you take a look at my answers here or here, to help you understand and visualize the grid better.

Related

Bootstrap grids responsive

I have a 3 column layout with the code here for example. Right now when the browser window gets smaller it stacks from the 1st column on top, 2nd in the middle and then 3rd is last as expected. I want the columns to behave this way when the columns get smaller.
First - This column gets hidden and I have already established that in the CSS
Third - This is the first column on top.
Second- This column is on bottom.
<div class="row">
<div class="col-sm-3">First</div>
<div class="col-sm-6">Second</div>
<div class="col-sm-3">Third</div>
</div>
Use .order- classes for controlling the visual order of your content.
<div class="container">
<div class="row">
<div class="col-sm-3">
First, but unordered
</div>
<div class="col-sm-6 order-12">
Second, but last
</div>
<div class="col-sm-3 order-1">
Third, but first
</div>
</div>
</div>

How to set margin/padding for a device

Im making my website responsive for devices but i want to know if i can set a grid or margin/padding property for iphone so i can place it nicely and not 2 paragraphs in eachother.
I already tried to grid some text but it still looks weird in eachother this is my code:
<div class="row">
<div class="col-xs-1 col-lg-12">
Thisismy Test
</div>
</div>
You haven't tagged this as being a Bootstrap grid, but I'm assuming it is because of your grid classes.
You mention that you want to stop the navbar-brand text from wrapping on an iPhone so I'm wondering if there's there a reason why you wouldn't make the navbar-brand parent wider?
It looks to me as if it would need to be minimum col-xs-5
Here's a example showing both your existing HTML and the modification
https://codepen.io/panchroma/pen/OgQxBw
HTML
<div class="row">
<div class="col-xs-5 col-lg-12">
Thisismy Test
</div>
</div>
If you want to show the paragraph in entire row in mobile , use col-xs-12 class which will occupy the entire row space and display everything in one row in all th escreen sizes.
<div class="row">
<div class="col-xs-12">
Thisismy Test
</div>
</div>
If you want to display 2 paragraphs in row side by side use col-xs-6 for each div
<div class="row">
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
</div>
If you want to write your own CSS , you can do that by using media queries to define custom CSS for different screen sizes https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Bootstrap grid positioning

so I'm trying to make a bootstrap website but I don't really know how to customize the widths and position of these grids. I'm a bootstrap beginner. Could you please help me? It DOESN'T have to be accurate so bad but I need to keep the layout.
How it should look like:
http://i.imgur.com/WAE161o.png
HTML:
<div style="margin-top:200px;" class="container">
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<!--THIS ONE IS FOR THE MIDDLE, CENTERED AD-->
<div class="col-md-4 column">
</div>
<div class="col-md-4 column">
</div>
</div>
<div class="row clearfix">
<div class="col-md-2 column">
</div>
<!--THIS ONE IS FOR BUTTONS STICKED TO THE POST ON THE LEFT-->
<div class="col-md-1 column">
</div>
<!--THIS ONE IS FOR THE POST AND BUTTONS STICKED ON THE BOTTOM-->
<div class="col-md-4 column">
</div>
<!--THIS ONE IS FOR THE SIDEBAR-->
<div class="col-md-3 column">
</div>
<div class="col-md-2 column">
</div>
</div>
</div>
From Bootstrap 3.0 release
col-vp-push-x = push the column to the right by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.
col-vp-pull-x = pull the column to the left by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.
vp = xs, sm, md, or lg
x = 1 thru 12
So the answer to your question is push/pull columns. For example, your ad row should be like this:
<div class="row">
<div class="col-sm-8 col-sm-pull-2 col-sm-push-2 advertisement">
your center column
</div>
</div>
and so on. See fiddle here
If you need specific columns with pixel-specific widths, you can't use the Bootstrap grid. The Bootstrap grid is broken into 12 equal sized columns. You can still use Bootstrap, just not the grid part. There is some limited customization that can be done with the grid system, but I don't think it can approach what you are trying to do. You'll need to use custom CSS to position the site how you want it.
If you just want something similar and don't care about exact widths, then you should follow the grid documentation. You are moving in the right direction but when you have nested columns you need to make sure you wrap in a row, which you don't have. You can also use the col-md-offset-* styles to shift columns so you don't have to "use" all 12 columns. For example for the main part of the site you might want the first column to be ".col-md-3 .col-md-offset-4" and the second ".col-md-3".

Bootstrap 3 Grid System

I am migrating a project of mine from bootstrap 2 to bootstrap 3. Now, I am having some problem with the grid layout that I can't understand. I have a col-md-12 and I wanna add 3 columns of equal width in this larger div. Logically, the 3 columns should each be col-md-4. However, when I add the 3 columns (divs) of class col-md-4, they don't fit and one of them gets pushed down and some space is left at the end after the 2nd one.
Please someone help me understand something that I may be missing. Thank you.
It sounds like the issue is padding. Bootstrap automatically adds padding when you have nested col-xx-# classes. If you have col-md-4 as a direct child of a col-md-12 bootstrap will add padding and your third col-md-4 will end up on a new line.
What you're doing:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
</div>
To address this, either add a new class="row" above your first col-md-4 or simply remove the col-md-12 like this:
<div class="container">
<div class="row">
<div class="col-md-4">
1/3
</div>
<div class="col-md-4">
2/3
</div>
<div class="col-md-4">
3/3
</div>
</div>
</div>
Bootstrap's column layout can only be 12 "units" in width.
To archieve columns of equal width, you should split 12 equally (sum of * in col-md-* should be 12).

Bootstrap right Column on top on mobile view

I have a Bootstrap Page like this:
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>
Looks like:
-----
|A|B|
-----
So if I look at it on a mobile Device, the Column A is on top, but I want the B on top.
Is this possible?
I tried it with push an pull, but it didn't work.
Use Column ordering to accomplish this.
col-md-push-6 will "push" the column to the right 6 and col-md-pull-6 will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.
I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...
DEMO
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
view-port >= md
|A|B|
view-port < md
|B|
|A|
It's worth noting that if you are using columns that are not both equal to 6, then the push amount will not equal the initial column size.
If you have 2 columns (A & B) and wish for column A to be smaller and to the right on "sm" or greater viewports, but atop a mobile (xs) viewport, you would use the following:
<div class="row">
<div class="col-sm-4 col-sm-push-8">A</div>
<div class="col-sm-8 col-sm-pull-4">B</div>
</div>
Otherwise, the alignment of the columns will appear off.
Flexbox Direction
For Bootstrap 4, apply one of the following to your .row div:
.flex-row-reverse
For responsive settings:
.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
In Bootstrap 4, let's say you want to have one order for large screens and a different order for smaller screens:
<div class="container">
<div class="row">
<div class="col-6 order-1 order-lg-2">
This column will be ordered second on large to extra large screens
</div>
<div class="col-6 order-2 order-lg-1">
This column will be ordered first on large to extra large screens
</div>
</div>
</div>
You can omit order-1 and order-2 above. Just added for clarity. Default order will be the order the columns appear in the html.
For more info https://getbootstrap.com/docs/4.1/layout/grid/#reordering
The below code work for me
.row {
display: flex;
flex-direction: column-reverse;
}
This is now done (in Bootstrap v4) by adding order-# classes.
See https://getbootstrap.com/docs/4.1/migration/#grid-system-1
Like this:
<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>
I have three bootstrap 4 columns of different sizes. As the screen gets smaller the third column is hidden, then when the screen gets smaller still and the divs are stacked the order changes so that column 2 is at the top.
<div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
<h3>LEFT HAND SECTION</h3>
<p>For news, links photos or comments.</p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
<h3>MAIN SECTION</h3>
<p>The main content for the page.</p>
</div>
<div class="col-xs-12 col-md-4 d-none d-md-block order-last">
<h3>BLANK SECTION</h3>
<p>Will usually just be blank.</p>
</div>
I hope this helps. I found it difficult to understand this but finally got there with the help of this thread, but it was a bit hit and miss.
I used:
.row {
display: flex;
flex-direction: row-reverse;
}
This worked for me on Bootstrap 4:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 order-md-last">
<%= render 'form'%>
</div>
<div class="col-md-8 order-md-first">
CONTENT
</div>
</div>
</div>
Bootstrap 4 includes classes for flex.
See: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/
<div class="row flex-column-reverse flex-md-row">
<div class="col-sm-10">
Col 1
</div>
<div class="col-sm-2">
Col 2
</div>
</div>
In Bootstrap V4 (Released January 18, 2018) You can use Reordering Classes. Info here under Reordering tab.
https://getbootstrap.com/docs/4.0/layout/grid/