I'm trying to build a simple page using Bootstrap. The problem I have now is related to the grid system.
I needed a main div contain two divs. So I created a main div with class of row-fluid. The inside two divs were given classes of soan4 and span8, respectively. The problem I have now is that the two divs are not shown properly. Please take a look at the end result: http://i61.tinypic.com/2rgneci.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<style type="text/css">
.border{
border: 2px solid;
}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="row-fluid">
<!-- sidebar start -->
<div class="sidebar border span4" >
1 </div>
<!-- sidebar end -->
<!-- content start -->
<div class="blogBody border span8">
2 </div>
<!-- content end -->
</div><!-- main div end -->
</body>
</html>
Since bootstrap 3 the syntax changed:
span does't exist now it's col-width_wanted-number_of_columns
so for you something like this :
<div class="row-fluid">
<div class="sidebar border col-xs-4" >
1
</div> <!-- sidebar end -->
<!-- content start -->
<div class="blogBody border col-xs-8">
2
</div> <!-- content end -->
</div><!-- main dev end -->
http://jsfiddle.net/z22oxbap/
For more ressource look here : http://getbootstrap.com/css/#grid
EDIT:
-xs- is for extra small device (<768px) width
-sm- is for small device between (≥768px) and (<992px) width
-md- is for desktop device between (≥992px) and (<1200px) width
-lg- is for large device more than (≥1200px) width
Related
As the title says I'm trying to use Bootstrap 3 grid system with a fixed wrapper. But when I resize the Browser the columns stack up even if the wrapper stays the same size?
BTW: I'm using version 3 so that I can move to a responsive layout after I have ported the site. (Which is huge and I'm alone, so step by step is the only option ...)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</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="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<style>
/* Custom container */
.container-fixed {
margin: 0 auto;
max-width: 800px;
min-width: 800px;
width: 800px;
background-color:#C05659;
}
.container-fixed > hr {
margin: 30px 0;
}
</style>
</head>
<body>
<div class="container-fixed">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<hr>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery.min.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>
The sm,md,lg,etc.. cols wrap/stack responsively. Use the non-stacking col-xs-* class...
<div class="container">
<div class="row">
<div class="col-xs-4">.col-4</div>
<div class="col-xs-4">.col-4</div>
<div class="col-xs-4">.col-4</div>
</div>
</div>
Demo: http://bootply.com/80085
EDIT: Bootstrap 4, the xs no longer needs to be specified..
<div class="container-fluid">
<div class="row">
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>
</div>
In bootstrap, I'm trying to show divs A and B stacked on extra small devices and displayed in one line on small devices and above. (just like in this example: https://getbootstrap.com/docs/4.0/layout/grid/#stacked-to-horizontal)
However, the divs are not stacked on extra small devices (using Firefox ESR 52.4), but stay the same across all device sizes.
Any hint about what I am missing would be great:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- Bootstrap related files -->
<link rel="stylesheet" href="vendor/bootstrapcss/bootstrap.min.css">
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrapjs/bootstrap.min.js"></script>
<script src="vendor/workarounds/ie10-viewport-bug-workaround.js"></script>
<!-- Custom styles -->
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
A
</div>
<div class="col-sm-8 hidden-xs-down"
style="text-align:right">
B
</div>
</div> <!-- /.row-->
(...)
There are other bootstrap elements further down on the page which work, but the layout instructions do not. I have checked that all related js and css files are available, they all return status 200.
Bootstrap grid classes are specific to certain screen sizes and can be used together. (https://getbootstrap.com/docs/4.0/layout/grid/#grid-options) If you want the divs in the row to stack on extra-small (xs) give them the class col-12 to force the columns to take the full width of the row on devices smaller than 576px wide.
I'm currently working on a project for which I use foundation 6.
I have this weird problem that my columns stack vertically (they're all 100% width of the screen)
the very simply code that I use is this:
<div class="row">
<div class="small-2 large-4 columns"><!-- ... --></div>
<div class="small-4 large-4 columns"><!-- ... --></div>
<div class="small-6 large-4 columns"><!-- ... --></div>
</div>
this is copied directly from the basic grid examples on the foundation website. I'm certain that i've linked to the stylesheet correctly, because even when I use the full path of the stylesheets this keeps happening.
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
Thanks for the help in advance!
This is because the newest version of Foundation comes with their XY Grid enabled and it wont call the CSS of the class "small-2 large-4 columns"!
If you're using SASS just set the arguments to false in the includes, but I assume you're just using CSS so if you just re-download a custom version and then just check 'float grid' it will get you back to the older grid system and your code should work!
If you want to learn more about the new XY Grid heres a link: http://foundation.zurb.com/sites/docs/xy-grid.html
And heres a link to download the custom foundation version:
https://foundation.zurb.com/sites/download/
Hope this helps!
I can't comment because my rep is under 50, but I wanted to say I am also having this issue. Downloaded Foundation 6 from the site, I have all the files, and I haven't touched the app.css file. Here is my code
Both columns at 100% width.
<html class="no-js" lang="en" dir="ltr">
<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>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class ="row " style= "background-color: aqua">
<div class = "small-6 large-6 columns" style= "background-color: lightblue">content</div>
<div class = "small-6 large-6 columns">more content</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I have a php/html file that I am trying to style but for some reason it is not working and I am lost because other styles on the CSS file are working fine.
Here is my header (include) file
<!-- ========== VIEWPORT META ========== -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- ========== META TAGS ========== -->
<meta name="description" content="Client and payment management in one place for freelancers and creative agencies.">
<meta name="keywords" content="client relations management, payment management, software, mobile app, saas">
<meta name="author" content="SeaitManageit">
<!-- ========== FAVICON & APPLE ICONS ========== -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<!-- ========== MINIFIED VENDOR CSS ========== -->
<link rel="stylesheet" href="styles/vendor.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/features.css">
<link rel="stylesheet" href="styles/sign-up.css">
<link rel="stylesheet" href="styles/nav.css">
<!-- ========== MODERNIZR ========== -->
<script src="scripts/vendor/modernizr.js"></script>
Here is the include of the php/html file
<?php include_once("header-file.php") ?>
And finally the section I am working on but won't work right
<!-- ========== FEATURE NAVIGATION ========== -->
<section class="se-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="feature-nav">
<ul>
<li>Analytics</li>
<li>Clients</li>
<li>Expenses</li>
<li>Inbox</li>
<li>Invoice</li>
</ul>
</div> <!-- end feature-nav -->
</div> <!-- end col-md-12 -->
</div> <!-- end row -->
</div> <!-- end container -->
</section>
Forgot the css I am testing with
.feature-nav {color: blue;}
Based off what I have provided can anyone find the issue? As I said the main.css file works mostly but does not work for this certain div or really any div I try and change. I have cleared my cache, used incog and used a different browser so it is not my browser in any way.
Based on what you have provided, I would assume you have <ul> and <li> styles applied in your .css somewhere which will take precedence over any div styling.
IE:
.feature-nav {color: blue;}
ul li {
color: red;
}
would style your list items red, not blue. Check for global list styles or consider changing your original blue font style to something more appropriate like:
.feature-nav ul li {color: blue;}
JSFiddle
I'm am having a hard time making websites responsive so i downloaded the basic template and navigation sample from bootstrap, now i'm wondering how do i edit the navigation bar? Because their are already multiple css folders. I tried creating a new css file and editing through there but I can't seem to make it work. What i'm trying to do specifically is making the text centre in the container/wrapper (I'm not sure what exactly it is called, but each word is in a box and i would like to centre the word in that box
html:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Example</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">Work</div>
<div class="col-md-4">About</div>
<div class="col-md-4">Contact</div>
</div>
</body>
</html>
Thanks for taking the time to help, have a good day!
First, make sure your custom CSS file is called after the Bootstrap CSS:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<link rel="stylesheet " href="yourCustom.css" />
Second, add this to your custom css:
.col-md-4 {
text-align:center;
}
Why not use Bootstrap's own structure?
jsFiddle Demo
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>