I can't seem to work out why my columns are overlapping in bootstrap
I've checked that my columns add up to 12
After "row" class there is always a column class
I have added my full code in a fiddle:
https://jsfiddle.net/exubnw4a/
As you can see , a lot of these values are getitng pushed together, when it should be 4 separate tables
Here is a shortened down version of my code:
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
</div>
</div>
</div>
Your table contains more rows which take more width than the 25% of col-md-3 class. You can make use of table-responsive class in such cases.
SAMPLE
Starting at md (medium, around 992 pixels), the main 4 divs are shrinking to 25% due to class="col-md-3". Remove that and it will go back to desired 100% at all sizes. See this screenshot showing how removing that causes it to work for the table on which it is removed:
If you want to place 4 elements in 1 row, make sure that they are all inside the same Bootstrap "row" class. In your case, you have to put all your tables in one row instead of creating a new row for each table.
Related
If I have a scenario using Bootstrap 5 like...
<div class="container">
<div class="row row-cols-auto">
<div class="col">One</div>
<div class="col">Two</div>
<div class="col">Three</div>
</div>
</div>
All columns currently take whatever width their content needs.
I want column two to be as wide as it can be without interfering with the display of columns one and two.
Is this possible with Bootstrap alone or would I need to rely on additional CSS styling?
Just found the answer. Make all columns EXCEPT the one I want to take up all the space col-auto. Make that one class="col".
<div class="container">
<div class="row">
<div class="col-auto">One</div>
<div class="col">Two</div>
<div class="col-auto">Three</div>
</div>
</div>
I have got an array whose elements I populate in a div as follows:
<div align="center" ng-show="showWords" class="container">
<div ng-repeat="word in whichArray" ng-if="$index % 2 == 0" class="row">
<h4><div class="col" style="padding-left:9cm; padding-right:5cm">{{whichArray[$index]}}</div></h4>
<h4><div class="col">{{whichArray[$index + 1]}}</div></h4>
</div>
</div>
This looks like following:
The jsfiddle I referred to http://jsfiddle.net/vm3j4akp/ has such elements populated in a very clean way (i.e. there is enough space between adjacent elements and all second elements on each row start at the same position)
I am using however Ionic so I will have to use Ionic grid and not the bootstrap grid. How can I rearrange these divs nicely?
what does class="col" mean? we have to use some width like col-sm-6 instead only class col. we can remove padding in style also
I managed a work around like this:
<div align="center" ng-show="showWords" >
<div ng-repeat="word in whichArray" ng-if="$index % 2 == 0" class="row">
<div class="col" align="left" style="margin-left:9cm;">{{whichArray[$index]}}</div>
<div class="col" align="left">{{whichArray[$index + 1]}}</div>
</div>
</div>
I don't know how to make this kind of col 3 and 6 size.
Middle column has no padding, but it is not enough.
I was trying to make different sizes of col.
#media (min-width:992px){
.col-md-6 { width: 52,5641%;}
.col-md-3 { width: 23,7179%;}
}
but no success.
With Bootstrap you dont need to add media queries or your own width, just use the BS grid system (you can read more here) and let it handle all the tough work. Based on your picture a 3 column layout would use something like this:
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
Make sure you columns total 12 like above (3+6+3) If you need extra padding in between columns just add a nested DIV and apply the spacing you want to those.
<div class="row">
<div class="col-md-3">
<div class="myclass">
this will have extra padding
</div>
</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
.myclass {
padding: 20px;
}
Updated
Based on your comment if you want column 6 to be slightly larger than it is you will either need to expand that column and "shrink" the outer 2 columns to something like this:
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
If that's not what you are going for then you can create your own table within bootstrap.
<div class="row">
<div class="custom-col">My custom left side</div>
<div class="custom-main">my main column</div>
<div class="custom-col">My custom right side</div>
</div>
Sizing each of the column as you need.
Maybe Bootstrap is not the best option for your problem. It works if only you can divide the screen in 12 equal parts. Rewrite this rule could break other stuff.
What about using flexboxes or other CSS framework more flexible?
I need to build a pyramid of content blocks using the Foundation grid.
The problem is that for rows that are not divisible by 12, I cannot stack the next row in the pyramid so that it is centered under the row above it.
It is like I need a half column offset or something equivalent.
I thought about using .centered on a nested row, but that seems to have the same problem of dividing half columns.
<div class='row'>
<div class='small-1 small-centered columns'>1</div>
</div>
<div class="row">
<div class='small-5 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-5 columns'></div>
</div>
<!--- This row with 3 content blocks is not centered below the previous row --->
<div class="row">
<div class='small-4 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-1 columns'>3</div>
<div class='small-3 columns'></div>
</div>
Fiddle:
http://jsfiddle.net/1cq1gqtq/
I would use block grid instead. The block grid utility will fill up whatever available space is created by the row above.
See the Foundation docs for examples of how to use it: http://foundation.zurb.com/docs/components/block_grid.html
I use this a lot when I need no padding on the left/right sides of the outer columns.
I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.
See on Jsfillde
Here's my code
<div class="container">
<div class="row" style="padding:13px 15px;">
<div class="pull-left span4">
<img src="themes/custom/img/logo.png" width="120" alt="logo"/>
</div>
<div class="pull-right span4">
<div class="row">
<div class="col-sm-4">One</div>
<div class="col-sm-4">Two</div>
<div class="col-sm-4">Three</div>
</div>
</div>
</div>
</div>
I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.
What am i doing wrong?
Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle
Futher reading - http://getbootstrap.com/css/#grid-options
I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.