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>
Related
i am writing a bootstrap code, inside columns i have defined div with background color but, background color roll till content only and due to data variation so, it look uneven data some columns taller and some smaller. I opted this approach because i need spacing between columns so, that it should look like cards with rounded edges. how can i have same height of column.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xl-2">
<div class="rounded" style="background-color:aqua">
<span>some text here</span>
</div>
</div>
<div class="col-xl-2">
<div class="rounded" style="background-color:pink">
<span>some text here</span>
<p>some more text</p>
<p>some more text</p>
</div>
</div>
<div class="col-xl-2">
<div class="rounded" style="background-color:green">
<span>some text here</span>
<p>some more text here</p>
<h5>extra work</h5>
</div>
</div>
</div>
</div>
Basically this is a duplicate.
The columns are the same height because Bootstrap 4 uses flexbox. Just add h-100 (height:100%) to the rounded containers to that the fill the height of the columns.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="rounded h-100" style="background-color:aqua">
<span>some text here</span>
</div>
</div>
<div class="col">
<div class="rounded h-100" style="background-color:pink">
<span>some text here</span>
<p>some more text</p>
<p>some more text</p>
</div>
</div>
<div class="col">
<div class="rounded h-100" style="background-color:green">
<span>some text here</span>
<p>some more text here</p>
<h5>extra work</h5>
</div>
</div>
</div>
</div>
From what I understand of your problem, you want all the .col to be the same height...
Adding CSS property of height: 150px; (enter whatever size you'd like) to the .col. However, if you want the background to be the entire background of the .col, you need to move that to that .col div element (where I put blue and orange).
P.S. the blue and orange is just to show you the height of each .col
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xl-2" style="height: 150px; background-color: orange;">
<div class="rounded" style="background-color:aqua">
<span>some text here</span>
</div>
</div>
<div class="col-xl-2" style="height: 150px; background-color: blue;">
<div class="rounded" style="background-color:pink">
<span>some text here</span>
<p>some more text</p>
<p>some more text</p>
</div>
</div>
<div class="col-xl-2" style="height: 150px; background-color: orange;">
<div class="rounded" style="background-color:green">
<span>some text here</span>
<p>some more text here</p>
<h5>extra work</h5>
</div>
</div>
</div>
</div>
Thought that this requirement was a simple one: The result should be a very basic landing page containing two topics. Each topic has a subtopic.
On mobile, there should be only one column containing Topic1, Subtopic1, Topic2, Subtopic2 consecutively.
On desktop the topics should appear side by side and the subtopics should be vertically aligned.
<div class="container-fluid">
<!-- Subtitles are on the same height but the order on mobile is wrong -->
<div class="row">
<div class="col-md-6">
<h1>Topic 1</h1>
<p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
</div>
<div class="col-md-6">
<h1>Topic 2</h1>
<p>Two lines of text<br>Line2</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Subtopic 1</h2>
<p>Number of lines<br>do not matter</p>
</div>
<div class="col-md-6">
<h2>Subtopic 2</h2>
<p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=md<br>and when <md, Subtopic 1 shold be below Topic 1, not below Topic 2</p>
</div>
</div>
<hr>
<!-- Display on mobile is correct but subtitles on desktop are not aligned anymore -->
<div class="row">
<div class="col-md-6">
<h1>Topic 1</h1>
<p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
<div class="row">
<div class="col">
<h2>Subtopic 1</h2>
<p>Number of lines<br>do not matter</p>
</div>
</div>
</div>
<div class="col-md-6">
<h1>Topic 2</h1>
<p>Two lines of text<br>Line2</p>
<div class="row">
<div class="col">
<h2>Subtopic 2</h2>
<p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=sm<br>and when <sm, Subtopic 1 shold be below Topic 1, not below Topic 2</p>
</div>
</div>
</div>
</div>
</div>
I am badly surprised that I have no idea how to solve this. Any hints are deeply appreciated.
One way would be using order utility classes from Bootstrap and adjusting your markup for all elements to be at the same level:
<div class="container-fluid">
<div class="row">
<div class="order-0 order-md-0 col-md-6">
<h1>Topic 1</h1>
<p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
</div>
<div class="order-2 order-md-1 col-md-6">
<h1>Topic 2</h1>
<p>Two lines of text<br>Line2</p>
</div>
<div class="order-1 order-md-2 col-md-6">
<h2>Subtopic 1</h2>
<p>Number of lines<br>do not matter</p>
</div>
<div class="order-3 order-md-3 col-md-6">
<h2>Subtopic 2</h2>
<p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=md<br>and when <md, Subtopic 1
shold be below Topic 1, not below Topic 2</p> </div> </div> <hr>
</div>
</div>
</div>
Check the documentation here.
Another would be to set either a predefined fixed height for your topic columns, or get the highest topic height and set it to all others with JavaScript at page load and window resize.
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've an issue at my project. At one of my page, I'm using a markup like this:
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
Fiddle: http://jsfiddle.net/learner73/RW747/
So, it'll look like this at desktop:
But, it looks at mobile like this:
It should be like that as bootstrap's responsive layout. No doubt with that. But, definitely, I need step 1, 2 and 3 in serial (not step 1, 3, 2) at mobile:
This will be generated if I arranged my HTML code like this:
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
</div>
</div>
Fiddle: http://jsfiddle.net/learner73/gLjG4/
Now, at mobile, it looks perfect. But, at problem is at the desktop, if the height of "step 2" content is high, it push the "step 3" content below much:
But, it should be like my first image.
Have bootstrap classes or event to handle scenario like this? If not how can I handle this issue properly? Thanks in advance.
Try offsett or column ordering classes.
Now i've tested column responsive reset, it works for your intent
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<!-- reset -->
<div class="clearfix visible-md"></div>
<!-- reset -->
<div class="col-md-6">
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
here the fiddle http://jsfiddle.net/keypaul/9nh86/
You can style it better, but here is an approach using jQuery
Basically, I've splited it into independent divs named "one", "two" and "three", and used this:
$(window).resize(function() {
winWidth = $(window).width();
winHeight = $(window).height();
if(winWidth <= 986) {
$("#two").insertBefore("#three");
} else {
$("#three").insertBefore("#two");
}
});
http://jsfiddle.net/XF6Uq/3/
Here you have another approach. Instead of using insertBefore, I'm using classes.
Basicaly, you float left every div, but the "Step 2" one, you change it to float right when it's "desktop wide"
http://jsfiddle.net/hige/3TPec/
Hope it helps!
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>