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).
Related
I have the following base layout, which I now would like to transform into a responsive grid using pure css.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ... -->
</head>
<body>
<div class="pure-g">
<div class="pure-u-1">Navigation</div>
<div class="pure-u-5-24">left space</div>
<div class="pure-u-11-24">content</div>
<div class="pure-u-3-24">ToC</div>
<div class="pure-u-5-24">right space</div>
<div class="pure-u-1">Footer</div>
</div>
</body>
</html>
Unfortunately I have no clue how I can hide e.g. <div class="pure-u-3-24">ToC</div> on a specific breakpoint.
I had a look into the base file pure.css as well as the css containing the classes for the grid grids-responsive.css. There seems to be no such thing as .hidden-*-down class known from Bootstrap. Also I coudn't find any (purecss-) utilities to accomplish this.
How can I accomplish my goal and hide an element on a specific breakpoint using PureCSS?
You can use media queries. ToC will hide under 728px.
#media screen and (max-width:728px){
.pure-u-3-24 {
display:none;
}
}
<div class="pure-g">
<div class="pure-u-1">Navigation</div>
<div class="pure-u-5-24">left space</div>
<div class="pure-u-11-24">content</div>
<div class="pure-u-3-24">ToC</div>
<div class="pure-u-5-24">right space</div>
<div class="pure-u-1">Footer</div>
</div>
First you can add this css to your css files :
/* pure-hidden-md *
#media screen and (max-width:48em) {
.pure-hidden-md {display:none}
}
Now add class "pure-hidden-md" to anywhere:
<div class="pure-u-3-24 pure-hidden-md">ToC</div>
I have a Wordpress template that uses Bootstrap 2.3.1.
I currently have my two areas set up via an SPAN4 and SPAN8.
The resolution is locked at 1170px, therefore the lg component of Bootstrap is not needed to be configured.
I would like some help with the areas shown in red, as to how to configure my nested columns, so they work properly. They are within an area already defined as Span 8, so in effect, it is an 8 wide grid that needs to be configured to show 3 columns on medium devices, 2 columns on small devices and 1 column on the extra small devices.
I am relatively new to CSS, but have some understanding of basic coding, it's just doing my head in at the moment.
The attached picture show what I am after
My Wordpress layout
I can't seem to get any bootstrap to work with the sizes I would like to display.
I suggest you to use bootstrap version 3
http://getbootstrap.com/css/#grid-responsive-resets
unlike version 2, it has classes like col-lg-* col-md-* col-sm-* col-xs-*, which can get your job done more easily.
trying to understanding your problem.
try the demo code below to see if it's the layout you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#3.3.7/dist/css/bootstrap.css">
<style>
.b {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">aside</div>
<div class="col-xs-8">
main
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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 my page structured into 3 different modules: navigation on the left, images in the center, and social sidebar right. Below is the css that formats this content. I'm having trouble when I resize the window; the images in the center overlap with the navigation on the left and the sidebar gets pushed to the bottom of the page and overlaps with the end of the left navigation. The navigation module/sidebar is fixed.
I'm using twitter bootstrap as a base.
Any ideas on what's causing this and how to fix this?
css
div.sidebar{
width: 120px;
position:fixed;
top:12%;
left:2%;
overflow-y:auto;
height:100%;
}
html
<div class ="container-fluid">
<div class = "row-fluid">
<!-- left navigation div -->
<div class = "span1" style = "width:120px;">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class = "span8" style = "width: 900px;">
#lot of images
</div>
<!-- social sidebar -->
<div class = "span2" style = "margin-left: 10px; ">
#social module with images
</div>
</div>
</div>
when I make the window smaller
normal
Have you thought about responsive web design?
You say your using twitter bootstrap? Have a look at this:
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Add this to the head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Change the HTML:
<div class="container-fluid">
<div class="row-fluid">
<!-- left navigation div -->
<div class="span4">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class="span6">
#lot of images
</div>
<!-- social sidebar -->
<div class="span4">
#social module with images
</div>
</div>
NOT TESTED. Im also not 100% how big the fluid container is, i think its 12, if its 16 you will have to change the spans so they add up to 16
Couple issues I see...
You are completely defeating the purpose of ".row-fluid" and the framework by adding widths?? Remove all width assignments to the grid elements (ie. .container, .row, .span(x)) and let the framework do what it was designed to do...create the width for you. If you need to adjust width from what is being generated, add it to block level element INSIDE of the .span(x).
Your span HAVE to add up to NO MORE than 12. You have 14 which will absolutely make the last wrap around.
Overriding the spans with inline widths will cause odd behavior. Can you use the default TBS scaffolding instead?
Suggestions :
1.Remove all the extra things you put for style let bootstrap do the things !!
2.always test your div with "well"
Put your codes like this
<div class="container">
<div class="row" style="margin-top:20px;">
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
</div>
col-lg-* for large device
col-xs-* for extra small device
col-sm-* for small device
use it like this you can achieve what you want
Plunker demo
resize your browser to view the effect
i have this example layout using twitter bootstrap:
<div class="container">
<div class="row">
<div class="span8">
<h1> Hello MOBLE WORLD</h1>
</div>
</div>
</div>
they all look the same in all device.
when i put the meta viewport on the section
<meta name="viewport" content="width=device-width, initial-scale=1.0">
on the iphone it looks well different almost as if its cut in half(horrible), i want to know why that happens and what changes and does margins or padding have to do anything with it. thanks
What you want to do is use the fluid grid which basically means using a class of row-fluid instead of row on the wrapper.