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
Related
I'm new to CSS and Bootstrap .
Whenever I try to make a picture stick to left position so I can write text on the right side, I use this Bootstrap class rounded float-left
The problem is the image gets over other content in my webpage like the footer.
I know because it's floating .
How can I fix this ? Thank you.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<img class="rounded float-left" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3rcu77cYuBPWjgD_I1CLIQ0hoD6iArebYfA&usqp=CAU">
</div>
<div class="span10">
<h2> This is a Course Name </h2>
</div>
</div>
</div>
Try like this
Try like this please
<div class="container-fluid">
<div class="row-fluid">
<div class="span2 clearfix">
<img class="rounded float-left" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3rcu77cYuBPWjgD_I1CLIQ0hoD6iArebYfA&usqp=CAU">
</div>
<div class="span10">
<h2> This is a Course Name </h2>
</div>
</div>
You are correct that you should use the "clearfix" class (under the condition that you use float).
You can achieve what you want by inserting a "clearfix" where appropriate.
I attach an image below. I sincerely hope this helps.
upload image
The easiest solution is to use the clearfix utility class, ideally adding it to the div that encloses your float (which would be the div with the class span-2 in your code above). This utility class ensures that the floats are cleared properly, and avoids problems like the one you encountered.
use flexbox or bootstrap grid, or even <table></table>
flexbox tutorial: https://www.tutorialspoint.com/flexbox/index.htm
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!
I want to wrap a group of rows in bootstrap while still having everything in one container. Are there any rules/conventions about this regarding bootstrap?
I put a fiddle below of what i want to do, but i am not sure if this is the right method.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="extraDiv" id="topdiv">
<div class="row">
<div class="col-md-12">Bla</div>
</div>
<div class="row">
<div class="col-md-6">Bla</div>
<div class="col-md-6">Bla</div>
</div>
</div>
<div class="extraDiv" id="bottomdiv">
<div class="row">
<div class="col-md-12">Bla</div>
</div>
</div>
</div>
As far my understanding it is totally okay the way you use .row class in a .container class. For further understanding you can check this link Must Bootstrap container elements include row elements?
Seems fine - though it depends what you want to do with the gutters etc.
Generally you just want one .container wrapping the whole page (to give you the main central column), and within that you can nest as many rows/cols as you need to.
There is a lot of tutorial about bootstrap elements.
But I want to know where I must use nav/header/container/row/well/panel/section
for example..Do it needs use row for column 12?
1- currently I do it this way:
<body>
<div class="container-fluid"> /*only for top navbar*/
<nav>
</div>
<div class="container"> /* for body */
<header></header>
<main class="row">
<div class="col-md-2"></div>
<div class="col-md-5"></div>
<div class="col-md-5"></div>
</main>
<footer class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</footer>
</div>
</body>
Is it true?
2- Is this format true or necessary?
<div class="row">
<div class="col-md-12"></div>
</div>
3- which one is standard?
<div class ="well">
<div class="row"> <div class="col-md-*"></div> </div>
</div>
or
<div class ="row">
<div class="well"> <div class="col-md-*"></div> </div>
</div>
4- dose it need use "container" class for all section or only for parent section?
for 1:- yes it's a correct method. whenever you want to use bootstrap column classes like col-xs-12 in their first parent you must put class " row ".
for 2:- this is true. method also accessory.
for 3:- first option is correct.
for 4:- depends of need of page design. if all site are in same container with then you can put it in parent class.
All options you mentioned are correct.
However, below written structure makes sense. That means if you are using col in container or container-fluid it should be in row.
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
If anytime you want to check how well your bootstrap is written, you can check it on http://www.bootlint.com/
But I want to know where I must use nav/header/section/footer
Well all these fields are only for semantic purpose, actually they all could be div. In the future or even now it is best practise for SEO to use nav for navigation, footer for the footer etc. For example header should be used to introduce content, it often contains <h1> - <h6> tags.
There are many informations to this in the web, here is a reference
All the other bootstrap classes are just styles which you could apply by yourself. A container for example can be used once for all of your content if you never need a full width element, but sometimes you have a situation where you need a full width element (f.e. an image) then you dont want to wrap all of your content into container.
Here you want to use multiple containers and not one for everything (Fiddle)
Hope this helps you a bit.
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.