I am new to this bootstrap. I have a background image which i want to put in the container fluid. How to do it.
This is my code:
<div class="image_outer">
<div class="container-fluid">
<div class="row-fluid">
<div class="span5">
<div class="fl navi"> One TwoP </div>
</div>
<div class="span2"">
<div id="image1"><img src="/Something/something.jpg" alt="" /></div>
</div>
<div class="span5">
<div class="fr navi"> Three Four </div>
</div>
</div>
</div>
</div>
The corresponding classes are
.image_outer{width:100%;margin:0 auto; background:url(Something/something_bg.jpg) repeat-x; height:128px;}
.fl{float:left;}
.fr{float:right;}
.mr30{margin-right:100px; font-family: ee_nobblee,arial;}
.navi a{ font-size:22px; color:#6D6E70; margin-top:50px; float:left; font-weight:normal; font-family:ee_nobblee,arial;}
.navi a:hover { text-decoration:none; color:#858687;}
Try This CSS:
.image_outer {
width:100%;
margin:0 auto;
background:url(Something/something_bg.jpg) repeat-x;
height:128px;
background-position:cover;
}
Use your code like this and I hope this will work for image
.image_outer{width:100%;margin:0 auto;
background:url(../Something/something_bg.jpg) repeat-x;
height:128px;}
I might be wrong, you are floating children. you need to clear the float so that the background takes up the height specified.
<div class="row-fluid">
<div class="span5">
<div class="fl navi"> One TwoP </div>
</div>
<div class="span2"">
<div id="image1"><img src="/Something/something.jpg" alt="" /></div>
</div>
<div class="span5">
<div class="fr navi"> Three Four </div>
</div>
<div style="clear:both"></div>
</div>
Related
I want my div and navbar's width stretch all the way to the right 100% but for some reason, it stops right before it reaches it. I've added screen cap of what I see
screencap
css
.section2{
font-size: 2em;
background-color: white;
width: 100%;
height: 100%;
opacity: .75;
}
HTML
<section class="section2">
<div class="row" align="center">
<div class="col-md-12">
text
</div>
<div class="row" style="font-size:.75em" >
<div class="col-md-12" >
</div>
</div>
</div>
<br><br>
<div class="row" align="center">
<div class="col-md-12">
text
</div>
<div class="row" style="font-size:.75em">
<div class="col-md-12">text
</div>
</div>
</div>
<br><br>
<div class="row" align="center">
<div class="col-md-12">
text
</div>
<div class="row" style="font-size:.75em">
<div class="col-md-12">Text
</div>
</div>
</div>
</section>
I found the solution body and html should be set to 0 margin and padding
html, body {
margin:0;
padding:0;
}
I think the parent of your section2 isn't at 100% of your screen.
I have a Bootstrap page on which I'm trying to stack different boxes.
Imgur - Image of boxes (sorry, not enough rep to upload images directly)
The green boxes are the ones currently in position, and the red ones are the ones I am having issues with. I'm using the following code (simplified) to get the green boxes:-
<div class="container">
<div class="row">
<div class="col-xs-3" style="height:100px; background-color:green;">
</div>
<div class="col-xs-3" style="height:100px; background-color:green;">
</div>
<div class="col-xs-6" style="height:200px; background-color:green;">
</div>
</div>
</div>
I'm basically trying to create another two <div class="col-xs-3" style="height:100px; background-color:green;"> that will go underneath the current two, while also keeping the large box to the right.
I thought it would be an easy fix with a new row, or using float:left / right, but none of that seems to be working out.
One way to do it would be to make two 50% width columns and then divide the column on the right into two rows with two more columns in each:
.green-lrg {
background-color:green;
height:215px;
}
.green-sml {
background-color:green;
height:100px;
}
.red-sml {
background-color:red;
height:100px;
}
.col-xs-6 .row {
padding-top:15px;
}
.col-xs-6 .row:first-child {
padding-top:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<!-- LEFT COLUMN -->
<div class="col-xs-6">
<div class="green-lrg"></div>
</div>
<!-- RIGHT COLUMN -->
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<div class="green-sml"></div>
</div>
<div class="col-xs-6">
<div class="green-sml"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="red-sml"></div>
</div>
<div class="col-xs-6">
<div class="red-sml"></div>
</div>
</div>
</div>
</div>
</div>
Here is simple example.
HTML
<div class="container">
<div class="row">
<div class="col-xs-6 box box-big">
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6 box box-small">
</div>
<div class="col-xs-6 box box-small">
</div>
<div class="col-xs-6 box box-small">
</div>
<div class="col-xs-6 box box-small">
</div>
</div>
</div>
</div>
</div>
and CSS:
.box {
background-color:green;
border:5px solid white;
}
.box-big {
height:200px;
}
.box-small {
height:100px;
}
I have three elements arranged in a row. The left most is a button, then there's some images in id="slide" and then I have another div. The html looks like:
<div id="display">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">
<div id="drawMenu" class="center-block">
<button type="button" class="btn btn-lg btn-danger" id="erase">Erase</button>
</div>
</div>
<div class="col-lg-4">
<div id="slide">
</div>
</div>
<div class="col-lg-3">
<div id="colorPicker" class="center-block">
<div class="color" id="white"></div>
<div class="color" id="yellow"></div>
<div class="color" id="green"></div>
<div class="color" id="blue"></div>
<div class="color" id="red"></div>
<div class="color" id="black"></div>
</div>
</div>
</div>
</div>
The issue is, I have the images in the center but I can't get the two elements on each side to be centralized vertically and horizontally. The CSS looks like:
.color{
height:30px;
width:30px;
margin: 2px;
border-radius: 50%;
}
#drawmenu{
text-align: center;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
The only thing I believe is actually working is the text-align: center
Hopefully the image will explain what I'm looking for. Sorry about the quality. As good as I could get with paint. The grey parts on the sides are offsets.
http://i1028.photobucket.com/albums/y349/oqrgyikf/stackoverflow_zpsf3b6fa31.png
Thank you
add a class to those columns so you can target them more efficiently, and then the following CSS:
.row{display:block;}
.vertimid{display:inline-block; vertical-align:middle ; height:auto; min-height:100%;}
.vertimid img{width:100%; height:auto;}
See Bootply here
im kind of new to css/html and bootstrap itself. I've encountered two problems.
One is: I want to fix the 3rd and 4th box height to 100%, but no mater what div, or class i change to 100% it makes no changes.
Second: How can i make Box4 go under box2, so its not inline with box3?
Link to describe problem: http://jsfiddle.net/BXZrX/6/
and here is a picture of what i want: http://oi62.tinypic.com/osqule.jpg
<div id="content">
<div class="jumbotron">
<div class="container-fluid">
<h1>Join now!</h1>
<p>To get full use of the website, register now!.</p>
Sign up
</div>
</div>
<div class="bordertop">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box2</h1>
<p>text</p>
</div>
</div>
</div>
<div class="box3">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box3</h1>
<p>text</p>
</div>
</div>
</div>
<div class="box4">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box4</h1>
<p>text</p>
</div>
</div>
</div>
</div>
#content > div {
float:left;
width:49%;
}
#content > div.bordertop {
float:right;
width:49%;
}
#content > div.box3 {
clear:both;
width:49%;
float:left;
}
#content > div.box4 {
float:right;
width:49%;
}
Here's a start:
http://jsfiddle.net/jPZLd/11/
I've swapped boxes 2 and 3 so that they flow correctly down then across the page:
<div id="content">
<div class="column">
<div class="jumbotron">
<div class="container-fluid">
<h1>Join now!</h1>
<p>To get full use of the website, register now!.</p>
Sign up
</div>
</div>
<div class="bordertop">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box2</h1>
<p>text</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="box3">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box3</h1>
<p>text</p>
</div>
</div>
</div>
<div class="box4">
<div class="jumbotron">
<div class="container-fluid">
<h1>Box4</h1>
<p>text</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
Footer
</div>
If you need both boxes 2 and 4 to have the same baseline, it's easy if your content is static - just adjust the height of the shorter box manually, eg.
.box4 .jumbotron {
height: 319px;
}
It gets a bit harder if you have to deal with dynamic content. I think you'd end up needing to fake it by applying the background color to the container element and hiding the bits you don't want to see.
Heh, sorry for the long title, but I need a fix for this and have been on it for some time now.
Basically there is a header and I'd like to move content underneath it.
Everything is relative (keeping it centered)
so header has a margin top, z-index, ecc.
The page is relative with a negative margin and contains nested floated columns that wont go up past the header (dammit) and cannot figure out why.
I would like to avoid using absolute positioning if possible.
Here's the code:
<div class="header wrapper-standard">
<div class="logo">
<div class="inside">hello</div>
</div>
<div class="menu-wrapper-outer">asda</div>
<div class="clear"></div>
</div>
<div class="about-page wrapper-standard notop">
<div class="about-page content">
<div class="about-block wrapper-long">
<div class="col col-left text-first">
asda
</div>
<div class="col col-right">
lol
</div>
<div class="clear"></div>
</div>
<div class="about-block wrapper-long">
<div class="col col-left text-first">
asda
</div>
<div class="col col-right">
lol
</div>
<div class="clear"></div>
</div>
<div class="about-block wrapper-long">
<div class="col col-left text-first">
asda
</div>
<div class="col col-right">
lol
</div>
<div class="clear"></div>
</div>
</div>
</div>
Here's the fiddle:
fiddle
Thanks.
Here is a very basic example of how you can have a fixed width, centered page with a fixed header which allows the content to flow underneath:
CSS:
<style type="text/css">
.wrapper{
height:600px;
margin:0 auto;
width:400px;
background-color:#0ff;
}
.header_wrapper {
position:fixed;
background-color:#ffd800;
}
.header {
width:400px;
background-color:#f00;
height:100px;
}
.page {
padding-top:100px; /*height of header*/
}
</style>
HTML:
<body>
<div class="wrapper">
<div class="header_wrapper">
<div class="header">Header</div>
</div>
<div class="page">
Content will be here bla bla etc
</div>
</div>
</body>
Here is a fiddle so that you can see it working: http://jsfiddle.net/JjBG5/1/