I've written a basic code like this for experimental purposes:
<!doctype html>
<html lang='en'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<style type="text/css">
.pos {
position: relative;
}
.well1, .well2 {
position: relative;
height: 380px;
}
</style>
</head>
<body>
<div class="container pos">
<div class="col-sm-12">
<div class="well"></div>
</div>
<div class="col-sm-6">
<div class="well well1"></div>
</div>
<div class="col-sm-6">
<div class="well well2"></div>
</div>
<div class="col-sm-12">
<div class="well"></div>
</div>
</div>
</body>
</html>
This is the output:
But the same layout doesn't appear in mobile screens.
How can I fix it?
In Bootstrap,the col-xx-x classes are relative to specifics media queries. So here, you'll have to had the class col-xs-6 if you want your 50% column to stay 50% when you are below 767px. Your markup should look like this :
<body>
<div class="container pos">
<div class="col-sm-12">
<div class="well"></div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="well well1"></div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="well well2"></div>
</div>
<div class="col-sm-12">
<div class="well"></div>
</div>
</div>
</body>
Related
I am trying to get two cards beside each other but no matter what I do they end up underneath each other. I have them in the same row, in the same container but it still won't work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class ="container-fluid">
<div class="row">
<div class ="col-2" style="width: 170px;">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-2" style="width: 170px;">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>
Try this,
Some containers removed. Your cards are now in a column each and both columns are inside a row.
col-6 will make the columns 50% width each, you can make them thinner or wider using col-1 to col-12. The cards will also fill that width as long as you do not dictate any card sizes in your CSS!!
Adding class="img-fluid" to the images and removing the styled size you entered will make the images stay at the column width no matter the screen size.
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<img src="http://placehold.jp/150x150.png" class="img-fluid" alt="Avatar">
<h6><b>John Doe</b></h6>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="http://placehold.jp/150x150.png" class="img-fluid" alt="Avatar">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
You have two syntax errors:
An extra div closer </div>
and extra body closer </body>
I added class="col" to the second card div
Note by using the forced width on the first column, on small screens you may not see all of that image in columns 1 and 2 set by col-2 you have.
I removed some style= and made classes instead (always try to style wit CSS and classes
We have NO idea what your CSS file does and now this may impact answers negatively. This is the main reason I left some of the markup I would normally NOT do such as the containers around the text on the cards.
.first-column {
width: 170px;
}
.card-image {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-2">
<div class="card first-column">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Second example with standard card use
.card-image.card-img-top {
width: 100%;
height: 150px;
}
.card-img-top {
width: 100%;
}
.card-title {
font-weight: bold;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<body>
<div class="container-fluid">
<div class="d-flex">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image card-img-top">
<div class="card-body text-center">
<h6 class="card-title">John Doe</h6>
</div>
</div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image card-img-top">
<div class="card-body text-center">
<h6 class="card-title">John Doe</h6>
</div>
</div>
</div>
</div>
</body>
I want to add a gap between each column. If I add a margin property the columns do not fit in one row. How could I achieve 4 columns each row with gaps?
<style>
.test {
border: 5px solid red;
}
</style>
<div class="container-fluid test">
<div class="row">
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
<div class="col-md-3 test m-2">
Hello
</div>
</div>
</div>
enter image description here
EDIT:
I think I overlook something ...
This works fine:
.gap {
margin: 10px;
border: 1px solid black;
width: fit-content;
padding: 10px;
}
.row {
display: flex;
border: 1px solid black;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<!-- Basic Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styletest.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 gap">
columns 1
</div>
<div class="col-sm-3 gap">
columns 2
</div>
<div class="col-sm-3 gap">
columns 3
</div>
<div class="col-sm-3 gap">
columns 4
</div>
<div class="col-sm-3 gap">
columns 5
</div>
</div>
</div>
</body>
</html>
but if I add the latest bootstrap reference it does not work.
Like this:
.gap {
margin: 10px;
border: 1px solid black;
width: fit-content;
padding: 10px;
}
.row {
display: flex;
border: 1px solid black;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<!-- Basic Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styletest.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 gap">
columns 1
</div>
<div class="col-sm-3 gap">
columns 2
</div>
<div class="col-sm-3 gap">
columns 3
</div>
<div class="col-sm-3 gap">
columns 4
</div>
<div class="col-sm-3 gap">
columns 5
</div>
</div>
</div>
</body>
</html>
Margins are essential to how the grid columns work. Instead adjust the padding to effect the space around the content of the columns...
https://codeply.com/go/YySEuVELp6
<div class="container-fluid test">
<div class="row">
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
<div class="col-md-3 p-2">
<div class="test">Hello</div>
</div>
</div>
</div>
Note: The space between columns is known as the "gutter".
.background {
background: blue;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test1</h1>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test2</h1>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 background">
<h1>test3</h1>
</div>
</div>
</div>
</div>
https://codepen.io/justmemaarten/pen/mgYOGV
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 :)
I just can not understand how to arrange the blocks so that col-sm-3 was on the sides, and col-sm-6 in the center, but the html code should go that way.
<div class="col-sm-6" style="background-color:red; color:#fff;">center</div>
<div class="col-sm-3 pull-left" style="background-color:blue; color:#fff;">left</div>
<div class="col-sm-3 pull-right" style="background-color:green; color:#fff;">right</div>
the code itself is
<!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.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="col-sm-6" style="background-color:red; color:#fff;">center</div>
<div class="col-sm-3 pull-left" style="background-color:blue; color:#fff;">left</div>
<div class="col-sm-3 pull-right" style="background-color:green; color:#fff;">right</div>
</div>
</body>
</html>
Bootstrap V3 use float so the column are already left floated so only the pull-right will have an effect.
So why not simply change the order and don't forget row inside container (I changed sm by xs so we can see the result in the reduced snippet)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-3" style="background-color:blue; color:#fff;">left</div>
<div class="col-xs-6" style="background-color:red; color:#fff;">center</div>
<div class="col-xs-3" style="background-color:green; color:#fff;">right</div>
</div>
</div>
And if you want to keep the same code consider upgrading to the V4 of bootstrap where you can easily handle this with flex and order:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-6 order-2" style="background-color:red; color:#fff;">center</div>
<div class="col-3 order-1" style="background-color:blue; color:#fff;">left</div>
<div class="col-3 order-3" style="background-color:green; color:#fff;">right</div>
</div>
</div>
By the way, You can add some custom CSS with the V3 and your intial code to achieve what you want but I don't recommend (only use in case you cannot do any changes):
.custom {
display: inline-block;
float: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6 custom" style="background-color:red; color:#fff;">center</div>
<div class="col-xs-3 pull-left" style="background-color:blue; color:#fff;">left</div>
<div class="col-xs-3 pull-right" style="background-color:green; color:#fff;">right</div>
</div>
</div>
As you don't want to change your HTML you can use the concept of col-push and col-pull of bootstrap3
Note: Remember to use a parent class for to preventing change globally in col-* classes. I have used a class change for reference here
.change .col-xs-6 {
left: 25%;
}
.change .row .col-xs-3:not(:last-child) {
right: 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container change">
<div class="row">
<div class="col-xs-6" style="background-color:red; color:#fff;">center</div>
<div class="col-xs-3 pull-left" style="background-color:blue; color:#fff;">left</div>
<div class="col-xs-3 pull-right" style="background-color:green; color:#fff;">right</div>
</div>
</div>
Or in any case if you can change the HTML which I recommend use col-push and col-pull or just put it in order
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container change">
<div class="row">
<div class="col-xs-6 col-xs-push-3" style="background-color:red; color:#fff;">center</div>
<div class="col-xs-3 col-xs-pull-6" style="background-color:blue; color:#fff;">left</div>
<div class="col-xs-3" style="background-color:green; color:#fff;">right</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 main-container">
<h1>Welcome</h1>
<hr>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-2">
<img class="pull-left" src="http://placehold.it/32x32"/>
</div>
<div class="col-sm-4">
<h3>Capture Everything.</h3>
<p>Save all your data, data are significant and crucial.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">2</div>
<div class="col-sm-4">2</div>
</div>
<div class="row">
<div class="col-sm-2">3</div>
<div class="col-sm-4">3</div>
</div>
</div>
<div class="col-sm-6">Column 2</div>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</body>
</html>
Below is the working link:
http://jsbin.com/kojorike/1/edit
How can i create a something like below with image in left column and text in right column?
http://postimg.org/image/x24ukc74j/
In bootstrap each class="row" consists out of 12 colums.
meaning you have to use them.
example:
<div class="row">
<p class="col-md-8">text text text</p>
<img src="/image.jpg" class="col-md-4" />
</div>
Note. you can use class="col-md-offset-5" to add a spacing between the previous element.