<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
Hey there!, first post here, can anybody tell me why this won't work? i've simplified my code to the maximum. The thing is that it will work if i make my browser window smaller than 1200px.
The problem with your page is that you did not put in place all the structure required by bootstrap's grid support: columns should be in rows, rows should be in containers, see the bootstrap documentation for details.
The following modification of your code works as intended:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/c\
ss/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey" class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</div>
</body>
</html>
(Technically the problem occurs because the "col-lg-12" class makes the div containing the "hello" a float, so it is no longer contained in the div with the grey background, and then the grey div has height 0, so isn't visible.)
Add the position or height attribute to the div
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey;position:absolute">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
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 added two images to my html page and they're large in size. I attached a screenshot of images for reference. images_full_size I added a dive with a class of thumbnail using bootstrap. Images got smaller and fitted to the Grid. I am unable to change the height of the first image. I attached second image for reference. img with thumbnail I tried to change the height through chrome inspector to be the same height as second image but I got an error saying "For elements with box-sizing: border-box, only absolute content area dimensions can be applied" enter image description here Pleas can you help how can I solve this.
Thank you.
My code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Grid Basics</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://source.unsplash.com/JoH60FhTp50">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://source.unsplash.com/buF62ewDLcQ">
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
</body>
</html>
I have the following html code, I am not able to place the divs in a single row. Not sure what I am doing wrong here.
<!DOCTYPE html>
<html>
<head>
<title>Hey there!</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class=".col-md-4">Hello</div>
<div class=".col-md-8"><h1>How are you?</h1></div>
</div>
</div>
</body>
</html>
Try
<div class="row">
<div class="col-md-4">Hello</div>
<div class="col-md-8"><h1>How are you?</h1>
</div>
The "." is used for a selector, not when writing the class name
I am using animate.css but it don't seem to work in firefox. The code I am using is:
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="rotateIn"> content</div>
</body>
</html>
I want this div to show rotate in effect when we load the page but it don't seem to work.
you have to use animated class if you want to show animations try this
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="animated rotateIn"> content</div>
</body>
</html>
Long story short: http://jsfiddle.net/3ZLLm/
You MUST use the animated class provided.
So, to add further, it should be:
<div class="animated rotateIn"> content</div>
After finishing the entire layout of my webpage using twitter bootstrap (all rows are fixed) - I would like to set the width to be fixed, that is for the layout to stay the same regardless of the browser size.
That is, if the browser is too small, then only a part of the page will be visible.
My layout's structure is as follows
<body>
<div style="container">
<div class="row">
<div class="span12">
<div class="span4">
</div>
<div class="span8">
</div>
</div>
</div>
<div class="span9"> </div>
<div class="span3"> </div>
</div>
</body>
I've tried making a div that contains the container, and setting its position to absolute, but this doesn't keep the elements from moving when the browser is resized.
How I could do this?
Here is what is in head:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="script.js"></script>
</head>
I think you have included bootstrap-responsive.css in your html. Remove it! and then you can set your container to be whatever you want. width: (x)px;