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.
Related
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.
I have more than 12 columns in the row which makes the columns stack vertically, but the top ones have different size compared to bottom ones.
<div class="container-fluid">
<div class="row">
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
</div>
</div>
I am trying to have responsive (allow grow) columns but all columns should carry same width.
You can try insert a col-md-4 with no content or insert only 2 col-md-4 on a row, See if this help you. Look at full screen. (Modified the answer with the help of the comments)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4" id="last-column">
</div>
</div>
</div>
You don't need custom CSS for this. You should use the already defined responsive bootstrap classes for displaying. Also another .row is not needed but could be useful for another row.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
<div class="col-md-4">
4
</div>
<div class="col-md-4">
5
</div>
<div class="col-md-4 d-none d-lg-block">
6
</div>
</div>
</div>
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>
i want to align col-lg-8 with col-lg-4 that contains 2 rows for 2 images, i need those 2 columns align perfectly so they fit each others height
i tried this:
desired look
and what i got
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-2">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Link to CODEPEN
While it is true that you can't depend on Bootstrap to do everything, you don't need any of the additional css "gymnastics" proposed by #derek-gutierrez because with native Bootstrap classes alone you can get done almost everything and most certainly in this particular case here.
The following code is leaner and does everything you want with native Bootstrap classes alone. No extra gymnastics needed. All with perfect paddings/gutter out of the box:
<div class="container">
<div class="row">
<div class="col-lg-8">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
<div class="col-lg-4">
<div class="row">
<div class="col">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
That's the magic of the Bootstrap grid just working.
Notice: You had 2 unnecessary divs (first row and col-lg-12). I cut them out. That was totally useless fat in your code. Don't put in more code than necessary. That reduces the number of potential problems.
Try below code, I hope this is what you are looking for
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-8">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-4">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
</div>
You can't depend on bootstrap to do everything. You are going to add some of your own custom CSS to achieve the effect you want. If you are unfamiliar with css and selectors W3 schools is a good resource.
To achieve this effect add this CSS to the head of your document:
(This is simply to illustrate based off of your example, you will want to be more specific with your selectors if there is going to be more to this page)
<style>
img {
width: 100%; /* Makes imgs match the parent column/container width */
}
#top-image {
margin-bottom: 30px; /* Adds the necessary space to the bottom of the first image */
}
</style>
The columns inside the col-lg-4 should not be col-lg-2. This is basically saying these columns are 2/12ths the size of the container. Instead change them to 12 to span the full width of the container. I also added an id to the first image in this column "id="top-image" to add the necessary margin.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<img src="img/1.png" />
</div>
<div class="col-lg-4">
<div id="top-image" class="row">
<div class="col-lg-12">
<img src="img/2.png" />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img src="img/3.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using bootstrap and trying to get two wells in a row not to be squashed right up against each other but am having trouble.
This is my code:
<div class="container">
<div class="row">
<div class="col-sm-4 well"> first column</div>
<div class="col-sm-4 well"> second column</div>
</div>
</div>
I'm following a tutorial which has the code written as I have done, but their webpage loads with spaces between the wells.
Can anyone suggest how to get them to have a space between them on the row?
Thanks.
According to bootstrap docs
Use the well as a simple effect on an element to give it an inset
effect.
So don't use them with col-*-* instead to achieve what you want you can use them as child of col-*-*
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="well">first column</div>
</div>
<div class="col-xs-4">
<div class="well">second column</div>
</div>
</div>
</div>
INFO:
Default well:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="well">first column</div>
<div class="well">second column</div>
</div>
</div>
Plus you have the optional classes:
Control padding and rounded corners with two optional modifier
classes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="well well-sm">first column</div>
<div class="well well-lg">second column</div>
</div>
</div>