I'm working on a static, responsive HTML page.
I made a div with class 'row' then put another div with class 'col-2' that is empty then another div with class 'col-2' that has some text in it. This text should be displayed 16.6% away from the left most point of the browser. However, that's not the case unless I put something inside the first div with class 'col-2' - instead, it's putting that text at the left most point on the page, as if I didn't have a div with class 'col-2' before it.
I get that since the div is empty it's not being displayed but then how am I suppose to use the grid view exactly?
Code:
<div class="section header">
<div class="row">
<div class="col-2"></div>
<div class="col-2">
Title
</div>
</div>
</div>
divs are displayed as full-width blocks by default. If you want the col-2 class to display inline with a specified width, you need to declare it as such:
.col-2 {
display: inline-block;
width: 16.66666%
}
example: http://jsfiddle.net/dno5dzgL/5/
Related
On my webpage, I have a div element on the left with a static width of 300px. Right next to it, on the right, I want to display another element which has a dynamic, flexible width (because the browser window could be resized by the user) by using the Bootstrap grid with col-12. Imagine this:
<div class="row">
<div style="width:300px;"></div>
<div class="col-12"></div>
</div>
The div with class="col-12" should be right next to the left div, without space in between of them, and it should be growing/flexing always to the right of the window.
Unfortunately, it seems not to work, having a static px-width on the left element, and on the right an flex element with col-12. The second div is always BELOW the first div. Do you know a solution? Thanks in advance!
Try giving the second div in the row the class "col".
<div class="row">
<div style="width:300px;"></div>
<div class="col"></div>
</div>
Regards!
I'm new to CSS-frameworks.
Normally I start my markup within the body by adding a div with the class "wrap". The purpose of that, is to get the content horizontally centered. And for having a top-, bottom-margin.
Now with Foundation I would like to keep that approach. But I'm not sure where to put the "wrap"-div.
That's what I got currently:
.wrap {
margin: 10px auto;
}
<div class="wrap">
<div class="row">
<div class="small-12 columns">
<div class="callout">
<h1>Lorem Ipsum</h1>
</div>
</div>
</div>
</div>
Demo with Foundation added on CodePen: http://codepen.io/mizech/pen/LWBOvQ
I mean: It works but I'm not sure if I do it right.
Shall I keep it the way it is? Or should I put the "wrap"-div somewhere else?
Should I perhaps leave the "wrap"-div at all (when using Foundation) and doing something else instead?
You don't need a wrap div. Foundation has a maximum width set on the .row so anything inside it will conform to that grid. If you need you can add a class with vertical margins or padding to that row. If you need a full width row you just add the class .expanded to it.
I am attempting to create a pattern of two divs, side by side, repeating vertically. One side is to contain an image (which I've done using CSS background image) and the other text. The side which contains the image alternates each row.
The divs use the Bootstrap grid's col-sm-6 class. It looks great on desktop but I'm having trouble getting it to look good on smaller devices.
The issue is that because of the order in which the code is written, when it collapses down to 100% width on mobile it goes:
image
text
text
image
image
text
instead of:
image
text
image
text
image
text
The only workaround I've thought of so far is to have two of each image div, one before and one after the text div, and to hide or display them based on the size of the screen. Not a great solution though. Any thoughts?
put your content like following
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
This will give you what you want
In the end I put them all in the same order and then went with this:
.campaign-idea:nth-child(odd) {
.image {
float: right;
}
}
I want to draw a line below a paragraph with hr element. The propbelem is that the p element has 15px padding in bootstrap but the hr element spans to the full available width. The line below the paragraph extends 15px left and 15 right to the paragraph's width. So I just did the following:
<div class="row">
<div class="col-lg-12 text-justify">
<p>
Some text is here.
</p>
</div>
<div class="row">
<div class="col-lg-12"> <div class="col-lg-12"><hr></div></div>
</div>
I nested col-lg-12 directly inside col-lg-12. But in bootstrap we ought to nest .col inside .row classes. So is it okay use col class inside col class here?
No. It's not a Bootstrap best practice since as you mentioned col should be inside row.. The effect will be extra spacing on the left and right side of the inner col. The inner columns will wrap and not layout horizontally as expected.
"content must be placed within columns and only columns may be
immediate children of rows"
i want to create a responsive webpage with twitter bootstrap. I have a picture which should be a certain width and a bar with a background color which should have the same width and both should be aligned on the left and right side.
As Bootstrap uses padding-left:-15px; padding-right:-15px; I have this effect:
http://codepen.io/anon/pen/thsgC
This confuses me. How can I align both rows with Bootstrap accordingly without overwriting bootstraps own css classes .row and .col-xs-12
Thanks.
In Bootstrap the col-* class has padding on it. To get around it you can either override it (not recommended) or place the background coloured div inside another div:
<div class="col-xs-12">
<div class="navigation">color</div>
</div>
Like this http://codepen.io/anon/pen/ixcmg
Actually both rows are aligned correctly. The problem is in the first row, image element is child of col-xs-12 element while in second row, navigation class is on the same div element which has col-xs-12 element
try to put navigation class in child element of col-xs-12 like this
<div class="row">
<div class="col-xs-12">
<div class = "navigation">
color
</div>
</div>
</div>
also its not good practice to overwrite bootstrap's own classes, you can give extra class to the element which should be used to overwrite bootstrap css property values.