i am using Bootstrap 3, and i have a text within a col and when it's longer, it does not fit the div and overflows it in the width of the box. I have used different display styles, do a lot of search but without success.
<div class="container-fluid">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 col-lg-offset-1 col-md-offset-2">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="http://www.kungfunguyen.com/wp-content/uploads/2013/08/Bootstrap-2-1-Is-the-Latest-Update-to-Twitter-s-Popular-Open-Source-Project.png">
<div class="caption">
Very long text which oveflows the whole div in width.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</div>
</div>
</div>
Example with thumbnail and caption, the same problem
http://jsfiddle.net/zqeLse5q/
Thanks
.caption{
word-wrap: break-word;
}
http://jsfiddle.net/zqeLse5q/2/
Related
I'm trying to do some vertical aligning in Bootstrap and can't seem to achieve it with the various flex box classes (align-items-center etc).
I need the text content in the boxes of the below codepen to be vertically centered ... whilst also each box should match the height of the tallest box (as is currently working)... can anyone help?!
The inner divs need to be wrapped in a link - don't know if thats affecting things?
https://codepen.io/jwacreative/pen/VwjePEj
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4">
<a href="http://">
<div class="summary-box h-100" style="background:red">
<h2>Title</h2>
<p>Some text</p>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<a href="http://">
<div class="summary-box h-100" style="background:green">
<h2>Title</h2>
<p>Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text<< /p>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="summary-box h-100" style="background:blue">
<h2>Title</h2>
<p>Some text</p>
</div>
</div>
</div>
CSS Grid should be able to help with this...
.summary-box {
display: grid;
align-content: center;
}
I'm using bootstrap 4 and trying to create a layout. The problem I'm having is with the responsive.
When the page size gets smaller I want the right-nav to go under the left-nav. The problem I run into is when the main body runs longer than the left nav. The right nave always goes under the main body, is there a way to force it under the left-nav without the space in between?
<div class="container-fluid">
<div class="row pt-5 pl-3 pr-3">
<div id="left-nav" class="d-none d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2">
...
</div>
<div id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">
...
</div>
<div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">
...
</div>
</div>
<section id="footer" class="footer">
<div class="container">
<div class="row">
</div>
</div>
</div>
</div>
Since Bootstrap 4 uses flexbox, cols across a row are always going to be the equal height (set by the height of the tallest).
You can workaround this by "disabling" flexbox at certain breakpoints using d-(breakpoint)-block on the row. By making the row display:block instead display:flex, floats can now be used to float cols to the right or left.
<div class="container-fluid">
<div class="row pt-5 d-md-block d-xl-flex">
<div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
left
</div>
<div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
main
</div>
<div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
right
</div>
</div>
</div>
Demo: https://www.codeply.com/go/A0oYUlPOud
Related:
How to fix unexpected column order in bootstrap 4?
How to make this column ignore the vertical space
Using Bootstrap 3, I'm trying to center a image on its own row. Here is what I have, which responds well across display sizes:
<div class="row">
<div class="col-lg-2 col-lg-offset-5 col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3 text-center">
<img src="img.jpg" class="img-responsive">
</div>
</div>
However, .img-responsive sets max-width: 100%. The image is too large on some displays. For example, I'd rather have col-lg-1 than col-lg-2.
Obviously, I could do col-lg-1 col-lg-offset-5 but the content will be off-center.
Is there an equivalent to col-lg-1 col-lg-offset-5.5, or some other method to center content in this scenario?
I would say no by default. But It can be possible with Bootstrap customize then you can define your custom responsive grid column with #grid-columns. You can specify 16.
<div class="row">
<div class="col-lg-2 col-lg-offset-7 text-center">
<img src="img.jpg" class="img-responsive">
</div>
</div>
Or you can just style your image to be smaller width.
<div class="row">
<div class="col-lg-2 col-lg-offset-5 col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3 text-center">
<img src="img.jpg" class="img-resize img-responsive">
</div>
</div>
<style type="text/css">
.img-resize {
width: 200px;
}
</style>
I'm using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap
I have 4 divs, aligning in a straight line in fullscreen mode.
When the screen is smaller, they get responsive.
But there is a small problem: if one of the divs has a bit more weight then the others, the responsiveness isn't that beautiful.
In fullscreen:
When screen gets smaller:
How it should be:
HTML:
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightskyblue">
<img src="../images/9.png" alt=""/>
</div>
TEXT
<div class="blue_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightgreen">
<img src="../images/12.png" alt=""/>
</div>
TEXT
<div class="green_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle cornflowerblue">
<img src="../images/14.png" alt=""/>
</div>
TEXT
<div class="cornflowerblue_bottom_border"></div>
</div>
EDIT: Putting <div class="clearfix visible-sm-block"></div> after the 2 divs worked.
When using ng-repeat, use this code I wrote:
`<div class="clearfix visible-XX-block" ng-if="$index%2==1"></div><!--For col-XX-6 class-->
<div class="clearfix visible-XX-block" ng-if="$index%3==2"></div><!--For col-XX-4 class-->
<div class="clearfix visible-XX-block" ng-if="$index%4==3"></div><!--For col-XX-3 class-->
<div class="clearfix visible-XX-block" ng-if="$index%6==5"></div><!--For col-XX-2 class-->`
Take a look at responsive column resets.
See: http://getbootstrap.com/css/#grid-responsive-resets
In your case you can add the following code after the second column:
<div class="clearfix visible-sm-block"></div>
So your code looks like this:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightskyblue">
<img src="../images/9.png" alt=""/>
</div>
TEXT
<div class="blue_bottom_border"></div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightgreen">
<img src="../images/12.png" alt=""/>
</div>
TEXT
<div class="green_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle cornflowerblue">
<img src="../images/14.png" alt=""/>
</div>
TEXT
<div class="cornflowerblue_bottom_border"></div>
</div>
</div>
Note that this doesn't change the height of the columns but it fixes the clearing for the sm breakpoint.
You should try to set your divs to the same height then and add a scrollbar if their content is too big to fit in them.
So for example this should be:
<div class="col-xs-12 col-sm-6 col-md-3 box-container">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
And in css:
.box-container {
height: 100px;
overflow: auto;
}
Hope this helps!
You are missing the class=row divs. You have to understand that, on each device, your cols number must be equal to 12 in each row. Also notice that if you get more than 12, you will get this weird behavior.
So, in order to fix that, you need to do something like:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
In XS it is optional to use the clearflix, on there sizes clearflix is not optional. Your SM blocks count are 24. Make sure to create a clearflix after the count reaches 12 just for SM.