I have a problem positioning my title inside a div with grid classes (from bootstrap).
Here is my very simple code:
<body class="" >
<div class="container " id="main">
<div class="row " >
<div class="col-xs-3 " >
</div> <!-- /col-xs-3 -->
<div class="col-xs-9 " >
<h3 class="">Benvenuto</h3>
</div> <!-- /col-xs-9 -->
</div> <!-- /Row -->
</div> <!-- /container -->
</body>
There is no custom CSS added.
Here is my chrome output:
And here is my ie7 output:
As you con see using chrome the h3 si put inside the bootstrap div, while using ie7 is put under it.
This is my test website, if you need to check it out.
Do you know how to solve it?
Thanks!
As knitevision stated in his comment; IE 7 is not supported by Bootstrap.
IE 8 and 9 are partially supported.
(IE 8 needs responsive.js for responsive features to work)
But, there are some tricks to make it work if you absolutely need it, see this page: Bootstrap 3 for IE7 (Beta). I haven't tested it on your page, but it might be worth a try!
See this page for for information on Bootstrap browser-support: getbootstrap.com
Related
First off I would like to say that I know I am not the most efficient or clean in my HTML.
My problem is that the custom CSS I write does not apply to my webpage at all. Bootstrap seems to be working perfectly fine, but when I try to make any edits or overwrite Bootstrap it just flat out doesn't work. I know that my custom CSS file is linked properly because it's in the same directory as bootstrap.css
Linking:
<head>
<title>Help Menu</title>
<!--
==============================================================================================================
REFERENCES (BOOTSTRAP 3.3.7) (jQuery 3.1.1)
==============================================================================================================
-->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/bootstrap/css/custom.css" rel="stylesheet" >
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/bootstrap/js/npm.js"></script>
<script src="/jquery/jquery.js"></script>
<!--
==============================================================================================================
BOOTSTRAP REFERENCES DISTRO 3.3.7
==============================================================================================================
-->
</head>
For example I am able to change the background color of the panel using the <style> element:
<div class="container">
<div style="background-color: #4286f4;" class="panel panel-default">
<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>
<p>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Frequent Problems
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Printers
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Drivers
</div>
</div>
</p>
</div>
</div>
But I cant change the color of the panel using external CSS (the following CSS snippet is in custom.css):
.lukedbgcolor {
background-color: #4286f4;
}
<div class="container">
<div class="panel panel-default lukedbgcolor">
<div class="panel-heading"><h1>What Do You Need Help With?</h1></div>
<p>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Frequent Problems
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Printers
</div>
</div>
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-2">
Drivers
</div>
</div>
</p>
</div>
</div>
I have tried putting the CSS at the very bottom of the bootstrap.css and I have also tried putting the lukedbgcolor class first like this:
<div class="lukedbgcolor panel panel-default">
ALL help / advice / criticism is welcomed,
Thanks!
The issue was temporarily fixed by using Bootstrap's CDN instead of hosting it locally. I believe the larger problem had to do with caching which can be fixed by the following, <link href="XXX.css?v=1.0" rel="stylesheet" type="text/css" />
Cache fix courtesy of #mayersdesign
This is due to the way that CSS works, it will give certain priorities to styles depending on where they are located. The reason defining in the HTML (also called an inline style) works is because it's given higher priority.
Using multiple stylesheets can cause problems and there are various solutions. You can use the keyword !important to give a certain style highest priority. It's generally discouraged because it makes it harder for others using your code to see why a style is being changed but if it's just yourself then go ahead:
.lukedbgcolor {
background-color: #4286f4 !important;
}
.panel.lukedbgcolor {
background-color: #4286f4;
}
Generally in CSS, the more specific selector is taken into account.
Let's say you have the following div:
<div id='myId' class='someClass'></div>
with the following CSS:
.someClass{
background-color:red;
}
#myId{
background-color:blue;
}
the div's background-color will be blue because it's more specific.
It's possible that the style of bootstrap provides a more specific selector than yours, and therefore overrides it.
Try adding an id to your div and see if it makes a difference. (since id's are unique they're as specific as can be)
I cannot (yet) comment on the original post. How are you loading this page? Are you seeing any errors in the browser console? The advice above to use the browser devtools and examine the element, see if the class is there, and if it is being applied or overridden by other defined styles would be the way to approach it.
You also want to have jquery.js loaded before the bootstrap.js, because bootstrap.js depends on jquery.js being loaded first. The browser console would also tell you this - it's a very useful tool!
Evening all,
I'm having a little trouble with the grid system and am looking fir a bit of guidance here.
Take the following code for example:
<div class="container">
<div class="row"> <!-- PROBLEM -->
<div class="col-md-12">
<div class="problemclass">
</div>
</div>
</div> <!-- /PROBLEM -->
</div> <!-- /container -->
</header>
<main>
<div class="container">
<!-- WORKS -->
<div class="row">
<div class="col-md-4">
<div class="notproblem">
{CONTENT}
</div>
etc...
As you can see, I've marked a row as PROBLEM in the header and it contains a 12 column span. The CSS for problem class is set at about 300px height and a background image (It is set at 300px because the background image is 300 px in height). the code looks like this:
.problemclass{
height: 300px;
background: url('background.png');
}
Everything stacks and lays out perfectly... until I size the browser down to test the stacking. At this point, the row marked PROBLEM will begin to completely overlap the row marked WORKS; the content will overlap the background image, and the actual div goes under the background image! I have no freaking clue why LOL! My guess is that maybe I cannot have just a background with a set height and expect it to work?
Any advice would be appreciated, and I hope I was clear enough.
Also note that there are 2, 6 column grids above the 12 column grid in the same row that I did not include in attempt to keep the code a little more clean and clear.
In this layout, I want to place a circle (with fixed size) at the intersection of the column and a line on the bottom left corner of the page (which should be a no scroll page). The circle should look like this image.
I’ve started doing it with the flexbox property, however this was the first time I used this property and I am not getting how to do this.
Does anyone know how can I do it?
<div class="wrap">
<div class="hud1">
<div class="gps box"></div><!-- /gps -->
<div class="info box"></div><!-- /info -->
<div class="phone box"></div><!-- /phone -->
</div><!-- /hud1 -->
<div class="speed">
<div class="circle"></div>
</div>
<div class="hud2">
<div class="status box withfocus">
<h1>Estado</h1>
</div><!-- /status -->
<div class="media box withoutfocus">
<h1>Multimédia</h1>
</div><!-- /media -->
<div class="environment box withoutfocus">
<h1>Ambiente</h1>
</div><!-- /environment -->
<div class="settings box withoutfocus">
<h1>Definições</h1>
</div><!-- /settings -->
</div><!-- /hud2 -->
</div><!-- /wrap -->
Here’s the code:
http://jsfiddle.net/marisaroque/mR7nq/
EDIT:
Here’s the image:
Link
Thank you in advance!
Is it like this: http://jsfiddle.net/HUmLb/embedded/result/ ?
The key is making .hud1 a one-column flex, and in the last item inserting a .hud2 row.
I still couldn't make it center vertical, but I presume it's a good start.
Let us know.
Edit
http://jsfiddle.net/ngxyW/
I put an empty box in the lower corner and fixed the wrap div to bottom left.
This is a great reading about flex display: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am looking into a future project and I want to build it with bootstrap. I want it to be a boxed ( non-fluid ) layout limited to 1170px ... [actually on a side note I'm currently working with bootstrap V2 because I haven't looked properly at V3 yet but eventually I will work out the same or similar thing out in V3].
So what I need is to have full width panels ( these are quite popular lately in "flat design") with constrained content. That is ... all the content would be limited to a max width of 1170px but the backgrounds would be spanning the full width of the browser.
So I know this markup works but a) is it OK to have nested "container" divs like i've done and b) I haven't seen this technique before ... is there any better way (more standard way) that I might be missing ... and I appreciate that it may be better to start with version 3 but I would rather work this out in V2 first for my old projects if for nothing else
<div class="container-fluid" >
<div class="container" >
<div class="row">
<div class="span12"><h2>Boxed" Bar ( limited to 1170px)</h2></div>
</div>
</div>
<div class="row" style="background:#666">
<div class="span12"><h2>Full Width Bar with no limits to content</h2></div>
</div>
<div class="row" style="background:yellow">
<div class="container" >
<div class="row">
<div class="span12"><h2>Full Width Bar with content limited to 1170px</h2></div>
</div>
</div>
</div>
</div>
I found a premium bootstrap marketplace and analyzed some of the themes on there. It looks like something along these lines is a better model.
<div class="my-own-wrapper" > <!-- eg 100% width to wrap entire site -->
<div class="container" >
<div class="row">
<div class="span12"><h2>Boxed" Bar ( limited to 1170px)</h2></div>
</div>
</div>
<div class="whatever" style="background:#666"> <!-- non bootrap div 100% width -->
<div><h2>Full Width Bar with no limits to content</h2></div>
</div>
<div class="whatever" style="background:yellow">
<div class="container" > <!-- wrapping bootstrap scaffolding in display div -->
<div class="row">
<div class="span12"><h2>Full Width Bar with content limited to 1170px</h2></div>
</div>
</div>
</div>
</div>
Obviously it might be better to use some html5 elements too.
I know the very basics of CSS and recently went on with using CSS frameworks because it made my life much easier. I have a question in terms of grid systems, am currently using zurb foundation 3 (http://foundation.zurb.com/)
The problem am facing is mostly when creating a row i cannot give it a specific height. It seems to me like grid systems are designed to use as it is, I read in different places that it is not recommended to try and change the height of a row and to just place items inside it as it is.
In my project, I have a content area whereby I want to display a fixed height and width div but its not working for me. so, can any one advise me what should i do? below is my html code
update: edited the html
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
</div>
Your 'style' declarations are wrong
style="height=6em; width:5em;
should be
style="height:6em; width:5em;"
NOTE: you used = instead of : AND you missed the closing quotation "
And you should not use inline styles - separate to a .css file and target them by class
<html>
<head>
<link rel="stylesheet" type="text/css" href="/foundation3/stylesheets/foundation.css"/>
</head>
<body>
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
</div>
</body>
</html>
NOTE: I have not declared a DOCTYPE here - this is barebones. It does work I have tested it in Firefox and Chrome. Just stating it does not work is not helpful OP