I'm using Bootstrap I have coded this:
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="slider-slick-img container">
<div class="slider-for">
IMAGE GOES HERE
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
</div>
</div>
And the result of this code goes here:
As you can see it separates the columns of images and the column of contents (product title, product description & etc).
However they are both placed in one row class.
So how to properly place them together in one row as the expected result shows here?
Expected Result:
UPDATE #1
If I remove col-lg-12 col-md-12 col-sm-12 from <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5"> of the images column & content column, and also add col-6 instead of col-12 to both column classes, this result will appears:
However, as you can see, the content looks thinner and still have differences with the Expected Result image.
So how to solve this issue?
You're repeating the classes and simply complicated everything here, you have to define where you want break to full row it'll automatically break at that screen size, you needn't explicitly add another class, adding too many classes will confuse you and anyone who has to understand the code later. https://getbootstrap.com/docs/4.0/layout/grid/
<header>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</header>
<div class="container">
<div class="row">
<div class="col-sm-6 ">
<div class="">
<h1>
Cat
</h1>
<p>
The cat is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.
</p>
</div>
</div>
<div class="col-sm-6 ">
<div class="slider-slick-img container">
<div class="slider-for">
<img src="https://static.toiimg.com/photo/msid-67586673/67586673.jpg?3918697" width="100%" />
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
<img src="https://static.toiimg.com/photo/msid-67586673/67586673.jpg?3918697" width="100px" />
</div>
</div>
</div>
</div>
</div>
</div>
In both of your columns you have added the class col-12 which means that by default those columns will take all the row UNTIL you reach the first breakpoint which in this case would be col-sm. In order to fix this you have to specify col-6 instead of col-12 and if you check it in a screen size smaller than sm you'll notice each column is taking up to 6 places in the grid layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="slider-slick-img container">
<div class="slider-for">
IMAGE GOES HERE
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
<div class="col-6">
CONTENT GOES HERE
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Putting the div with content first and the one with the image after appears to mirror this layout correctly.
To define columns of equal width nothing more is needed than using class .col on each of them, as per official documentation (Bootstrap 5.0)
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
<div class="col">
<div class="">
IMAGE GOES HERE
</div>
<div class="">
<div class="">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
</div>
Remove container class applied with slider-slick-img. It is not needed. And kindly share the link to your code where we can check with actual content(images and add to cart box). Else, with these texts, it is working fine here.
You should not set 12 on lg screen for both div,
set 8,4 on xl,lg
set 6,6 on md
and set 12,12 on sm.
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="slider-slick-img container">
<div class="slider-for">
IMAGE GOES HERE
</div>
<div class="slider-nav mt-5">
<div class="item px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12 mb-xl-0 mb-lg-5 mb-md-5 mb-sm-5 mb-5">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
</div>
</div>
I solved your issue by opting for full responsive col's using grid system as shown in my code.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="">
CONTENT GOES HERE
...
</div>
</div>
<div class="col">
<div class="">
IMAGE GOES HERE
</div>
<div class="">
<div class="px-2">
THUBMNAIL GOES HERE
</div>
</div>
</div>
</div>
</div>
You should also include the meta tag "viewport" for your html code to be processed correctly by the browser.
<meta name="viewport" content= "width=device-width, initial-scale=1.0", shrink-to-fit=no">
You can try putting this in the section of your work.
Related
I'm making a responsive layout for a ecommerce productdetailpage. I would like to order the columns different on mobile without getting white spaces. This is what it looks like currently:
The problem is on desktop when for example there is not content for box 3. There will be a huge white gap above box 5. So box 5 has to move under box 2. Like this:
I don't know if this is even possible through using framework Bootstrap 4, if not I'm looking forward to see how you would doing this without. Hopefully someone can help me out.
For the structure i use the following bootstrap grid:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-lg-7">
1
</div>
<div class="col-lg-5">
<div>2</div>
<div>3</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
4
</div>
<div class="col-lg-5">
5
</div>
</div>
It is necessary to know what layout should be applied, e.g. though JavaScript. Then when we will know what layout should be used, we can apply our layout.
So we car create a div and divide this div into two parts. Then using flex-grow property, we can fill the remaining space:
html,body{height:100%;}
.bg-purple {
background: rgb(48,0,50);
}
.bg-gray {
background: rgb(74,74,74);
}
.bg-blue {
background: rgb(50,101,196);
}
.bg-red {
background: rgb(196,50,53);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-6 bg-red">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-purple flex-grow-1">
<div class="text-white">
<div>1</div>
</div>
</div>
<div class="row justify-content-center bg-blue flex-grow-1">
<div class="text-white">4</div>
</div>
</div>
</div>
<div class="col-6 bg-gray">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-info" style="height: 30px;">
<div class="text-white">
<div>Column with fixed height 2</div>
</div>
</div>
<div class="row justify-content-center bg-success flex-grow-1">
<div class="text-white">Fille the remaining space 5</div>
</div>
</div>
</div>
</div>
</div>
An example at jsfiddle can be seen here
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
<div class="col-sm-4" style="background-color:orange;">33.33%</div>
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
</div>
</div>
I have the following (kind of) code :
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="min-height: 100vh;">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row">
<div id="logo-frame" class="col d-flex justify-content-center align-items-center">
<img src="https://via.placeholder.com/1000x300" class="img-fluid overflow-auto">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
</div>
The image is of loaded dynamically and can be of any size and aspect ratio.
I want the div #logo-frame to :
take up all vertical space available (the container has min-height: 100vh but I'm not sure how to have the div eat it all up with flexbox) and pad the image with whitespace if required
have the image inside centered horizontally and vertically (I think I got it covered with justify-content-center align-items-center)
show a scrollbar if the height becomes too big to show the image (e.g with https://via.placeholder.com/1000x2000) but only on the image, not on the full page (I think the overflow-auto is enough, but not sure...)
How can I achieve this behavior easily with flexbox ?
Thanks
UPDATE
The following code is working.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="height : 100vh">
<div class="row h-100">
<div class="col-8 h-100">
<div class="card h-100">
<div class="card-body d-flex flex-column h-100">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row h-100 overflow-auto">
<div id="logo-frame" class="col d-flex justify-content-center align-items-center">
<img src="https://via.placeholder.com/1000x300" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
</div>
</div>
Can someone help me understand :
if it is possible to not have to cascade down the h-100 ?
why if I put min-height:100vh instead of height:100vh, it does not work ?
why if I don't put d-flex flex-column on the card-body element, it does not work
if there's a better way to make this work ?
Have you considered using the "max-height" css attribute in the parent container in conjunction with an auto scroll on overflow?
Update per your request
<!-- Add Slimscroll library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js" rel="stylesheet" />
Refactored Markup
<div class="container-fluid" style="min-height: 100vh;">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
header
</div>
</div>
<div class="row">
<!-- as indicated in style attribute: Add a class w/these attribs/values -->
<div id="logo-frame" style="max-height: 1000px; overflow: hidden;" class="col d-flex justify-content-center align-items-center">
<!-- you might need to remove the css selector: overflow-auto from the class attrib (Test it) -->
<img src="https://via.placeholder.com/1000x1200" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
footer
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
side
</div>
</div>
</div>
</div>
Instantiate Slimscroll on load
$(document).ready(function () {
$('#logo-frame').slimScroll({
// According to slimscroll documentation - leave height empty
height: '',
width: '100%',
alwaysVisible: false
});
})
I have to re-arrange column in small screen column which are in following sequence 1,2,3 should show as 3,1,2 in small screen.
It works fine with two but i am not sure how to make it work with three column with the following structure
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-md-6" style="background-color:lavender;">1</div>
<div class="col-md-3" style="background-color:lavenderblush;">2</div>
<div class="col-md-3" style="background-color:green;">3. This should be first one on small screen</div>
</div>
</div>
https://codepen.io/anon/pen/zjZJRG
I tried few but it breaks the design not sure if it will work with three column.
As you are working with BS3, you can use the following HTML structure:
<div class="row">
<div class="col-xs-12 col-md-3 pull-right">3</div>
<div class="col-xs-12 col-md-6">1</div>
<div class="col-xs-12 col-md-3">2</div>
</div>
Demo:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-xs-12 col-md-3 pull-right" style="background-color:green;">3. This should be first one on small screen</div>
<div class="col-xs-12 col-md-6" style="background-color:lavender;">1</div>
<div class="col-xs-12 col-md-3" style="background-color:lavenderblush;">2</div>
</div>
</div>
If you are using bootstrap 4 then you can use flex class to manage that. In this case you can use order-*.
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row d-flex">
<div class="col-md-6 order-sm-2" style="background-color:lavender;">1</div>
<div class="col-md-3 order-sm-1" style="background-color:lavenderblush;">2</div>
<div class="col-md-3 order-sm-0" style="background-color:green;">3. This should be first one on small screen</div>
</div>
</div>
</body>
</html>
Here is a code I tried but not working especially in mobile view
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="col-sm-4">
<div class="product_body">
<div class="prod_image">
<img src="images/product/1.png">
</div>
<div class="prod_details">
<h4>Teddy bear</h4>
<div class="row">
<div class="col-xs-12 col-md-6 prod_price">
RS 333
</div>
<div class="col-xs-12 col-md-6 prod_offer">
88% OFF
</div>
</div>
</div>
</div>
</div>
If I'm understanding correctly, You need a <div class="row" before col-sm-4.
EDIT: From your screenshot, I don't see a container, which you will need. Maybe it is already included but I cant see it.
You need to have <div class="container"> <div class="row"> <div class="col-sm-4">
Try removing the other divs first to see if that fixes your problem, then work on adding others in.
I need to reorder these columns in a certain order for screens smaller the col-md in bootstrap. I tried this answer Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3 and it works for just 3 columns but not for the specific way the columns need to stack in mobile view. This way works but it feels dirty hiding and un-hiding the columns. Is there a cleaner way to accomplish this?
Desktop View here
Mobile View here
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 visible-md visible-lg">
<div class="col-md-4"><div class="well">1</div></div>
<div class="col-md-4"><div class="well">2</div></div>
<div class="col-md-4"><div class="well">ad1</div></div>
<div class="col-md-4"><div class="well">3</div></div>
<div class="col-md-4"><div class="well">4</div></div>
<div class="col-md-4"><div class="well">ad2</div></div>
<div class="col-md-4 col-md-push-8"><div class="well">ad3</div></div>
</div>
<!--col-md-12 visible-md visible-lg -->
<div class="col-xs-12 visible-xs visible-sm">
<div class="col-xs-12"><div class="well">ad1</div></div>
<div class="col-xs-12"><div class="well">1</div></div>
<div class="col-xs-12"><div class="well">ad2</div></div>
<div class="col-xs-12"><div class="well">2</div></div>
<div class="col-xs-12"><div class="well">3</div></div>
<div class="col-xs-12"><div class="well">ad3</div></div>
<div class="col-xs-12"><div class="well">4</div></div>
</div>
<!-- col-xs-12 visible-xs visible-sm -->
</div>
<!-- row -->
</div>
<!-- container -->
</body>
</html>
Codepen here
Please check:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row hidden-xs hidden-sm">
<div class="col-md-8"><div class="well">728x90 Ad</div></div>
</div>
<div class="row">
<div class="col-md-8"><div class="well">Title</div></div>
<div class="col-md-4"><div class="well">ad1</div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="well">1</div></div>
<div class="col-md-4 col-md-push-4"><div class="well">ad2</div></div>
<div class="col-md-4 col-md-pull-4"><div class="well">2</div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="well">3</div></div>
<div class="col-md-4 col-md-push-4"><div class="well">ad3</div></div>
<div class="col-md-4 col-md-pull-4"><div class="well">4</div></div>
</div>
</div> <!-- container -->