Bootstrap3 problems with grid layout - html

I am creating a grid based landing page with lots of nested columns. Was going well until I completed the load of nested columns and then the next row seems to overlap. In the code below the new container and row appear over the top of the last nested row. I'm sure its something really simple but I can't see where I've gone wrong and would appreciate the help.
<div class="container">
<div class="row">
<div class="col-md-12 mainImage">
Image
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 panel2">
<div class="row">
<div class="col-sm-6 panel3"></div>
<div class="col-sm-6 panel4"></div>
</div>
<div class="row">
<div class="col-sm-12 panel3"></div>
</div>
</div>
<div class="col-sm-8 panel3">
<div class="row">
<div class="col-sm-6 panel2"></div>
<div class="col-sm-6 panel3"></div>
</div>
<div class="row">
<div class="col-sm-6 panel3"></div>
<div class="col-sm-6 panel2"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 panel4">
</div>
</div>-->

Related

Merge columns in Bootstrap vertically

i simply want to join two columns in Bootstrap vertically. Here is the code:
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Here is an illustration of what i mean:

You can do it this way
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
2
</div>
</div>
</div>
<div class="col-md-6">
3
</div>
</div>
</div>

Maybe something like this?
<div class="row">
<div class="col-6">
<div class="row " >
1.
</div>
<div class="row ">
2.
</div>
</div>
<div class="col-6 ">
3.
</div>
</div>

Responsive layout. Same html for desktop + mobile

I'm building a responsive front with Bootstrap 4 and I can't do what I want.
I made the result I want on codepen but I'm trying to avoid duplicate code for desktop+mobile.
<p>On desktop</p>
<div class="container-fluid">
<div class="row">
<div class="col col-md-3">
<div class="picture">PICTURE</div>
</div>
<div class="col col-md-9">
<div class="row">
<div class="col col-md-8 ">
<div class="content-a">ContentA</div>
</div>
<div class="col col-md-4">
<div class="button">Button</div>
</div>
</div>
<div class="row">
<div class="col col-md-12">
<div class="content-b">Content B</div>
</div>
</div>
</div>
</div>
</div>
<p>On mobile</p>
<div class="container-fluid">
<div class="row">
<div class="col col-md-6">
<div class="picture">PICTURE</div>
</div>
<div class="col col-md-6">
<div class="content-a">Contant A</div>
</div>
<div class="col col-md-12">
<div class="content-b">Contant B</div>
</div>
<div class="col col-md-12">
<div class="button">Button</div>
</div>
</div>
</div>
https://codepen.io/sanchou/pen/YzyXaQW
Is this possible to make? How could I achieve that?

You could consider implementing your layout using flexbox:
Bootstrap Flex
You can change the order of 'Content B' and 'Button' using order class.
Keep in mind that some older browsers might not support it though.

How to merge 2 rows and 2 columns to become 1 big box in Bootstrap 4?

How to merge 2 rows and 2 columns to become 1 big box in Bootstrap 4?
Before:
To be like this:
HTML
<div class="container">
<div class="row">
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
</div>
<div class="row">
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
</div>
</div>

I have made some changes to your html structure, also used some b-4 classes (h-100) to align it. read boostrap-4 document to understand grid system.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col border">.col-3</div>
<div class="col border">.col-3</div>
<div class="w-100"></div>
<div class="col border">.col-3</div>
<div class="col border">.col-3</div>
</div>
</div>
<div class="col">
<div class="row h-100">
<div class="col border h-100">.col-3</div>
</div>
</div>
</div>
</div>

Hope this helps. Note i did not add background colors or classes to keep the answer clean
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">A</div>
<div class="col-sm-6">B</div>
</div>
<div class="row">
<div class="col-sm-6">C</div>
<div class="col-sm-6">D</div>
</div>
</div>
<div class="col-sm-6">
F
</div>
</div>
JSFIDDLE LINK

Titles above bootstrap wells causing mis-alignment

I can't get these two wells on the same row to align correctly. I want the titles and the wells to be on the same line. This is my code, but its on Bootply as well.. Here Link to Bootply
Plus I can't get the "Help Credentials" title to left align with the well..
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-1">
<h2>Add your credentials</h2>
<div class="col-md-5 well">Stuff</div>
</div>
<div class="col-md-5 col-md-offset-1">
<h2>Help credentials</h2>
<div class="col-md-5 well col-md-offset-1">
Stuff
</div>
</div>

You're nesting columns without the required rows. Try this:
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-5">
<h2>Add your Amazon credentials</h2>
<div class="well">Stuff</div>
</div>
<div class="col-sm-5 col-md-offset-1">
<h2>Help credentials</h2>
<div class="well">stuff</div>
</div>
</div>
</div>
</div>
Demo
http://getbootstrap.com/css/#grid-nesting

My Bootstrap columns aren't lining up

I used to have a working layout of a header, side navigation column, main large content column , and a footer. Now the navigation column is sitting on top of the content column even though the numbers should add up. I just need my navigation column to line up next to my content. You can see my WIP HERE. What am I doing wrong?
Here is basically what my code for my layout is:
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>
Your help is greatly appreciated. Thank you! :)

The column divs only line up beside each other for the divs actually are "siblings" to each other, apart from adding up numberwise.
Try putting the navigation and content columns in the same container -> row tag, like so:
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>

From the look of your code, it looks like you want your columns next to each other. This should work
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>