I know how to solve this issue using CSS that overrides Bootstrap's compiled CSS, but it seems to me this alignment issue is such a common use case that I must have misunderstood how to use the Bootstrap framework. (First time with Bootstrap.)
Case: The columns in container B (JSFiddle) do not align with the content in container A, because Bootstrap generates a 15px left/right padding to each column.
<section class="container A">
<h1>About Us</h1>
<p>Lorem</p>
</section>
<section class="container B">
<div class="col-md-3">
<h2>Hiya!</h2>
<p>Lorem ipsum</p>
</div>
<div class="col-md-3">
<h2>Hiya!</h2>
<p>Lorem ipsum</p>
</div>
<div class="col-md-3">
<h2>Hiya!</h2>
<p>Lorem ipsum</p>
</div>
<div class="col-md-3">
<h2>Hiya!</h2>
<p>Lorem ipsum</p>
</div>
</section>
Question: Is there a way I can make the column content align to the container A content, by changing the HTML only, without using any CSS?
Setup: I'm required to use Twitter bootstrap 3.0.0 for the above.
OT: As you see this is my first post on SO, I'm grateful for any advice on how to improve this question and its markup.
Thanks!
Yes, you used two containers, I updated your fiddle with two rows instead and a div with class col-md-12 to take up the whole width of the screen in the first row, check it here : http://jsfiddle.net/3ELJH/3/
Related
I searched everywhere before posting, so sorry if it's a duplicate; nothing I found addressed my specific issue.
I need to have divs ordered differently between desktop and mobile using Bootstrap 3. Note: I could do it if I hardcoded everything, but I'm forced to use Bootstrap, and I know there is a solution that accommodates both desktop and mobile.
Here's the desktop layout. I can't figure out the combination of push/pull classes.
I tried moving the containing div for div 3 and div 4 to appear after div 1 and pull it over 6 columns, but div 1 disappears. I add a pull to div 1 and it's completely hidden from view. I added a clearfix to the containing row div with no success.
Here is the Codepen.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<p>1</p>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-md-6">
<p>3</p>
</div>
<div class="col-md-6">
<p>4</p>
</div>
</div><!--/.row-->
</div>
<div class="col-md-6">
<p>2</p>
</div>
</div><!--/.row-->
Will take a break and try later, but thought I'd post in meantime. /sigh
There is a lot of tutorial about bootstrap elements.
But I want to know where I must use nav/header/container/row/well/panel/section
for example..Do it needs use row for column 12?
1- currently I do it this way:
<body>
<div class="container-fluid"> /*only for top navbar*/
<nav>
</div>
<div class="container"> /* for body */
<header></header>
<main class="row">
<div class="col-md-2"></div>
<div class="col-md-5"></div>
<div class="col-md-5"></div>
</main>
<footer class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</footer>
</div>
</body>
Is it true?
2- Is this format true or necessary?
<div class="row">
<div class="col-md-12"></div>
</div>
3- which one is standard?
<div class ="well">
<div class="row"> <div class="col-md-*"></div> </div>
</div>
or
<div class ="row">
<div class="well"> <div class="col-md-*"></div> </div>
</div>
4- dose it need use "container" class for all section or only for parent section?
for 1:- yes it's a correct method. whenever you want to use bootstrap column classes like col-xs-12 in their first parent you must put class " row ".
for 2:- this is true. method also accessory.
for 3:- first option is correct.
for 4:- depends of need of page design. if all site are in same container with then you can put it in parent class.
All options you mentioned are correct.
However, below written structure makes sense. That means if you are using col in container or container-fluid it should be in row.
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
If anytime you want to check how well your bootstrap is written, you can check it on http://www.bootlint.com/
But I want to know where I must use nav/header/section/footer
Well all these fields are only for semantic purpose, actually they all could be div. In the future or even now it is best practise for SEO to use nav for navigation, footer for the footer etc. For example header should be used to introduce content, it often contains <h1> - <h6> tags.
There are many informations to this in the web, here is a reference
All the other bootstrap classes are just styles which you could apply by yourself. A container for example can be used once for all of your content if you never need a full width element, but sometimes you have a situation where you need a full width element (f.e. an image) then you dont want to wrap all of your content into container.
Here you want to use multiple containers and not one for everything (Fiddle)
Hope this helps you a bit.
I'm starting out a website using BootStrap 3 framework. Here's the section of the code that I have an issue with:
<div class="row">
<div class="col-md-8">
<div class="brand">
<h1>Test Text.</h1>
<div class="line-spacer"></div>
<p><span>Some more test Text</span></p>
</div>
</div>
<div class="col-md-12">
<img src="img/devices.png" />
</div>
</div>
</div>
Here's what the output looks like:
How do I get the image along the same row as the text? I tried placing the <img> within the col-md-8 div tag, tried without specifying any col div value, but none of that worked. Any help is appreciated. The CSS is the generic bootstrap min css.
You might want to split the area up in two parts, but always keep in mind that bootstrap standard uses 12 grid system.
So if you want the two next to each other u use...
<div class="row">
<div class="col-md-6">
Here your text
</div>
<div class="col-md-6">
<img />
</div>
</div>
That should fix your issue, remember up count goes over 12 it wraps.
Your columns have to always add up to a total of 12 and your code should be similar to the below:
<div class="container">
<div class="row">
<div class="col-md-4">
CONTENT
</div>
<div class="col-md-8">
CONTENT
</div>
</div>
</div>
Have a good read over the Bootstrap Docs on their Grid System:
http://getbootstrap.com/css/#grid
I'm using the profound grid framework to build responsive fluid grid layout. Basically what I want to achieve is to create a layout containing 6 colums of which the menu container is on the left with 1 column width and the content is on the right with 5 columns width. Inside the content I have a nested grid that is also fluid.
I have the grid working as the responsive fluid example which can be found here: http://www.profoundgrid.com/examples/fluidresponsive.html
The scss code I have looks like this:
#row{
div{#include column(6);}
.col1{#include column(2);}
.col5{#include column(10);}
#include generate_grid_positions(div, 1);
}
The HTML looks like this:
<article id="row">
<div id="menuContainer" class="col1">Menu <br />menu <br />menu</div>
<div id="contentContainer" class="col5">
<div id="projectContainer">
<div class="project">project1</div>
<div class="project">project2</div>
<div class="project">project3</div>
<div class="project">project1</div>
<div class="project">project2</div>
<div class="project">project3</div>
</div>
<div id="socialContainer">sadfgsdfg</div>
</div>
</article>
What I have right now is a fluid responsive grid, but both divs get stacked upon eachother. I would like to know how to push the content 2 columns to the right.
Like this :
<article class="grid1">
<div class="col2 push0">menu</div>
<div class="col2 push2">c1</div>
<div class="col2 push4">c2</div>
<div class="col2 push6">c3</div>
<div class="col2 push8">c4</div>
<div class="col2 push10">c5</div>
</article>
merge the 5 right columns :
<article class="grid1">
<div class="col2 push0">menu</div>
<div class="col10 push2">5 times width</div>
</article>
And to make sure you learn not much (becoz it's copy pasted from your OP link), YOUR solution is :
<article>
<div class="col3">left</div>
<div class="col9 push3">right</div>
</article>
How can I extend the background color of the left nav to be the same height as the main content area? The background would need to increase too if a slidetoggle is used. Please see the JSfiddle for markup example:http://jsfiddle.net/8WJRQ/
I want the styling for #nav to extend the same height as .main-content (with out any changes to the HTML structure, b/c i am using a 12 column template.)
*I should mention that the numbered classes (.two and .ten) can't be changed because they are part of a global template.
<div class="row">
<div class="two columns">
<div id="nav">
<ul><li>Home</li><li>News</li><li>About </li></ul>
</div>
</div>
<div class="ten columns">
<div class="main-content">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
Toggle Text
<p class="foo">Lorem ipsum<br>
hello<br>
world</p>
<p>Lorem ipsum</p>
</div>
</div>
</div>
you can use table, table-cell and table-row css properties.
http://www.w3schools.com/cssref/pr_class_display.asp
and put background into .two .columns
http://jsfiddle.net/G6sdD/
update
ok here is a js version. i didn't really put much thought into it. so there might be a better way of doing it.
http://jsfiddle.net/vGNXb/
$(document).ready(function(){
var height = $('.ten.columns').height();
$('.two.columns').height(height);
});
function extend(){
$('.foo').slideToggle(function(){
var height = $('.ten.columns').height();
$('.two.columns').height(height);
});
}