Displaying issue in xs devices using bootstrap - html

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>

Related

How to created nested columns in Bootstrap 4?

I'm trying to created nested columns within the bootstrap nav. I've tried everything. But it seems like only containers possess this sort of functionality. How can I do this inside a bootstrap nav. Attached is an image of how I want things to be and the current code that I have (which currently has alignment issues).
<nav class="container">
<div class="row">
<div class="col-6 col-md-2">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<div class="col-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<ul class="row navbar-nav col-12 col-md-8">
<li class="nav-item col-4">hello</li>
<li class="nav-item col-4">hello</li>
<li class="nav-item col-4">hello</li>
</ul>
</div>
</nav>
nav mobile

Try this, The image you tag in your question i am doing this code for that only. Check and tell me you want the same.
<!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/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="container">
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
</div>
</nav>
</body>
</html>

Columns won't horizontally align with Bootstrap

I'm unable to horizontally align my columns in bootstrap. What I'm wanting is the image to be on the left, and the text to be on the right, but it keep stacking vertically. Can I get some help with this?
From my understanding, col-md-6 will split the page into 2 columns, and col-xs-12 will stack them vertically on mobile, but it doesn't seem to be doing that for me. Is something I'm doing that's overriding the default bootstrap css?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-xs-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-xs-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-xs-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-xs-12 col-md-8">
github
</div>
<div class="col-xs-12 col-md-8">
linkedin
</div>
<div class="col-xs-12 col-md-8">
twitter
</div>
<div class="col-xs-12 col-md-8">
blog
</div>
<div class="col-xs-12 col-md-8">
resume
</div>
</div>
</div>
</div>
</body>
</html>

first of all, you need <div class = "row"> for every row of content you want to insert. That could be messing up your layout.
Example from your code:
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
</div>
and so on.

This should solve your issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-xs-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-xs-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-xs-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-xs-12 col-md-8">
github
</div>
<div class="col-xs-12 col-md-8">
linkedin
</div>
<div class="col-xs-12 col-md-8">
twitter
</div>
<div class="col-xs-12 col-md-8">
blog
</div>
<div class="col-xs-12 col-md-8">
resume
</div>
</div>
</div>
</div>
</div>
</body>
</html>

FYI In Bootstrap-4 there is no class like col-xs-* so you need to replace col-xs-12 with col-12 and you also forget you two columns to wrap with row class I have also checked in your code you need also put one meta tag in your head for require responsive site like
And the updated code is as Follow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<style media="screen" type="text/css">
img {
width: 100%;
}
.btn {
margin: auto;
}
.vertical-center {
height:100%;
width:100%;
}
.left-text {
text-align: left;
}
</style>
</head>
<body class="verticalcenter">
<div class="container vertical-center">
<div class="row">
<div class="col-12 col-sm-12 col-lg-6">
<img src="./profile.jpg">
</div>
<div class="col-12 col-sm-12 col-lg-5">
<div class="row left-text">
<div class="col-12 col-md-8">
<h2>MyStackFlowethOver</h2>
</div>
<div class="col-12 col-md-8">
<h4>web developer</h4>
</div>
<div class="col-12 col-md-8">
github
</div>
<div class="col-12 col-md-8">
linkedin
</div>
<div class="col-12 col-md-8">
twitter
</div>
<div class="col-12 col-md-8">
blog
</div>
<div class="col-12 col-md-8">
resume
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I Think this will help you. Happy code :)

bootstrap 3 column responsive

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>

Need advice on re-ordering bootstrap columns

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 -->

Bootstrap on Chrome Not working

<!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>