I am learning bootstrap and I want to know how does the offset set on the
parent element gets applied to the child elements and what is its significance over applying the styles directly to the child element? I saw scenario 1 type of bootstrap set up in one of the popular website.
Scenario 1:
<div class = "footer-offset-padding navbar-offset-padding">
<div class="navbar">
</div>
<div class="main">
</div>
<div class="footer">
</div>
</div>
CSS:
.navbar-offset-padding {
padding-top: 40px;
}
.footer-offset-padding {
padding-bottom: 40px;
}
Scenario 2:
<div class = "nothing">
<div class="navbar navbar-offset-padding">
</div>
<div class="main">
</div>
<div class="footer footer-offset-padding">
</div>
</div>
CSS:
.navbar-offset-padding {
padding-bottom: 20px;
}
.footer-offset-padding{
padding-top: 20px;
}
As a beginner, if I wanted padding I would have followed an approach similar to Scenario 2. I am not able to understand, how does first scenario works. Why don't we add the padding "Directly to the Element Itself (Footer and Header in this case)". Is there some other benefit we get when applying Scenario 1. Please guide me a little. I am not even sure why/how does Scenario 1 even works?
Related
Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>
I am following my previous question that has two boxes, that have two images (can be vertical or horizontal), the issue is the height of boxes are fixed and when I change the window screen in some screen sizes the images bypass the border of the boxes.
I checked answers of these questions 1 and 2 but did not help much.
DEMO
CSS
.items { */
position: relative;
margin-bottom: 7px;
margin-left: 7px;
margin-right: 0px;
text-align: left;
background-color: red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-left: 1%;
height:260px;
}
.col-md-12.col-xs-12.btn>a>img {
float: right;
width: 100px;
height: 50px;
}
.col-md-12.col-xs-12.my-col {
padding-left: 100%;
}
.my-row {
bottom: 0;
padding-right: 0;
position: absolute;
}
.my-row {
bottom: 0;
padding-right: 0;
position: absolute;
}
.btn {
float: right;
bottom:0;
margin-right:-12px;
margin-bottom:-6px;
position:absolute;
right:0;
}
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3 items">
<div class="row">
<div class="col-md-12 text-center">
<h4>T1</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h5>T2</h5>
</div>
</div>
<div class="row">
<div class="col-md-12 row text-center">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
title="T1" data-gallery rel="nofollow"> <img
id="imageresource"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
class="img-thumbnail" width="30%" style="margin-left: 30px;" />
</a>
</div>
</div>
<div>
<img src="#" class="btn" />
</div>
</div>
<div class="col-md-3 items">
<div class="row">
<div class="col-md-12 text-center">
<h4>T1</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h5>T2</h5>
</div>
</div>
<div class="row">
<div class="col-md-12 row text-center">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
title="T1" data-gallery rel="nofollow"> <img
id="imageresource"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
class="img-thumbnail" width="25%" style="margin-left: 30px;" />
</a>
</div>
</div>
<div>
<img src="#" class="btn" />
</div>
</div>
</div>
</div>
</div>
First off, the markup is over complicated for what you want and line 15 and 45 are applying bootstrap classes .col-md-12 and .row on the same element which is in incorrect. Bootstrap class .col-xx-nn must be assigned to a child element with a bootstrap class .row.
Getting back on track to what you want. I have simplified the HTML code to get your desired result, I think. Check it out and let me know what isn't right and I will change it and explain why.
https://jsfiddle.net/6y4uf16y/84/
What I did was create a container div around the sale image that uses the CSS flex box. This div will take up any remaining space. Therefore, if you change the height of your .items element. The flexbox container will adapt and the sale image will respond appropriately to the new size. There is no fixed heights here except for the one that was placed on the .items class of 260px which I believe is what you wanted.
The reason for this is that the bootstrap class .img-reponsive needs a height and/or width attribute to be responsive. Therefore, I have set the height and width equal to the flex box container around it. You can change the width value or .img-sale back to 30% if you wish.
Moreover, as a bonus, I have aligned the button to always be in the bottom right corner as I think you wanted it.
If this answer solves your problem, don't forget to mark it as the correct solution.
Cheers
Edit Sorry wrong JSFiddle link, correct link has been added. I also added proof that it is dynamic with multiple rows of text in the h4 and h5 elements.
You have to add class
.col-md-12 >a>img.btn {
float: right;
width: 100px;
height: 50px;
}
because .col-md-12.col-xs-12.btn>a>img is not applying to any of your given HTML div content
Is it a design requirement that the images get wider as the boxes get wider? If so, the only way to keep the images within the boxes is to increase the height of the boxes as you increase the height of the images.
If it's not a requirement that the images scale up, then you can see my solution here: http://jsfiddle.net/6y4uf16y/75/
All I did was remove the explicit widths from your images (the first was width="25%" and the second was width="30%") and instead used CSS to control the scale by limiting the max-height of the images. .items img {max-height:100px;}.
Since you have a fixed height and need to keep the images inside the boxes, you know for a fact that also have a fixed maximum height on the images
I am not sure if you can have line break on T1 & T2, otherwise you can do this
img{
max-height:170px;
width:auto
}
DEMO
i agree with #Bhavin Solanki and may be the one thing i will suggest that try to give the
width: 100px;
height: 50px;
in to percentages Or else you can go with Media queries for the particular image selectors that will help you to manage a lot
Your HTML Bootstrap code isn't totally correct:
You can't nest a .col-md-12 class inside a .col-md-3 class not
in my knowledge at least.
Your .rows classes are not always well positioned within the code
see the fiddle link that i prepared below.
I tried to do my best to understand what you want to achieve with your code i also ordered tags within your code so that your divs fit the window size regardless of its width.
EDIT
Try to define the width of your image with vw unit (width:15vw;) That will keep the image from crossing the containing item.
I illustrated an example for you here :
http://jsfiddle.net/merhzqwg/65/
Hope it helps.
OK this is the thing, your code is not very clean. there are some errors as well
for eg: you have used the id="imageresource" twice. An id can ONLY be used once on a single page. Very Important.
but i will provide a quick fix for this.
by default bootstrap adds max-width: 100%; height: auto; to the class img-thumbnail to override that what i have done is i have added a class to both of the images img-sale.
<img class="img-thumbnail img-sale" id="imageresource" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong" width="30%" style="margin-left: 30px;" />
and added the following css:
.img-sale {
max-height: 170px;
width: auto;
}
http://codepen.io/anon/pen/OVwrpJ?editors=110
http://jsfiddle.net/6y4uf16y/82/
but the rest of the code is not recommended to proceed with.
This question already has answers here:
What is the use of style="clear:both"?
(3 answers)
Closed 8 years ago.
I was noticing that <div style="clear:both;"></div> had been frequently used in a website between div areas. Given the fact that no other rules such as width and height has been specified for this, what is the effect of this type of usage? an example of the site code follows below
<div id="content">
<div id="middle-cont"></div>
<div id="bot-r">
<div style="clear:both;"></div>
<div class="hwd-module latest-audio"></div>
<div style="clear:both;"></div>
</div>
</div>
<style>
#middle-cont {
padding: 18px 0px;
margin-top: 20px;
margin-right: -40px;
margin-left: -40px;
}
#bot-r, #bot-c, #bot-l {
width: 32%;
height: auto;
float: right;
padding: 5px;
}
</style>
Clear:both
is used to clear any (or for that matter, all preceding) floats.
It basically means "No floating elements allowed on either the left or the right side".
Let us try to understand this with a demonstration :
You can see a couple of examples below:
No clear -> http://jsfiddle.net/0xthns3k/
The html and css are as follows :
HTML :
<div class="left">
</div>
<div class="right">
</div>
<!-- No clear -->
<div class="Green"></div>
CSS :
div {
display:inline-block;
width: 150px;
height:150px;
}
.left {
background-color:Orange;
float:left;
}
.right {
background-color:Red;
float:right;
}
.Green {
background-color:Green;
}
.yellow {
background-color:yellow;
width:30px;
}
This is the image of the generated HTML.
If you see here, the green colored box is placed somewhat in the center of the two floated elements. Well, actually since there are floated elements the new "non-floated" element is actually placed adjacent to the leftmost floated element. Hence, you see the green colored element just adjacent to the leftmost floated element.
Now, if you were to have another element(s) floated left, this would automatically fit between the Orange and the Green elements.
See this below :
http://jsfiddle.net/0xthns3k/1/
Also, the position of this 'new' left floated element wouldn't be that important too with respect to the said HTML.
Placed below green element
<div class="left">
</div>
<div class="right">
</div>
<!-- No clear -->
<div class="Green"></div>
<div class="left yellow">
</div>
Placed after right floated element.
<div class="left">
</div>
<div class="right">
</div>
<div class="left yellow">
</div>
<!-- No clear -->
<div class="Green"></div>
Placed after left floated element
<div class="left">
</div>
<div class="left yellow">
</div>
<div class="right">
</div>
<!-- No clear -->
<div class="Green"></div>
All the above HTML code would generated the same HTML as shown in the image above.
With clear -> http://jsfiddle.net/bk3p160d/
The HTML is only slightly modified here :
HTML
<div class="left">
</div>
<div class="right">
</div>
<div class="clearAll"></div>
<div class="Green"></div>
and one additional CSS class :
CSS
.clearAll {
clear:both;
}
If you see here, the green colored element is positioned below the line containing the aforementioned floats. This is because "clear: both" tells the HTML rendering engine
"No floating elements allowed on either the left or the right side". Hence, it cannot place this element on the same line as it would violate the defination. This causes the engine to place it on a new line. On the line the preceding float properties are essentially nullified. Hence, clear:both is used to effectively clear any preceding floats.
See here for further information : http://www.w3schools.com/cssref/pr_class_clear.asp
Hope this helps!!!
I have two rows a and b,I think the distance between the two rows in vertical is too small.
I want to make the distance more bigger,I know I can change the distance in horizontal by col-md-offset-*.But how to change the vertical distance?
<div class="row" id="a">
<img> ... </img>
<div>
<div class="row" id="b">
<button>..</button>
<div>
Now my solution is insert a tag of h1,I think it is not graceful.
<div class="row" id="a">
<img> ... </img>
<div>
<h1></h1>
<div class="row" id="b">
<button>..</button>
<div>
Does it have more graceful solution?
Instead of adding any tag which is never a good solution. You can always use margin property with the required element.
You can add the margin on row class itself. So it will affect globally.
.row{
margin-top: 30px;
margin-bottom: 30px
}
Update: Better solution in all cases would be to introduce a new class and then use it along with .row class.
.row-m-t{
margin-top : 20px
}
Then use it wherever you want
<div class="row row-m-t"></div>
use:
<div class="row form-group"></div>
If it was me I would introduce new CSS class and use along with unmodified bootstrap row class.
HTML
<div class="row extra-bottom-padding" id="a">
<img>...</img>
<div>
<div class="row" id="b">
<button>..</button>
<div>
CSS
.row.extra-bottom-padding{
margin-bottom: 20px;
}
UPDATE
Bootstrap 4 has spacing utilities to handle this https://getbootstrap.com/docs/4.0/utilities/spacing/
.mt-0 {
margin-top: 0 !important;
}
--
ORIGINAL ANSWER
If you are using SASS, this is what I normally do.
$margins: (xs: 0.5rem, sm: 1rem, md: 1.5rem, lg: 2rem, xl: 2.5rem);
#each $name, $value in $margins {
.margin-top-#{$name} {
margin-top: $value;
}
.margin-bottom-#{$name} {
margin-bottom: $value;
}
}
so you can later use margin-top-xs for example
Use <br> tags
<div class="container">
<div class="row" id="a">
<img src="http://placehold.it/300">
</div>
<br><br> <!--insert one, two, or more here-->
<div class="row" id="b">
<button>Hello</button>
</div>
</div>
There's a simply way of doing it.
You define for all the rows, except the first one, the following class with properties:
.not-first-row
{
position: relative;
top: -20px;
}
Then you apply the class to all non-first rows and adjust the negative top value to fit your desired row space. It's easy and works way better. :)
Hope it helped.
I'm following a tutorial on how and when to use div's. The tutorial can be found here:
http://www.webreference.com/authoring/style/sheets/layout/advanced/index.html
I made four div's with the classes, level0, level1, level2, and level3 respectively. Like this:
<div id="level0"></div>
<div id="level1"></div>
<div id="level2"></div>
<div id="level3"></div>
So I'm working on div #1. The first CSS code implemented is basically setting up margins on the left and right. I think some of my previous CSS might be conflicting but I'm not sure where.
The CSS code for the body is:
body
{
background-color:#FBF8EF;
margin:9px 9px 0 9px;
padding 0;
}
Next the CSS code for div #1 (or rather div #0) is:
#level0
{
background-color:#FC0;
}
I'm not sure if I'm following the tutorial incorrectly or if I'm just writing it wrong but if anyone could lend assistance it would help. Let me know if I missed anything.
Thanks for taking the time to help.
Here is the full implementation for the tutorial you mentioned. you forgot the nesting of divs and also css for others divs.
here is the link : http://jsfiddle.net/WRnUv/
body
{
background-color:#FBF8EF;
margin:9px 9px 0 9px;
padding 0;
}
#level0
{
background-color:#FC0;
}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {
background:#FFF3AC;
}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
<div id="level0">
<div id="level1"> Level 1
<div id="level2"> Level 2
<div id="level3"> Level 3
</div>
</div>
</div>
</div>
You didn't seem to follow the tutorial and nest your divs:
<div id="level0">
<div id="level1"> Level 1
<div id="level2"> Level 2
<div id="level3"> Level 3
</div>
</div>
</div>
</div>
A div with no content and no width or height set will not take up space on the screen and therefor will not show the color. Give it some content or dimensions.
example:
http://jsfiddle.net/HaJc4/
<div id="level0">content</div>
<div id="level1"></div>
<div id="level2"></div>
<div id="level3"></div>