I know its going to be a silly problem, but I am a newbie and its bugging me for a few hours. I am following a container > row > col structure still all my cols are appearing in a same row. As per bootstrap all there should be only 12 columns in a row, and all remaining columns should appear in the next line.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row m-3 p-3">
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
<div class="col text-center">akjsdajkshd
</div>
</div>
</div>
</body>
</html>
I can't find whats wrong here, will appreciate some help.
enter image description here
I recreated your use case in a CodePen sandbox using the following:
<div class="container">
<div class="row">
<div class="col-sm">1</div>
<div class="col-sm">2</div>
<div class="col-sm">3</div>
<div class="col-sm">4</div>
<div class="col-sm">5</div>
<div class="col-sm">6</div>
<div class="col-sm">7</div>
<div class="col-sm">8</div>
<div class="col-sm">9</div>
<div class="col-sm">10</div>
<div class="col-sm">11</div>
<div class="col-sm">12</div>
</div>
</div>
From Bootstrap's documentation on its Grid system:
The above example creates equal-width columns on small, medium,
large, and extra large devices using our predefined grid classes.
Those columns are centered in the page with the parent .container.
When using Bootstrap, you don't necessarily need to use container-fluid, unless you want to set the container width: 100% at all breakpoints (different devices width: Small ≥ 576px, Medium ≥ 768px, Large ≥ 992px, and so on...). See Bootstrap documentation regarding its Container here.
If you want to set all div to have text-center, you could do the following to avoid adding unnecessary classes to your divs.
<div class="container text-center">
...
</div>
I hope this helps solve your problem! Let me know if you have follow-up questions 🙂
Why you are using fluid container? bootstrap design to work as responsive accordingly.
Make below snippet full screen you will get to know, in this approach when ever grid increase more than 12 it will automatically added in new line
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">1</div>
<div class="col-sm-4" style="background-color:lavenderblush;">2</div>
<div class="col-sm-4" style="background-color:lavender;">3</div>
<div class="col-sm-4" style="background-color:lavenderblush;">4</div>
<div class="col-sm-4" style="background-color:lavender;">5</div>
</div>
</div>
</body>
</html>
Related
I currently have a Bootstrap grid that looks as follows:
The code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
<title>Example</title>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="align-self-center">
<h1>Box 1</h1>
</div>
</div>
<div class="row">
<div class="col-6">
<div id="left-panel" class="row justify-content-center">
<div class="align-self-center">
Box 2
</div>
</div>
</div>
<div id="right-panel" class="col-6">
<div class="row justify-content-center">
<div class="align-self-center">
Box 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I would like to add a Box 4 to the grid, as seen below:
How would I amend my code to do this?
Thanks!
Pls Check below one,we used nested div :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
<title>Example</title>
</head>
<body>
<div class="container-fluid border border-dark text-center">
<div class="row justify-content-center">
<div class="align-self-center">
<h1>Box 1</h1>
</div>
</div>
<div class="row border border-dark">
<div class="col-6">
<div id="left-panel col-12 border border-dark" class="row justify-content-center">
<div class="align-self-center border border-dark">
Box 2
</div>
</div>
<div id="left-panel-1 col-12 border border-dark" class="row justify-content-center">
<div class="align-self-center border border-dark">
Box 4
</div>
</div>
</div>
<div id="right-panel" class="col-6 border border-dark">
<div class="row justify-content-center">
<div class="align-self-center">
Box 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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'm just trying to experiment with Bootstrap and I cannot make the offset to work and I don't know why. Here's my code:
<div class="container">
<div class="row justify-content-between align-items-stretch">
<div class="col-4 offset-2"> ABC </div>
<div class="col-4"> DEF </div>
</div>
</div>
For some reason the offset-2 doesn't move the column at all. Do you know why?
Thanks in advance,
Hope this will work according to your requirements:-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-between align-items-stretch">
<div class="col-4 col-md-offset-2">
ABC
</div>
<div class="col-4">
DEF
</div>
</div>
</div>
</body>
</html>
how do I achive this in bootstrap. I have a 3 column and want to stay 3 column be it on mobile or desktop.
<div class="container">
<div>
<h1>Example - 3 column div</h1>
<div class="row">
<div class="col-xs-6 col-sm-4">First</div>
<div class="col-xs-6 col-sm-4">Second</div>
<div class="col-xs-6 col-sm-4">Third</div>
</div>
</div>
on desktop
First | Second | Third
on mobile it become like this
First | Second
| Third
I want to achieve this on desktop and mobile
First | Second | Third
Here are the fiddle -> https://jsfiddle.net/y28ugzp6/
Just use one class col-xs-4.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div>
<h1>Example - 3 column div</h1>
<div class="row">
<div class="col-xs-4 ">First</div>
<div class="col-xs-4">Second</div>
<div class="col-xs-4">Third</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>You can define it using md,sm and xs</p>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">Java</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavenderblush;">PHP</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="background-color:lavender;">JQuery</div>
</div>
</div>
</body>
</html>
Set all div's classes to col-xs-4:
<div class="col-xs-4">First</div>
<div class="col-xs-4">Second</div>
<div class="col-xs-4">Third</div>
Better is #Arkej.
But
You can also do like this:
<div class="container">
<div>
<h1>Example - 3 column div</h1>
<div class="row">
<div class="col-xs-4 col-md-4 col-sm-4">First</div>
<div class="col-xs-4 col-md-4 col-sm-4">Second</div>
<div class="col-xs-4 col-md-4 col-sm-4">Third</div>
</div>
</div>
</div>
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 -->