Bootstrap 4 div after the row causes issues for columns - html

In bootstrap grid, if I add another class after the row, then the columns are messed up. So in this example, the content is shown below each other instead of having two equal columns
<div class="row">
<div class="inside">
<div class="col-sm-6">
<p>sample content</p>
</div>
<div class="col-sm-6">
<p>sample content</p>
</div>
</div>
</div>
here is a live demo using bootstrap 4 with problem
and here is the live demo with bootstrap 3 which works without any issue.
the same structure works fine on bootstrap 3.x, just not with bootstrap 4.
The issue is with adding <div class="inside"> after row which I should add (I can't remove it). Any solution to fix this issue?

Add the following CSS:
.inside {
display: flex;
flex-basis: 100%;
flex-wrap: wrap;
}
The reason is Bootstrap 4 now uses flex to display grid, so .row basically has a property of display: flex;. You only need to make the inside div replicate the behavior.

Related

HTML, CSS, Bootstrap - Two columns with centering

I am trying to make a little website that should have two columns, and each column should have its content centered.
However, I have noticed that the columns will follow the height of each other, and not act as individual columns. E.g. whenever I add content to one of the columns, the content of the other column will be moved to fit the height of that column.
In the JSFiddle, you can see that the "Hello" on the right side is not completely centered; it has been moved up to stand in line with the first of three "Hello"'s on the left side. I would like it so, that whenever I add content to one column, it doesn't affect the other - so the "Hello" on the right side should ideally stay completely centered.
JSFiddle: https://jsfiddle.net/goupb2ch/1/
I have worked on this for quite a while now. Any ideas? Thanks!
Consider using flexbox to solve your problem: in this case far less code is required.
https://jsfiddle.net/upwgk2u4/
.container {
display: flex;
text-align: center;
height: 100%;
}
.container > div {
flex: 1;
align-self: center;
}
Why not use what's already in Bootstrap 4? No extra CSS is needed.
https://www.codeply.com/go/0zwGz83Cbw
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<div class="col-md-6 align-self-center text-center">
<p>Hello</p>
</div>
</div>
</div>

Bootstrap: How to center content vertically within a column

I have spent hours on this problem now and have read through countless questions, but none of the provided solutions works for me, so I'm now just gonna post my specific problem:
I want to build a row with four columns. The first three columns have pictures in them and the fourth column has a text description that I want to show vertically centered (meaning with an equal margin on the top and bottom that is obviously not fixed, but responsive to changing screen-sizes). Here's the code:
<section>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6">
<img ...>
</div>
<div class="col-lg-4 col-sm-6">
<img ...>
</div>
<div class="col-lg-3 col-sm-6">
<img ...>
</div>
<div class="col-lg-1 col-sm-6">
<div class="container-fluid">
<p>Some text that is supposed to be vertically centered within the column</p>
</div>
</div>
</div>
</div>
</section>
It must have to do something with the Bootstrap specific classes that non of the CSS-based solutions I can find on this works. How can I make it work in this particular example? Feel free to make any changes you want on this part:
<div class="container-fluid">
<p>Some text that is supposed to be vertically centered within the column</p>
</div>
However the rest of the structure should remain unchanged if possible (including the col-lg-1).
Your help is greatly appreciated!
In Bootstrap 4, add "align-self-center"-class to the col, where you want the content centred vertically.
You can use flexbox. Make your outer div, display: flex and use The property align-items to make it's contents vertically center. Here is the code:
#outerDiv{
display: flex;
align-items: center;
flex-wrap: wrap;
}
All you need to do is adding below snippet to your CSS.
just like this.
.row{ display: flex; align-items: center;}
I tried the same code and got output too. if you want to see, download the file and run it.
https://www.dropbox.com/s/0x7iqi6alayd8xg/VerticallyCentered.html?dl=0
The following code will center items perfectly within a div:
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
justify-content: center;

How to use bootstrap to create responsive two-column layout with left column really narrow

I have been using bootstrap responsive 12 column grid layout for my website.
I have the layout like follows (stripped down version for example purpose)
<div class='container-fluid'>
<div class='row'>
<div class='col-md-1'>
Left side contents go here
</div>
<div class='col-md-11'>
Right side contents go here
</div>
</div>
</div>
What I need now, is that the left side column is wider than what I want. How can I make it fixed-length narrow and still use Bootstrap layout?
Any help is appreciated!
A clean solution would be customizing bootstrap to have more columns, like this answer:
How to use bootstrap with 16 or 24 columns
Other alternative is using nested rows, but that could end up with problems like unused space, so my suggestion is customizing bootstrap.
you can make a nested row within a column
For eg-
<div class="row">
<div class="col-md-1">
<div class="row">
<div class="col-md-offset-9 col-md-3"><!-- offset-9 leave space in left and start in last three of column --></div>
</div>
</div>
<div class="col-md-11"></div>
</div>
The issue you're having is an issue with how grid systems work. What they're designed to do is describe a fixed set of column widths: the content of those columns should expand to fill them. What you want is the inverse of this: you want the content to define the width.
You've effectively got three good options, and in order from least -> best in terms of getting what you want with the simplest markup:
Live with it (or have more columns as suggested, say 24).
Put the two columns of content in a block[1], apply display:table; width: 100%;. Make the two child items display:table-cell, use white-space:nowrap on the left-hand one and make the right-hand one width: 99%.
Put the two columns of content in a block[1], apply display:flex, and apply flex:1 to the right-hand child item.
Flex is the best solution, but needs IE10+ if that's an issue.
.container {
max-width: 400px;
margin: 0 auto;
}
[class^="row-"] {
margin: 10px 0;
}
.row-1 {
display: table;
width: 100%;
}
[class^="col-1-"] {
display: table-cell;
}
.col-1-left {
white-space: nowrap;
}
.col-1-right {
width: 99%;
}
.row-2 {
display: flex;
}
.col-2-right {
flex: 1;
}
<div class='container'>
<div class='row-1'>
<div class='col-1-left'>Some content</div>
<div class='col-1-right'>Some content</div>
</div>
<div class='row-2'>
<div class='col-2-left'>Some content</div>
<div class='col-2-right'>Some content</div>
</div>
</div>

Using two columns in a single bootstrap row, how can I vertically centre the text in one?

I'm using Bootstrap 3.
I have a series of rows with two columns. The first column displays text and the second column has an image. I want to vertically centre the text in the first column relative to the row it's in so it aligns nicely with the adjacent image.
Example HTML:
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Some heading</h2>
<p>I want all this text centred relative to the image next door</p>
</div>
<div class="col-sm-6 image">
<img class="img-responsive" src="http://i.imgur.com/cztLHHo.png"/>
</div>
</div>
</div>
Note that I'm using the Bootstrap img-responsive class to correctly resize images for mobile devices.
JSFiddle
What I'm seeing is this:
What I want to achieve is this:
I'm sure this is a commonly performed bit of CSS ninja action but I can't find a good example of it. Can anybody help? I would prefer a CSS solution.
Take a look at this fiddle link
i have used the following property in css
.row
{
display: flex;
align-items: center;
}

Bootstrap grid system row content overlapping other row

I've a problem with grid system of bootstrap, I've 6 elements inside a row, each one with class set to "col-md-2", the problem is that the only first 5 elements are shown on the row, and the 6ยบ jumps to 2nd row. So the 2nd row gets empty spaces.
See the picture.
a piece of code:
<div id="card-listing" class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-2 cardthumnb" data-time="1396739650" data-name="Graceful Charity">
<a id="card-55" href="http://127.0.0.1/~victor/yugiohguia/cards/graceful-charity/">
<div class="card-thunmb">
<img src="http://127.0.0.1/~victor/yugiohguia/wp-content/uploads/2014/04/GracefulCharity-LCYW-EN-ScR-1E.png" />
</div>
<div class="card-title">
<span>Graceful Charity</span>
</div>
</a>
</div>
<!-- other 5 images... -->
</div>
</div>
the only css applied is:
.cardthumnb img {
max-width: 100%;
white-space: normal;
}
.cardthumnb .card-title {
text-align: center;
}
see live
This is not about bootstrap, but your isotope settings.
Make sure you have your configuration object setup correctly, or make a question targeting isotope.