Working with Twitter Bootstrap 2.3.5.
Well basically, my structure is that I have a fixed sidebar on the left (span4) and a main content area on the right (span8, #main)
Within #main I have placed a .hero-unit and after that a row that should contain two columns, both spam4.
Here is a shortened version of my code:
...
<div class="span8 offset4" id="main">
<div class="hero-unit">
....
</div>
<div class="span4" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span4" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
My problem now is that the #main-left and #main-right is now placed outside the container.
What seems to be the problem with my code?
Minus your ID's and any custom classes, this should work for you:
<div class="container">
<div class="row">
<div class="span4">
<p class="text-center"><img class="img-circle" src="http://placehold.it/100x100" /></p>
<p>Look at this stuff, isn't it neat wouldn't you think my collection complete. Wouldn't you think Im a girl a girl who has everything.</p>
<ul class="nav nav-tabs nav-stacked">
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
<div class="span8">
<div class="hero-unit">
<h1>Hero Unit</h1>
</div>
<div class="row">
<div class="span4">
<h3>Head here</h3>
<p>I've heard it said, that people come into our life...</p>
</div>
<div class="span4">
<h3>Head here</h3>
<p>Like a comet pulled from orbit as it passes the sun...</p>
</div>
</div>
</div>
</div>
</div>
View Demo Here
May be this could help you..
<div class="span8 offset4" id="main">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
....
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span6" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
See comments regarding nesting columns and rows. But try this:
<div class="container">
<div class="row">
<div class="span4">
The sidebar content
</div>
<div class="span8" id="main">
<div class="row">
<div class="hero-unit">
....
</div>
</div>
<div class="row">
<div class="span4" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span4" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
</div>
</div>
Related
I'd like to know how to replace the position for the image from right side to left side and the text from right side to left side
my code is :-
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
There you go. to change the text from right to left just use the class text-left and if you want it to the right use text-right do the same for the image container
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6 layout_padding_2">
<div class="full">
<!-- added class text-left -->
<div class="heading_main text_align_left text-left">
<h2><span> TT </span> ERP </h2>
</div>
<!-- added class text-left -->
<div class="full text-left">
<p> TEST </p>
</div>
</div>
</div>
<div class="col-md-6">
<!-- added class text-left -->
<div class="full text-left">
<img src="images/img2.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
if you only want to show image in left side and text in right side then the image column should be there after the text column
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
</div>
</div>
</div>
Swapping the elements should be helpful.
<div class="section margin-top_50">
<div class="container">
<div class="row">
<!-- Was in 2nd previously -->
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
<!-- Was in 1st previously -->
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
</div>
</div>
</div>
I need to code a layout like this with Bootstrap 3.x
But I don't know how to create a section (in this case, the main and the article) with multiple columns size, without a markup error related to close the elements.
The following code is correct syntactically, but it doesn't respect the layout (the col-md-4 is in a new row)
<body>
<header>
<!-- menu -->
</header>
<div class="container">
<main>
<article>
<div class="row">
<div class="col-md-12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Etc., etc.</p>
</div>
</div>
</article>
</main>
<div class="row">
<aside class="col-md-4">
<p>Lorem ipsum</p>
</aside>
</div>
<div class="row">
<footer class="col-md-12">
<p>Lorem ipsum</p>
</footer>
</div><!-- container -->
</body>
</html>
What do you suggest?
Thanks
"Green" column, .col-md-4 should be a sibling of "orange" column .col-md-8. They need to have the same .row parent. In other words, they should be next to each other, that way the sections won't break. Here is how I would do it:
<header>
<div class="container">
<div class="row">
<div class="col-md-12">header</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-12">orange section</div>
</div>
<div class="row">
<div class="col-md-12">orange section</div>
<div class="col-md-12">green section</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">footer</div>
</div>
</div>
</footer>
I have three different divs that should be displaying one after the other, but they just jump right up to each other on the webpage. Here is the code for all of them:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="top-section">
<center>
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</center>
</div>
<div class="begin-tour">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>
some text
</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
The best way to explain what happens is through a photo.
I've added the 3 divs into the bootstrap container, took out center(it is not used anymore or supported by HTML5), put each div as a 12 column row(col-md-12 class) so they show up one after the other like you wanted:
<div class="container">
<div class="row">
<div class="top-section col-md-12">
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</div>
<div class="begin-tour col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>some text</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
Here is the plunker so you can see it.
Please let me know if this helps. I didn't see your image until now so I hope it helps.
I have a lot of contents in my paragraph and I need to wrap image with the content.
How can I do this?
<div class="row">
<div class="col-sm-6>
<img src="something/something.jpg alt="something" />
</div>
<div class="col-sm-6>
<p>some loooong text</p>
</div>
</div>
If you have to use col-sm-6, this gives you something similar to your link in the comments:
<div class="row">
<div class="col-sm-6">
<p>First paragraph...</p>
<p>Second paragraph....</p>
</div>
<div class="col-sm-6">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>Third paragraph...</p>
</div>
</div>
I have a page with some bootstrap wells: http://jsfiddle.net/LmwbkLo6/
<div style="margin:15px;">
<br>
<div class="well">
<div class="col-sm-8">
<h4>Test Title</h4>
<p>Some test text</p>
<p>More text..</p>
</div>
<div class="col-sm-4">
</div>
<p>And Some Text Here
<p>
</div>
</div>
Im having an issue with the content overflowing the parent containers.
For Example, the content here is overflowing the Well div. I can "fix" this by adding class="col-xs-12" to the Well Div, but then the div itself will overflow the outer div.
Does anyone have any Ideas?
You need to wrap your class="col-* divs in <div class="row"></div> or it will not apply the negative margin.
Here is how it should look like.
<div style="margin:15px;">
<br>
<div class="container-fluid">
<div class="row">
<div class="well">
<div class="col-sm-8">
<h4>Test Title</h4>
<p>Some test text</p>
<p>More text..</p>
</div>
<div class="col-sm-4">
</div>
<p>And Some Text Here<p>
<p>And Some Text Here<p>
<p>And Some Text Here<p>
<p>And Some Text Here<p>
</div>
</div>
</div>
</div>