I am learning to use bootstrap 3
I have a problem with using push and pull
Normally the rows are centered
but When i use push/pull the row gets aligned left, and go off the left of the screen if the browser is not fullscreen.
why is this
code bellow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Bootstrap 3 Playabout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link rel="stylesheet" href="styles.css">
<script src="bootstrap.js"></script>
<style>
.a
{
background-color:green;
}
.b
{
background-color:blue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4 a col-lg-push-4">One</div>
<div class="col-xs-6 col-md-8 b col-lg-pull-8">Two</div>
</div>
</div>
</body>
You need to switch the push/pull numbers like this:
<div class="col-xs-6 col-md-4 a col-lg-push-8">One</div>
<div class="col-xs-6 col-md-8 b col-lg-pull-4">Two</div>
Working Bootply
Related
So I have very simple code like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="pt-5 bg-info">
<!-- Something -->
</div>
<div class="row pt-4 bg-success">
<!-- Something -->
</div>
But, as a result (of this particular code), I have 2 these blocks with different width. So why it is happened and how to prevent such situations?
The problem is caused by Bootstrap library's internal row class -bs-gutter-x: 1.5rem; to set the property. If you manually overwrite this property, this behavior will be resolved as you wish. Changing the library's behavior in this way causes different side effects. This is not recommended behavior. That's why I suggest you follow the steps in section "Suggestion".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
.row {
--bs-gutter-x: 0rem !important;
}
</style>
</head>
<body>
<div class="pt-5 bg-info"></div>
<div class="row pt-4 bg-success"></div>
</body>
</html>
Suggestion
The pt class is used to change the padding-top property. The different use of the pt class is not relevant to the problem. To responsively place elements horizontally, define child <div> elements with row class within a <div> element with container class.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="pt-5 bg-info"></div>
</div>
<div class="row">
<div class="pt-4 bg-success">
</div>
</div>
References
Bootstrap v5.2. - Gutters
Bootstrap v5.2 - Spacing
So I'm just sandboxing how responsive flex and shrink works in Bootstrap. Below is my code. Nothing seems to work. I've tried using different breakpoints such as lg/md/sm but to no luck. Would appreciate any guidance.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<div class="container-fluid">
<div class="row bd-highlight">
<div class="col border border-2 flex-md-shrink-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0">Flex item 2</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Since .col is flex: 1 0 0% columns will grow, but not shrink so your test isn't doing anything to override .col. You could change flex-grow to override the .col behavior...
<div class="container-fluid">
<div class="row">
<div class="col border border-2 flex-md-shrink-1 flex-md-grow-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0 flex-md-grow-0">Flex item 2</div>
</div>
</div>
https://codeply.com/p/0pUmeIxKEX
Try to use only d-flex and not combine it with bootstrap's grid system (.col and .row)
Here is the modified example:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
<style>
.item-container {
width: 100%;
}
.item {
flex-basis: 100%;
flex-shrink: 200px;
}
.item-shrink {
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="item-container d-flex bd-highlight">
<div class="item item-shrink border border-2">Flex item 1</div>
<div class="item border border-2">Flex item 2</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I am using bootstrap
I want to split a row in 2 columns when I display a mobile view
I have the code bellow:
<!DOCTYPE html>
<html>
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<title>test mobile</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 ">col-xs-6 col-sm-8</div>
<div class="col-xs-6 col-sm-4 ">col-xs-6 col-sm-4</div>
</div>
</div>
</body>
</html>
it display correctly the md view but in mobile view columns take the full line space instead of taking half the width
Do you know what happens and how to solve it please?
If you are using the latest version of Bootstrap I think they have removed the xs class. Just use col-6 instead of col-xs-6 and you should be fine.
Here is my html, I am using the SCSS version:
<!doctype html>
<html class="no-js" lang="en" dir="rtl">
<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>Title here</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
<div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
<div class="small-11 small-centered columns">11 centered</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here is what I get:
UPDATE (clarification):
When I inspect the elements, they don't have a row/column class definition, and they are not centered at all.
What am I doing wrong?
Note: I am using the rtl settings. I checked if it broke things, but it still didn't work.
Do you have an #include foundation-float-classes or #include foundation-flex-grid on your app.scss? Maybe you are using only #include foundation-xy-grid-classes, where there are no .row and .columns anymore, only .grid-x and .cell
new to Bootstrap and having some issues with nested columns. for som reason they are disproportionate. First pair of nested columns are "compressed" in half but those in the second are proportioned just fine. see below.
<!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">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-6
<div class="row">
<div class="col-sm-3" style="background-color:lightcyan;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lightgray;">.col-sm-3</div>
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
<div class="row">
<div class="col-sm-3" style="background-color:lightcyan;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lightgray;">.col-sm-3</div>
</div>
</div>
</div>
</body>
</html>
Any help on how to fix the alignment would be really appreciates. if this is just a limitation then i guess a new layout will be in order...
thanks,
Marc
There are couple of mistakes in your code. First is that your text is showing col-xs-6 for the nested columns on the left but you are actually setting them col-xs-6 that's why they were covering half of the width only.
Second one is that you are closing the right div col-xs-4 before including nested div.
Here's is your working code:
<!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">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-8" style="background-color:lavender;">.col-sm-8
<div class="row">
<div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4
<div class="row">
<div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
</div>
</div>
</div>
</div>
</body>
</html>