Before in bootstrap 2 you could reverse the stacking order in the grids by reversing the floats.
In bootstrap 3 this does not seem to work. Can anyone tell me the solutions for bootstrap 3?
Any assistance would be appreciated.
Use the .col-md-push-* and .col-md-pull-* modifier classes., see: http://getbootstrap.com/css/#grid-column-ordering
example:
<div class="container">
<div class="col-sm-5 col-sm-push-7" style="height:50px;background-color:green;">first right</div>
<div class="col-sm-7 col-sm-pull-5" style="height:100px;background-color:red;">second left</div>
</div>
in Bootstrap 3 you can use col-md-push- and col-md-pull-.
Here is full code.
I hope this will solve your problem.
<html><head>
<title>Bootstrap in practice: the grid system</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- To better visualize the columns -->
<style>
.row > div {
background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-4 col-md-push-8">I was left</div>
<div class="col-md-8 col-md-pull-4">I was right</div>
</div>
</div>
</body></html>
Run this Code in separate HTML page
Here is snapshot
Related
I need to give a gap of 15px between two rows and two columns. I don't know how to give the gaps on desktop and mobile devices using bootstrap only. There is something to do with margins but don't know the ideal way to do it.
For the 2nd row, I have two columns that will be displayed side by side on greater than tablet devices and it will display one below the other on mobile devices.
I am getting difficulty in setting the gaps in the mobile devices only.
<!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" />
<title>Gap</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-12 p-3" style="
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
">
B
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 p-3" style="
color: #004085;
background-color: #cce5ff;
border: 1px solid #b8daff;
">
A
</div>
<div class="col-xs-12 col-sm-6 p-3" style="
color: #004085;
background-color: #cce5ff;
border: 1px solid #b8daff;
">
C
</div>
</div>
</div>
</body>
</html>
What you need can be achieved very easily with a slight modification in B4. In that version, adding any margin to the columns breaks the layout completely. The workaround is to not add a margin to it, but an inner enclosing div. Which works the same. Your code thereby becomes:
<!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" />
<title>Gap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
</head>
<body>
<div class="container mt-5">
<div class="row mb-3">
<div class="col-12 p-3" style="background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;">
B
</div>
</div>
<div class="row">
<div class="col-sm-6 px-0">
<div class="inner p-3 mb-3 mb-sm-0 mr-sm-3" style="color: #004085; background-color: #cce5ff; border: 1px solid #b8daff;">
A
</div>
</div>
<div class="col-sm-6 px-0">
<div class="inner p-3" style="color: #004085; background-color: #cce5ff; border: 1px solid #b8daff;">
C
</div>
</div>
</div>
</div>
</body>
</html>
JSFiddle
The same can be done very easily using g-* classes on the row in B5.
Edit: You should also keep in mind that *-3 in Bootstrap is by default 16px. There is nothing (by default) here which will give you 15px. You'll need to add a custom class, OR if you're using SASS, you can add another value like 15 (with value 15px) to the margin utility in Bootstrap, which will give you something like mb-15 that will be equivalent to margin-bottom: 15px;. Utilities API
To make the gap appear on the mobile devices use mb-4 mr-4, and if you want to hide the gaps on larger screens use mb-md-0 mr-md-0or any other breakpoint you want.
I don't know if this is an effective way. Basically, I just add margin-bottom to container B and add margin-top to container A & C. Then, I use flex for the two columns. Instead of using margin, I use an empty container for the gap. The disadvantage is it's not exactly `15px.
References:
Bootstrap - Flex
Box Model, inc. Margin
Bootstrap - Spacing
<!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" />
<title>Gap</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 p-3 mb-4" style="
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
">
B
</div>
</div>
<div class="row d-flex justify-content-sm-between mt-2">
<div class="col-xs-12 col-sm p-3" style="
color: #004085;
background-color: #cce5ff;
border: 1px solid #b8daff;
">
A
</div>
<div class="col-sm-1 p-3">
</div>
<div class="col-xs-12 col-sm p-3" style="
color: #004085;
background-color: #cce5ff;
border: 1px solid #b8daff;
">
C
</div>
</div>
</div>
</body>
</html>
I'm new to bootstrap, trying to align 2 divs vertical on responsive mode, but no luck so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div>
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
</div>
<div class="col-xs-12 col-sm-11">
<p>The estimated delivery date is provided to you as a guide only.</p>
</div>
</div>
</body>
On normal desktop mode, the divs are vertically aligned. But once I go to mobile mode, the second div is sitting below the first div. How can I make the 2nd div to sit next to the first div vertically?
Most of the boostrap over mobile devices tend to make things one below another because that is pretty much what bootstrap does in CSS/Div elements on mobile.
There are some solutions over it, but I see in your elements before
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
that you don't use the triple rule.
Using bootstrap col- elements should be always into container and row like this:
<div class="container"> <!-- Or container-fluid -->
<div class="row">
<div class="col-xs-12 col-sm-1">
most inner div
<div/>
<div/>
<div/>
A little harder as solution is to copy the whole Bootstrap grid css file into a new file you make and you modify the things you need the most, like the .col-lg xs or the flex and the max width
Last but not least, go check the #media element over here:
https://www.w3schools.com/css/css_rwd_intro.asp
This could help you understand the most of what I said before about auto-resizing over mobile devices and css elements
<!--Try this one, It's simple and responsive in all widths and are aligned vertically can also do this using css flex box but little bit lengthy.-->
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="col-md-12">
<div class="d-flex flex-column">
<img src=" https://i.ytimg.com/vi/hF_LjTUvP-U/maxresdefault.jpg" alt="firstImg" class="img-fluid" style="width: 150px;
height: 150px;">
<img src="https://wallpapercave.com/wp/wp2554641.jpg" alt="secondImg" class="img-fluid mt-2" style="width: 150px;
height: 150px;">
</div>
</div>
</div>
</body>
</html>
strong text
You wrote
<div class="col-xs-12 col-sm-1" >
The col-xs-12 means, that on small screens, this element should fill the complete container. Use
<div class="col-xs-6 col-sm-1" >
for both containers, or one col-xs-1 and the other col-xs-11.
There are 12 columns in bootstrap and you decide, how they are filled
I am using the Bootstrap 4 grid system, and want to float an aside down the right hand side of the screen.
Currently my MAIN content is wrapped in col-xl-3, I want the ASIDE to also use col-xl-3, but I want it to run the height of the page, not just the height of the row it is in, as it is currently pushing the height of the row out...
As you can see from the image, my aside is pushing the top row higher than the bottom...
All I have done code wise is this;
section.body article, section.body aside { float: left; clear: both; }
Any help would be greatly appreciated.
I used "col-sm" but the principle is still the same. It's all about the nesting.
View in full page to see columns.
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container" role="main">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">5</div>
<div class="col-sm-4">6</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
</div>
</div>
</div>
</body>
</html>
I am using twitter bootstrap 3 to create a website template, as far as I know it usually has a 15 px gutter on both sides at large display, I am not getting the gutter between divs.
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-lg-3" style="background-color:red; height: 80px;">test</div>
<div class="col-lg-3" style="background-color:red; height: 80px;">test</div>
<div class="col-lg-3" style="background-color:red; height: 80px;">test</div>
<div class="col-lg-3" style="background-color:red; height: 80px;">test</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Try putting the boxes inside the columns.
<div class="container">
<div class="row">
<div class="col-lg-3">
<div style="background-color:red; height: 80px;">test</div>
</div>
<div class="col-lg-3">
<div style="background-color:red; height: 80px;">test</div>
</div>
<div class="col-lg-3">
<div style="background-color:red; height: 80px;">test</div>
</div>
<div class="col-lg-3">
<div style="background-color:red; height: 80px;">test</div>
</div>
</div>
</div>
JSFiddle
Boostrap rows have 15px negative left and right margins, and columns have 15px left and right padding respectively. You won't see a 'gutter' in the columns because of this fact. However, if you want to create a gutter-like effect, you can do this: Say you want a 2px gutter between each column. Add 1px to the column padding in addition to the 15px it needs.
CSS:
div.col-lg-3 {
padding-left: 16px; // gutter / 2
padding-right: 16px; // gutter / 2
}
Do not add margins to the columns.
I have gotten a weird problem with my columns using Twitter bootstrap. Setting up a test page that should behave like the example here: http://twitter.github.io/bootstrap/examples/hero.html . Here's the html:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-yii.css" />
<link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-responsive.min.css" />
<script type="text/javascript" src="/assets/8b15478e/jquery.js"></script>
<script type="text/javascript" src="/assets/24d7eb4f/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4" style="border: 1px solid red;"></div>
<div class="span4" style="border: 1px solid red;"></div>
<div class="span4" style="border: 1px solid red;"></div>
</div>
</div>
</body>
Should produce the result shown in the link above, but i get the third span4 on the next line, it gets pushed under the two first. Apart from this the container behaves as expected, i.e. it is centered.
What am I missing here?
Border adds pixels to width so span4 is now increased to 302px (border-left: 1px + border-right: 1px) from 300px and hence comes to the next line. See here
border: 1px solid red;
You can give a background instead of border to test.
Check fiddle
Applying a border is breaking your layout by adding some width to your spans.
The native bootstrap solution for handling "column styles" are the .well elements.
HTML
<div class="row">
<div class="span4">
<div class="well well-with-my-style">
</div>
</div>
<div class="span4"></div>
<div class="span4"></div>
</div>
CSS
.well-with-my-style {
border: 1px solid red;
background: none;
/* whatever... */
}
That way, you will respect the native layout and take profit from the .well element, but remember that you'll have to override .well styles with your own (using .well-with-my-style class).