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
Related
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.
I have the following code. I want to resize my image, but it doesn't work with col-xs-offset-0. (I want to center it)
What could be the problem here? I want my image to get big with col-xs and centered.
I don't want to use col-xs-4 since it'll make my image too small. I can't col-xs-5 because then I can't use offset.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-0">
<img class="img-responsive" src="http://www.turkcealtyazi.org/images/poster/0903747.jpg" alt="">
</div>
</div>
</div>
<script src="/js/jquery-2.1.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Fiddle : http://jsfiddle.net/rx4ptj2k/
An offset of zero would only be appropriate if you had a width of 12. As it's 6 columns wide, you'd divide the remainder of the 12 in half for a result of 3.
Use col-xs-offset-3 instead of col-xs-offset-0.
Demo
I'm trying to figure out how to set the order of my containers in a page so that they will correctly reorder themselves in both mobile and desktop layouts when resized.
Here is my code, the order is correct here in tablet [col-sm] & and phone [col-xs] views:
<!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">
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
div {border:1px solid #000;}
div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;}
div.rider {height:50px;background-color:#06C;}
div.search {height:50px;background-color:#F39;}
div.headers {height:100px;background-color:#933;}
div.navigation1 {height:300px;background-color:#69F;}
div.content {height:600px;background-color:#0FC;}
div.social {height:50px;background-color:#C99;}
div.navigation2 {height:300px;background-color:#3FF;}
div.footer {height:150px;background-color:#000;}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-12 logo"></div>
<div class="col-md-3 col-xs-12">
<div class="rider">rider</div>
<div class="search">search</div>
<div class="navigation1">1st Nav</div>
</div>
<div class="col-md-9 col-xs-12">
<div class="headers">headers</div>
<div class="content">content</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
The problem is for a desktop layout, there is a big gap under the 1st Nav div, the social div should be immediately beneath the 1st Nav in desktop and larger views regardless of the height of the content div.
How do I fix this? I tried using the pull, push, offset and float methods, but nothing gave me the correct results.
The gap that you are talking about is actually not a gap in the solid left column. It is a gap between content in the left column of first row and the left column of the second row.
Your last wrapping div (social/nav2/footer) is in the second row, so it can touch the first wrapping div (rider/search/nav1) from below only if the height of second wrapping div (headers/content) is less than of first (which is definitely not an option here).
To fix the problem, I'd suggest to put contents of last wrapping div into first one. However it will break the order in mobile and tablet layouts.
As the second option I could offer to duplicate contents of last wrapping div to first one, but make it visible only in desktop screen sizes by using .visible-md and .visible-lg classes on upper instance and to show the one below only in mobile screens (use .hidden-md .hidden-lg classes). This is not the best idea from performance standpoint (extra traffic, extra server-side processing) but it could work.
<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">
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
div {border:1px solid #000;}
div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;}
div.rider {height:50px;background-color:#06C;}
div.search {height:50px;background-color:#F39;}
div.headers {height:100px;background-color:#933;}
div.navigation1 {height:300px;background-color:#69F;}
div.content {height:600px;background-color:#0FC;}
div.social {height:50px;background-color:#C99;}
div.navigation2 {height:300px;background-color:#3FF;}
div.footer {height:150px;background-color:#000;}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-12 logo"></div>
<div class="col-md-3 col-xs-12">
<div class="rider">rider</div>
<div class="search">search</div>
<div class="navigation1">1st Nav</div>
<div class="visible-md visible-lg">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<div class="col-md-9 col-xs-12">
<div class="headers">headers</div>
<div class="content">content</div>
</div>
<div class="col-md-3 col-xs-12 hidden-md hidden-lg">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
I'm having issues with getting Inspiritas as an Ember app. The index.html looks like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<meta name="author" content="me">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon.ico">
<link href="inspiritas.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span3">
...
</div>
{{outlet}}
</div>
</div><!-- /container -->
</script>
<script type="text/x-handlebars" id="dashboard">
<div class="span9" id="content-wrapper">
<div id="content">
<section id="tables">
...
</section>
</div>
</div>
</script>
First off, it won't load the CSS for <div class="container"> (not the one inside the navbar). Instead, it inherits from body.ember-application, and in the process loses all the CSS. This only happens with this container, though. The only bit of LESS I can narrow it down to is some custom styling here:
body > .container {
// Color the whole container like the sidebar to fix faux columns
background: url('images/sidebar_bg.png') repeat #sidebarBackground;
.border-radius(#borderRadiusLarge);
// Make some space, eh.
margin-top: 40px;
margin-bottom: 40px;
}
UPDATE: Well, I've got no clue why but one class name change later its all gone to shit and everything has lost its styling.
The CSS rule you pasted uses the descendant selector, which means only elements with the container class that are directly below the body element will be styled. But when Ember inserts Handlebars templates it wraps them via a View, which creates another intermediary DIV. I'd guess that's responsible for your styles not appearing.