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>
Related
I have tried to create a layout using Bootstrap, however I am unable to change the height of my rows. For example, I want the first row height to be 25%, the second 50% and the last 25%. How can I do that?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid">
<div class="row h-25">
<div class="col-12">
<h1>test</h1>
</div>
</div>
<div class="row h-50">
<div class="col-4"></div>
<div class="col-8"></div>
</div>
<div class="row h-25">
<div class="col-10"></div>
<div class="col-2"></div>
</div>
</div>
You need to specify height: 100%; for html,body and the container-fluid
html, body {
height: 100%;
}
.row {
border: thin solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container-fluid h-100">
<div class="row h-25">
<div class="col-12">
<h1>test</h1>
</div>
</div>
<div class="row h-50">
<div class="col-4">height</div>
<div class="col-8">50</div>
</div>
<div class="row h-25">
<div class="col-10">height</div>
<div class="col-2">25</div>
</div>
</div>
The important thing is that your divs must be wrapped inside something else which has a defined height. Otherwise the percentages are meaningless - 25% of what, exactly?
Demo:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div style="height: 100px;">
<div class="h-25" style="background-color: yellow">Height 25%</div>
<div class="h-50" style="background-color: red">Height 50%</div>
<div class="h-25" style="background-color: green">Height 25%</div>
</div>
See also https://getbootstrap.com/docs/4.0/utilities/sizing/
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 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 -->
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>