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).
Related
It is written in document that "The grid is by default center aligned.".
However, the following code does not center the cell:
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-image: url('image.png');">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The grid is by default center aligned
Yes, it is. The grid itself is centered (the red border), check below example. I think it is what a grid suppose to be. It define tiles and let you put component on it, so it is called grid.
<html>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdc-layout-grid" style="width: 512px; border:2px solid red;">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
<div class="mdc-card my-card">
<div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-color: green">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you really want a cell center aligned inside a grid layout, let the cell span across all columns.
We are not sure what is going to be put on the grid, or how you want to organize the content, otherwise we may suggest other component that might fit your needs.
I have read the other post and made sure that my index.html is in the same folder as my css,fonts and js folders but it still will not render properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Clear your browser cache. And mostly read get started at Getbootstrap.com as you are on the correct path.
So Bootstrap doesn't tell you on their page but the shading of each cell is not a default feature. If you inspect the element using chrome you will see an additional css rule. So this is how you do it:
1) change the classes from "row" to "row show-grid" in your index html.
2) create the following rule in your css style sheet:
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
3) run your code
Install bootstrap properly using Bootstrap CDN Get Bootstrap
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
I would like to use a scrollbar on a div using the property overflow:auto and setting overflow:hidden on the body. It works well with Chrome but not with Firefox and IE.
Can anyone explain me why there is 2 different behavior with this code?
<html lang="en" class="fillScreen" dir="ltr"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link rel="stylesheet" href="template4.css" type="text/css">
<style>
.fillScreen {
bottom:0px;
height:100%;
}
html, body {
margin: 0; padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body class="fillScreen">
<div class="fillScreen" style="display:table;width:100%">
<div class="fillScreen" style="display:table-row">
<div style="border: solid 2px red;overflow:auto;display:table-cell;overflow:auto" class="fillScreen" >
<div class="fillScreen" style="display:table;width:100%;overflow:auto">
<div class="fillScreen" style="border: solid 1px blue;" style="display:table-row">
<div class="fillScreen" style="display:table-cell">
<div class="fillScreen" style="position:relative">
<button width="142px" height="20px" style="position:absolute;top:99px;left:20px;">OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It is possible to test it here http://jsfiddle.net/nMSvv/2/
Scrollbar apears in Chrome when resizing the window.
I add, that I absolutely need to display the button with absolute position and need to keep this structure of div
Thank you for any help
Solution is here : http://jsfiddle.net/nMSvv/3/
I needed to wrap the div where I want a scrollbar with :
<div class="fillScreen" style="position:relative;overflow:auto">
<div style="position:absolute;top:0px;left:0px">
</div>
</div>
I'm trying to decide no the best way to make a side-by-side column-like layout using CSS and divs.
For some reason when I use display: inline-block;, if the aggregate width of the column-divs is equal to 100%, the last div wraps onto the next line. However, if I use floating divs, this doesn't happen, even with identical width.
For example, the two divs in this example appear on different lines:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />
<style type="text/css">
.column { width: 50%;
display: inline-block;
}
</style>
</head>
<body>
<div class="column">
Column 1
</div>
<!-- This div is on the second line -->
<div class="column">
Column 2
</div>
</body>
</html>
But in this example they don't:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />
<style type="text/css">
.column { width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
</body>
</html>
Using both Chrome and IE8.
Why does this happen?
inline-block respects white-space in your markup. try:
<div class="column">Column 1</div><div class="column">Column 2</div>
see what happens