I noticed that the children in the bootstrap 4 grid columns can exceed the width of their columns. Is this a bug in Bootstrap 4 or do we have to explicitly set the max-width for its children?
body {
padding: 12px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-outline-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolore vitae fuga debitis recusandae eius nam, neque reprehenderit perferendis corrupti, autem quo nemo consequuntur delectus deleniti quisquam repellat quidem vel!</button>
</div>
<div class="col-xs-4">hello</div>
<div class="col-xs-4">oasfhsaolf</div>
</div>
</div>
Actually, the col-xs-4 children are behaving just fine - it's the button that's the rebel :) You can see this by inspecting the elements and seeing that those column children are the correct width.
This button behavior is because bootstrap's .btn class has white-space: nowrap, telling the button to not wrap its enclosed text.
Depending on how you want the button to show, you can add a custom white-space css property (like inherit) to override the bootstrap styling for the button:
body {
padding: 12px;
}
.btn.btn-outline-primary {
white-space: inherit;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-outline-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolore vitae fuga debitis recusandae eius nam, neque reprehenderit perferendis corrupti, autem quo nemo consequuntur delectus deleniti quisquam repellat quidem vel!</button>
</div>
<div class="col-xs-4">hello</div>
<div class="col-xs-4">oasfhsaolf</div>
</div>
</div>
Try to remove the button and the bootstrap grid follow the rules
look at this http://jsbin.com/naruqutaqo/edit?html,output
Related
I'm currently facing trouble when making layout. In the below picture, i want to make the content columns on the right ( title,lorem...) scale to fit height of the image on the left. How can I do it?
I'm using Bootstrap v5.1.1
Current image:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-4 black h-100">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="" style="width:300px;">
</div>
</div>
<div class="col-8">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
Use Bootstrap's flex grid (which is the default) rather than setting column sizes.
Use the col-auto class on your image column to make it collapse to the image's width.
Don't set inline sizing on your grid or your content. Inline styles make development and maintenance more difficult. Use a class for your image if you like, with a semantic name so you can change the size value for a redesign without the name becoming wrong.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<style>
.size-medium {
width: 200px;
}
</style>
<div class="container">
<div class="row">
<div class="col col-auto">
<div class="col-md-4 black h-100">
<img class="size-medium" src="https://via.placeholder.com/300" alt="">
</div>
</div>
<div class="col">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
</div>
you put the class col-md-4 to the wrong tag
<div class="row">
<img class="col-md-4 p-0" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="">
<div class="col-8">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
All i want to do is have a large block of text on the right hand side of an image. Its driving me crazy. The column containing text drops below the image as soon as the text becomes a certain size or is not given a width, one solution is to add a width to the text column, but isnt the point of bootstrap to not use fixed widths!?
All i have on the css of P is word-wrap: break-word; I have added a height on the image as else its too large - would like to restrict the size of the image to the size of the bootstrap column if that is also possible. I have tried all various css combinations. Sorry, this is probably a regular question, i have seen many answers to this, and tried all of them out. How do i create two columns in a row, one with an image and one with text?! This should be simple! (and probably is!). Thank you and sorry.
nb i am in a laravel project, with bootstrap loaded and the css available.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div id="banner" class="12u" >
<div class="container">
<div class="row">
<div class="col-4">
<img src="{{ asset('images/fun.jpeg') }}" alt="Picture" height="400em" >
</div>
<div class="col-8">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
</div>
</div>
</div>
</div>
I added img-fluid class for the image to be responsive. img-fluid class doing image width: 100% and height: auto. Thus, the image moves responsively according to the container it is in.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div id="banner" class="12u">
<div class="container">
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="Picture" height="400em">
</div>
<div class="col-8">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
</div>
</div>
</div>
</div>
You are doing everything right but not including width="100%" in your img tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="banner" class="12u" >
<div class="container">
<div class="row">
<div class="col-4">
<img width="100%" src="https://images.unsplash.com/photo-1590412513773-fa30db27b485?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="col-8">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
</div>
</div>
</div>
</div>
I have 7 divs.
Since col can only go upto 12.
I cannot use .col-md-2 class to equally divide all.
So, I'm using the .col class to equally divide all.
Now to make it responsive I need to make all div width to 100% in mobile view.
Though col-xs-12 will work, but its not working on same div if i add class="col col-xs-12". Also, I cannot use class="col-md-2 col-xs-12" since I have 7 div's and col-md-2 will break 1 div.
Any suggestions about how to do it.
Since Boostrap 4 has a mobile first mentality, you have to think this way. So first declare the default class col-12 and then get back to desktop with col-md or col-lg depending on your needs.
It's explained better in B4 documentation found here: https://getbootstrap.com/docs/4.3/layout/grid/
So your div's will look like <div class="col-12 col-md"></div>.
Hope this answer helped!
since this question has the answer marked, but I think I still have to clarify some points.
When you use col-md (without col-md-[1-12]) combined with the intention of having 7 equal columns, Bootstrap 4 will use flex-grow: 1; as default. This might lead you to misunderstand that flex-grow: 1; will equally divide parent width into 7 small equal width. This won't work as you though if the content of any div has a width larger than a column width.
There is a simple formula to remember when it comes to flex width, it is:
content —> width —> flex-basis (limted by max|min-width)
There's an excellent article explaining this, you can visit here to see the difference between these two.
Back to your case, let's just say you have a div with 500px width, now all 7 divs won't have the same width. In this case, you should explicitly define a custom column grid. It will look like this:
<div class="container">
<div class="row">
<div class="col col-12 custom-col-7">Data</div>
...
</div>
</div>
#media screen and (min-width: 768px) {
.col.custom-col-7 {
flex: 0 0 auto;
width: calc(100%/7);
}
}
I made a simple sample to illustrate my point, hope this help
.col {
background: lightgreen;
margin-bottom: 50px;
}
#media screen and (min-width: 768px) {
.col.custom-col-7 {
flex: 0 0 auto;
width: calc(100%/7);
}
}
.box {
background: red;
width: 300px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<h4>Using `col-md`</h4>
<div class="container">
<div class="row">
<div class="col col-md col-12">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque officia, culpa, nemo numquam illum totam odio dolorem nisi ad in animi! Sequi illo voluptatem dolores.</div>
<div class="col col-md col-12">Col Data</div>
<div class="col col-md col-12">Col Data</div>
<div class="col col-md col-12">Col Data</div>
<div class="col col-md col-12">
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id</div>
</div>
<div class="col col-md col-12">Col Data</div>
<div class="col col-md col-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id eaque iusto mollitia. Excepturi ea id cumque delectus facilis accusantium cum, ut itaque incidunt mollitia aspernatur, voluptates eligendi quibusdam iste facere sint soluta corporis et laborum porro, molestiae eaque sed molestias?</div>
</div>
</div>
<h4>Using custom column class</h4>
<div class="container">
<div class="row">
<div class="col custom-col-7 col-12">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis inventore aspernatur architecto consectetur nostrum consequatur, esse amet molestias labore fuga quis reiciendis nulla reprehenderit assumenda?a</div>
<div class="col custom-col-7 col-12">Col Data</div>
<div class="col custom-col-7 col-12">Col Data</div>
<div class="col custom-col-7 col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora, nam.</div>
<div class="col custom-col-7 col-12"><div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id</div></div>
<div class="col custom-col-7 col-12">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod eveniet, mollitia accusamus nam consequuntur velit.</div>
<div class="col custom-col-7 col-12">Col Data</div>
</div>
</div>
My agenda is to show an image and Details side by side in laptop and in responsive show them individually.. It works in non-responsive page showing the details side by side with col-md-6, but the code doesnt accept col-sm-12 for showing the details induvidually in responsive state
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0">
<img class="col-img" src="reference/about-us/choice.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
Use img-fluid to image(see Fiddle:https://jsfiddle.net/gpLyvr5w/6/)
Learn here:https://getbootstrap.com/docs/4.0/content/images/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0">
<img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
well the code class="col-md-6 col-sm-12 padding-0" means that at screen ≥576px the element should take full width (aka width:100%) of available width but if the screen is ≥768px then the element should take half the available width (aka width:50%).
So if you need your div containing image and div with details to be side by side on screens ≥768px (usually tablets in portrait mode) then simply use col-md-6 you don't need to specify col-sm-12 as by default div elements are block level elements and take full width of available space.
Also you don't need padding-0 class you can use Bootstrap 4's spacing classes such as p-0, p-1, p-3, pt-1, py-3 etc. to remove or add padding so your final classes should look like this:
class="col-md-6 p-0"
You Need to give the extra class in first col-md-6 i have given class name res and write a media query for that like these
<style>
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
.res{
min-width:100%;
}
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0 res">
<img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
Hi All i have Solved this issue.. had MISSED OUT WITH THE META TAG IN HEADER
http://jsfiddle.net/mgLtz5kg/
<div class="row expanded">
<div class="row expanded paddedrow">
<div class="small-12 medium-4 columns paddedcirclediv">
<div class="small-12 columns circlediv"></div>
</div>
<div class="small-8 columns factoid childbox">
<h3>lorem</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
</div>
</div>
<div class="row expanded">
<div class="small-12 medium-4 columns paddedcirclediv">
<div class="small-12 columns circlediv"></div>
</div>
<div class="small-8 columns factoid">
<h3>ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti iusto, voluptatibus minus assumenda harum ipsum. Beatae in at quam accusantium enim asperiores, hic nulla eum, nihil quae omnis error, labore.</p>
</div>
</div>
</div>
Using foundations small-12, medium-6 style notation how do you approach vertically aligning content in a responsive div. In the codesnippet above I want the content on the right to be middle aligned to correspond to the circular div on the rights centre.
I know this is a popular question but all the responses require me to either define a width, or specifically state where on the page the div is located using 'top' and 'left' tags.
Is that really the way you do it?
Check out this JSFiddle for a solution to your problem: http://jsfiddle.net/61hov4rp/65/. (Tested in latest versions of Chrome, Safari, Opera, Firefox, Tor).
The trick is to use FlexBox. Without it, you will need to hard-code some values, as others have suggested (margins, paddings, heights or widths - it's unavoidable), but FlexBox finally allows you to align content vertically in a responsive flexible-width div.
In future projects you could use Foundation 6, which supports FlexBox. Check out their Flex Grid documentation.