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.
Related
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.
I am doing a homework problem. And for this part, I need to make the container have a normal margin in computer view, and after toggle the device in chrome devTool, it has to be full width. I will upload screenshots to clarify that.
normal view
toggle view
answer normal view
answer toggle view
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="store.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<title>Store Home</title>
</head>
<body>
<ul class="navbar" style=" background-color: yellow;">
<li>Home</li>
<li>Hours</li>
<li>About</li>
</ul>
<!--<div style="background-color: #FCDFBB; max-width: 800px; margin:auto; height: 90vh">-->
<div class="container" style="background-color: #FCDFBB; height: 90vh; margin:
auto;">
<h1>Yiyu's Store</h1>
<p>
This is my personal store, it will sell some of my personal stuffs. <br>
Hope you guys love it!<br>
Also, I sell some small pets here, cute pet only! <br>
</p>
<p>
Another paragraph lol <br>
It will show with different color <br>
</p>
<p>This is the unordered thist that I'm displaying on this page</p>
<ul>
<li>Great service</li>
<li>Long hours</li>
<li>Quality products</li>
</ul>
</div>
<!--</div>-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
It may be easier to think of things in the reverse order: moving from smaller screens to larger ones. This is a tried-and-true workflow (of course there are exceptions) for designing and implementing screen designs that need to work on mobile devices on up to desktop resolutions.
This overview may be helpful: https://zellwk.com/blog/how-to-write-mobile-first-css/
The body tag will, by default, fill the available width of the window unless it is constrained (you will probably want to add margin: 0 to the body element to ensure there is no gapping along the edges). Inside your body tag, I would recommend wrapping all of your content inside a main tag (unless your homework assignment specifically prohibits it). main is a block-level element and will stretch to fill all the available horizontal space of its parent (in this base, the body element).
So, you get the mobile ("toggled") view stretching to the edges basically for free. It works out of the box.
Non-Bootstrap
At larger screen sizes (e.g., desktops), you'll want to constrain the width of your main element with a max-width declaration (via a media query) and set its right and left margins to auto. This will horizontally center the main element.
In its most basic form, this would looks something like this:
#media screen and (min-width: 1200px) {
main {
max-width: 1024px;
margin-right: auto;
margin-left: auto;
}
}
Breaking it down (non-Bootstrap)
Here, we're saying that at all window widths equal to or greater than 1200px, we want to apply a CSS rule that constrains the maximum width of main to be only 1024px. (I'm just pulling these values out of a hat; feel free to change them to suit your needs). And we want it centered in the viewport, so we'll tell the left and right margins to expand inwards from the right and left edges automatically until they reach the main element.
Bootstrap
Looks like you're using Bootstrap 4.0.0, so you have access to Bootstrap's flexbox-powered grid system. With BS's utility classes, accomplishing this layout can be done pretty easily. How you choose to do it will depend on how you've configured Bootstrap (and how you choose to use Bootstrap), but out of the box, you could do something as simple as this:
<body>
<main class="container-fluid">
<div class="row justify-content-lg-center">
<div class="col-12 col-lg-8">
<!-- content -->
</div>
</div>
</main>
</body>
Breaking it down (Bootstrap)
container-fluid creates a container element that is 100% wide at
all times. This means that at smaller window widths (e.g., on phones), your content will fill the full-width of the viewport.
row applies some basic flex-box parent styles that you can further tweak by setting its justify-content property to center at "large" (lg) window widths (with BS's utility class: justify-content-lg-center).
Since BS uses a 12-column grid by default, setting col-12 on the row's child element means that it will stretch to 100% of its parent's width. At large screen sizes, the above code says that the element should only stretch to fill 8/12's (or 2/3's) of its parent's horizontal dimensions (i.e., col-lg-8). Since we told the row element to center its flex-child at lg window widths, this layout will be horizontally centered.
Based on your screenshots, it doesn't appear that you want to constrain the width of your header (but I didn't see a header element in your markup). So that would need to be handled a bit differently.
As for your specific question, there are any number of ways you could accomplish this layout with Bootstrap (or without it), but maybe the above will get you started.
I am having trouble getting my 960.gs to take up the entire width of the browser. I want the grid to be 100% on resize, that is if I scroll out the text will appear smaller and take up less lines but the grid will still take 100% of the width.
There is this question here When using grid 960, can I still have a 100% width header section? And the answer was to set the top part to 100%. I added the code but this has no effect, neither does setting the body's width to 100% and all divs, ect. What am I doing wrong? Here is the code:
<!doctype html>
<html>
<head>
<title>My Fragment</title>
<meta charset="utf-8" />
<!-- Symbols rendered -->
<meta name="value" />
<!-- Do not need to close -->
<link rel="stylesheet" href="css/960_12_col.css">
<style>
body {
background:green;
}
div {
background: white;
}
.grid_4 {
height: 100px;
}
</style>
</head>
<body>
<div class="header" style="width:100%;"></div>
<div class="mainWrapper container_12">
<div class="grid_4" style="background:red">sdfds</div>
<div class="grid_4" style="background:blue">sdfs</div>
<div class="grid_4" style="background:yellow">sdfs</div>
<div class="clear">sdfds</div>
</div>
</body>
</html>
But this gives me the following result:
I want to see no green space on left side of the red column and the right side of the yellow column but this is not the case. How do I get rid of the space either side?
(Please note I am new to css and Html and have been following the learn html in 30 days, and whatever else I find online.)
First of all - <div class="header" style="width:100%;"></div> is not wrapping your container.
Second: add width: 100% to your mainWrapper class instead of .header, but that i know there is hardcoded widths in 960 grid system, so your columns with .grid_4 will be still width: 300px.
Try with another Grid System with fluid layouts, e.g.: http://www.designinfluences.com/fluid960gs/
I am new to bootstrap and I am having an issue trying to position an Image on the page. I am trying to use bootstrap grid to position the image in the center of the page. I am familiar with html5 and I know there are other ways of centering the image;however,I was wondering if this can be done using bootstrap's grid system. The reason for this example, is that I have other image position things I would like to use bootstrap for.
When I run the example below on a Windows 8 desktop or iPad the image is extremely small(i.e. almost like an icon) and resides in the upper left corner; however, when I run this on my Nexus 5 the image is sized correctly and is centered. I have included some sample html code of what I am using.
Again, I am some what new to bootstrap so it could be something simple. Any input or advice is greatly appreciated
Thanks in advance for your help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autoroute Login</title>
<meta name="viewport" content="width=device-width,
height=device-height,initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/
3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/
css/bootstrap-responsive.css">
<style>
#media (min-width:#screen-sm-min){
#main-image{
height: 200px;
width:200px;
}
}
#media (min-width: #screen-md-min){
#main-image{
height: 350px;
width: 350px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2"/>
<div id="main-image" class="col-sm-8 col-md-8">
<img src="img/ar-main-image.jpg" alt="Autoroute Main Image"
class="img-responsive center-block"/>
</div>
<div class="col-sm-2 col-md-2"/>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/
jquery.min.js" > </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/
bootstrap.min.js"></script>
</body>
</html>
Bootstrap's column system is laid out on a base of twelve. For example, if you wanted two columns of equal width, you would have them both be .col-sm-6 because two columns with widths of 6 equals twelve. Likewise, you could have three equal .col-md-4 columns.
Bootstrap floats columns to the left by default, but also allows you to offset them by a specific number of columns: .col-md-offset-4
So, if you would like to have a Bootstrap div that is always centered, you can do that by setting it's width to any even number, subtracting that number from 12, and setting the offset to that number. So for a centered .col-2, you would give an offset of 5 because 5+5+2=12. For a centered .col-4, you would give an offset of 4 because 4+4+4=12. You need to account for the left (empty) columns, the center div with x columns width, and the right (empty) columns.
JSFiddle
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).