<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-2 col-lg-4 col-sm-push-4" style="background-color: blue">
Content C
</div>
<div class="col-12 col-sm-2 col-lg-4 col-sm-push-4" style="background-color: pink">
Content D
</div>
<div class="col-12 col-sm-2 col-lg-2 col-sm-pull-8" style="background-color: purple" >
Content A
</div>
<div class="col-12 col-sm-2 col-lg-2 col-sm-pull-8" style="background-color: purple">
Content B
</div>
</div>
</div>
</body>
So I am trying to achieve the following display on chrome. It works perfectly on safari.
Desktop:
[ 1st col ][ 2nd col ][ 3rd col ][ 4th col ]
Mobile:
[ 3rd col ]
[ 4th col ]
[ 1st col ]
[ 2nd col ]
Is my syntax wrong or am I supposed to include some extra steps. I have tried adding col-xs-4 col-sm-4 col-md-4 to every line but that didn't seem to help or hurt.
So I think the real question is that bootstrap is not rendering for me on chrome. On safari it shows up as link. On chrome it shows up as link.
Thanks for the Help!
Yeah that because you are not adding the columns up to 12
If you wanted it to look like your diagram you can just put the class
<div class="col col-lg-3 col-sm-12"></div>
will do what you are looking for also you might not even need col-sm-12 bootstrap tends to automarically make each column full width if it is not specified for smaller screen widths
Link to jsfiddle for example http://jsfiddle.net/tw1gqocq/1/
update ::::
This is to get the correct ordering.
And bootstrap cdn should start with https://
<div class="container-fluid">
<div class="row">
<div class="col col-lg-3 col-sm-12 col-lg-push-6" style="background-color: purple" >
Content 3rd
</div>
<div class="col col-lg-3 col-sm-12 col-lg-push-6" style="background-color: green">
Content 4th
</div>
<div class="col col-lg-3 col-sm-12 col-lg-pull-6" style="background-color: blue">
Content 1st
</div>
<div class="col col-lg-3 col-sm-12 col-lg-pull-6" style="background-color: pink">
Content 2nd
</div>
</div>
</div>
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.
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>
When my page re-sizes from SM to XS it is adding a white line (almost like a margin space) and I don't know why. If I add a style="margin-top: -1px" it goes away but then messes up the rest of the grid structure. Any ideas as to what is causing this? Below is the code, if you run the snippet and shrink the window you'll see the line appear.
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<title>JPT Email Template Title</title>
</head>
<body>
<div class="container-fluid">
<div class="row" style="margin-top: 20px">
<div class ="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 bg-primary text-center">
<img class="img-responsive center-block" src="http://pages.jerusalemprayerteam.org/rs/591-HWU-361/images/foz-logo.png" style="margin-top: 5px; margin-bottom: 5px">
</div>
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
</div>
<div class="row">
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 text-center bg-primary">
<a href="#">
<img class="img-responsive center-block" src="http://i.imgur.com/i131rzd.jpg" style="margin-bottom: 5px">
</a>
</div>
<div class"col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
</div>
This happens cause you do not use bootstrap properly, you have chosen an option of adding extra divs for offset and it's wrong. Bootstrap has offset for this cases:
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
Your content
</div>
Do not use those extra divs for offset, one of those is giving you this 1px
Columns have a min-height of 1px. So the below creates the white line. Try using .hidden-xs instead.
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
in addition to previous answers, Bootstrap has not class "col-xs-0".
Hello Stackoverflow users,
I am creating a website and the start was going pretty well until I came to the point I will explain in a bit, I have already been trying and looking over my code for hours and Google'd all kinds of things but couldn't find anything similar to my issue. Here's an image of how the webpages currently look, the first obviously medium/large, the middle size small and the last one is extra small.
So, as you can tell from the images something is going wrong, I expected a div not being closed right or something but I can't find anything like that in my code! Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/duo-uniek/" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Home: Welkom - Duo-Uniek.nl</title>
<script src="javascript/jQuery.min.js"></script>
<script src="javascript/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="Javascript/banner.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link id="stylesheet" href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="fluid-container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-horizontal border-bottom header">
<div class="list-group list-inline list-unstyled text-center">
<span class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4 active">Home</span>
<a class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4" href="page/media.html">Media</a>
<a class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4" href="page/info.html">Info</a>
<a class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4" href="page/contact.html">Contact</a>
</div>
</div>
<div class="row-fluid col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
<div class="banner hidden-xs hidden-sm col-md-12 border-bottom no-padding styling" style="height: 500px;">
<div class="innerBanner col-md-12">
</div>
</div>
<div class="banner visible-sm-block col-sm-12 border-bottom no-padding styling" style="height: 350px;">
<div class="innerBanner col-sm-12">
</div>
</div>
<div class="banner visible-xs-block col-xs-12 border-bottom no-padding styling" style="height: 200px;">
<div class="innerBanner col-xs-12">
</div>
</div>
</div>
<div class="col-sx-12 col-sm-12 col-md-12 col-lg-12 text-center padding-horizontal border-bottom styling">
<div class="col-sx-12 col-sm-4 col-md-2 col-md-push-3 padding-horizontal" style="background-color: black;">
<div class="col-sx-12 col-sm-12 col-md-12" style="background-color: white;">
<p>Test</p>
</div>
</div>
<div class="col-sx-12 col-sm-4 col-md-2 col-md-push-3 padding-horizontal" style="background-color: black;">
<div class="col-sx-12 col-sm-12 col-md-12" style="background-color: white;">
<p>Test</p>
</div>
</div>
<div class="col-sx-12 col-sm-4 col-md-2 col-md-push-3 padding-horizontal" style="background-color: black;">
<div class="col-sx-12 col-sm-12 col-md-12" style="background-color: white;">
<p>Test</p>
</div>
</div>
</div>
<div style="background-color: orange;">
<p>Home</p>
</div>
</div>
</body>
</html>
This code is from 'show page source' as my code is mostly being generated by PHP but unless I'm really stupid I checked everything and nothing was wrong. I really don't know what to do, everything I tried didn't help and I really have to get this fixed... I hope someone here can!
Best regards,
Jesse
You have a typo col-sx-12 it should be col-xs-12
In case of XS devices I want to display column B before col A. But the results is very odd. Any idea how to overcome this?
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2 col-xs-push-12">A</div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 col-xs-pull-12">B</div>
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">C</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2 col-xs-push-12">A</div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 col-xs-pull-12">B</div>
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">C</div>
</div>
</div>
</body>
</html>