I'm trying to implement this grid wrapping from Bootstrap 5.2 documentation.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="grid text-center">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>
My expectations were that there would be three columns that are equally sized but as you see here, each .g-col-4 spans the whole width instead of a third of it. What am I doing wrong here?
Grid is opt-in. You need to enable the CSS Grid by setting $enable-cssgrid: true.
Related
I'm having troubles understanding bootstrap's grid system, based on Murach's .Net book explanation.
Please read the whole post, I know how to fix this (<div class="col-lg-12">Col x</div>, does the trick), I'm just wondering why bootstrap works this way.
I did copy an example from a book, where Column a and Column b should use the 12 columns that bootstraps provides to work with its grid system, or that's what I got from the book, at least. Also, this very same code
<main class="container">
<div class="row">
<div>Column a</div>
<div>Column b</div>
</div>
<div class="row">
<div class="col-md-4">Column c</div>
<div class="col-md-8">Column d</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">Column e</div>
<div class="col-md-8 col-sm-6">Column f</div>
</div>
</main>
outputs those divs occupying the 12 columns in the book's screenshot (First Column 1 and Column 2 "group" are Column a and Column b in my code).
But this is what I get from it
unless of course I apply the trick I said earlier in the post.
This is what I specified in the head section
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap/min.js"></script>
<link href="style.css" rel="stylesheet" />
This is style.css:
.container
{
padding-top:1em;
}
.row
{
margin-bottom: 2em ;
}
.row div
{
border: 1px solid black ;
padding: 0.5em ;
background-color:lightgrey ;
}
The behavior of the DIV's is based on flexbox. The Bootstrap 4 row class is display:flex, so when you have a simple DIV inside it simply follows default flexbox behavior. This isn't 1 column unit, it simply takes the width of the content since neither grow or shrink is specified.
The Bootstrap 4 col-* classes have specific properties design to work inside the parent row.. such as flex-basis, max-width, padding, etc...
https://www.codeply.com/go/qvHVlTJshv
Read more in the Bootstrap docs...
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding
is then counteracted on the rows with negative margins... In a grid
layout, content must be placed within columns and only columns may be
immediate children of rows"
I want to wrap a group of rows in bootstrap while still having everything in one container. Are there any rules/conventions about this regarding bootstrap?
I put a fiddle below of what i want to do, but i am not sure if this is the right method.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="extraDiv" id="topdiv">
<div class="row">
<div class="col-md-12">Bla</div>
</div>
<div class="row">
<div class="col-md-6">Bla</div>
<div class="col-md-6">Bla</div>
</div>
</div>
<div class="extraDiv" id="bottomdiv">
<div class="row">
<div class="col-md-12">Bla</div>
</div>
</div>
</div>
As far my understanding it is totally okay the way you use .row class in a .container class. For further understanding you can check this link Must Bootstrap container elements include row elements?
Seems fine - though it depends what you want to do with the gutters etc.
Generally you just want one .container wrapping the whole page (to give you the main central column), and within that you can nest as many rows/cols as you need to.
Here is the code I am using:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<title>Column Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">a</div>
<div class="col-md-2">b</div>
<div class="col-md-2">c</div>
<div class="col-md-2">d</div>
<div class="col-md-2">e</div>
<div class="col-md-2">f</div>
</div>
<div class="row">
<div class="col-md-2">g</div>
<div class="col-md-2">h</div>
<div class="col-md-2">i</div>
<div class="col-md-2">j</div>
<div class="col-md-2">k</div>
<div class="col-md-2">l</div>
</div>
</div>
</body>
</html>
The code inside the body tags was taken from some website as an example of the Bootstrap grid system. It works when pasted into w3school's try it yourself editor for bootstrap. When I try to run the entire html file in Chrome, however, the row elements are all stacked vertically. Is there something fundamentally wrong with the syntax in some other part of the html file? Or is there something about the syntax of bootstrap's grid system itself that I'm missing?
A similar question was asked about a year ago: Columns in bootstrap 3.0 only stacking vertically
This single answer to this question has to do with switching md with xs, but I am using a 13 inch MacBook Pro, so md should do the trick. Anyway, I already have tried using the different sized col classes, so this is clearly not the problem.
Use span[#of columns] instead of col-md-[#of columns].
I am a bootstrap newbie and I have a 100% wide template that I want to code with bootstrap. The first column begins at the left corner and I have a Google map the stretches to the rightmost. I thought I could do this with container-fluid class, but that doesn't seem to be available any longer. I have no idea how to achieve that layout with bootstrap 3. I am using the Geometry PSD template from themeforest, the link here if you want to see the layout : http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268
For Bootstrap 3, you would need to use a custom wrapper and set its width to 100%.
.container-full {
margin: 0 auto;
width: 100%;
}
Here is a working example on Bootply
If you prefer not to add a custom class, you can acheive a very wide layout (not 100%) by wrapping everything inside a col-lg-12 (wide layout demo)
Update for Bootstrap 3.1
The container-fluid class has returned in Bootstrap 3.1, so this can be used to create a full width layout (no additional CSS required)..
Bootstrap 3.1 demo
This is the complete basic structure for 100% width layout in Bootstrap v3.0.0. You shouldn't wrap your <div class="row"> with container class. Cause container class will take lots of margin and this will not provide you full screen (100% width) layout where bootstrap has removed container-fluid class from their mobile-first version v3.0.0.
So just start writing <div class="row"> without container class and you are ready to go with 100% width layout.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Basic 100% width Structure</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
<script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-3 red">Test content</div>
<div class="col-md-9 green">Another Content</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
To see the result by yourself I have created a bootply. See the live output there. http://bootply.com/82136 And the complete basic bootstrap 3 100% width layout I have created a gist. you can use that. Get the gist from here
Reply me if you need more further assistance. Thanks.
Using Bootstrap 3.3.5 and .container-fluid, this is how I get full width with no gutters or horizontal scrolling on mobile. Note that .container-fluid was re-introduced in 3.1.
Full width on mobile/tablet, 1/4 screen on desktop
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
<!-- Full-width for mobile -->
<!-- 1/4 screen width for desktop -->
</div>
</div>
</div>
Full width on all resolutions (mobile, table, desktop)
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div>
<!-- Full-width content -->
</div>
</div>
</div>
You're right using div.container-fluid and you also need a div.row child. Then, the content must be placed inside without any grid columns.
If you have a look at the docs you can find this text:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Not using grid columns it's ok as stated here:
Content should be placed within columns, and only columns may be immediate children of rows.
And looking at this example, you can read this text:
Full width, single column: No grid classes are necessary for full-width elements.
Here's a live example showing some elements using the correct layout. This way you don't need any custom CSS or hack.
In BOOTSTRAP 4 you can use
<div class="row m-0">
my fullwidth div
</div>
... if you just use a .row without the .m-0 as a top level div, you will have unwanted margin, which makes the page wider than the browser window and cause a horizontal scrollbar.
I have a bootstrap website that's setup statically, it doesn't adjust according to different view sizes. So I would like to make it responsive but not sure how. I'm also using LESS to do my modifications and such to the twitter bootstrap css. So far my site is set up like so..
<div id="wrapper">
<header>
<div class="container">
<div class="row">
<div class="span12">
<!-- LOGO HERE -->
</div>
</div>
</div>
</header>
<div id="main-content" class="container">
<div class="row">
<div class="span8">
<!-- My content -->
</div>
<div class="span4">
<!-- My content too -->
</div>
</div>
</div>
</div>
Also, the website was built for 940px so when I make it responsive I want to set the maximum veiw of the page to 940px instead of 1200px and have my div.wrapper still in the center of the page.
Hopefully all this makes sence haha.
To turn on responsive layout, you need to add the following code in the <head> of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
You'll have to adjust your reference to the stylesheet to your specific structure, since you're using the .less source.
In responsive.less comment out or delete the following line:
#import "responsive-1200px-min.less";
This will respond to smaller screen resolutions, but keep your maximum .container width at 940px.
Change .container to .container-fluid and .row to .row-fluid. Take a look at this: http://jsfiddle.net/ypkJQ/. You have to also remember that every .row-fluid class resets span* width counter, that is span* width under .row-fluid is taken from percentage width of parent(.row-fluid).