Is there a way to create a .col on a bootstrap page so that it goes all the way to the edge of it's container?
I would like the image in the example (which is in a .col-xs-12 inside a .row inside a .container) to use up all the space up until the edge of the container. I can solve this with pure JS resizing it as needed but I would prefer to solve this using pure CSS approach (if possible). As it is now I have tried several different variants of negative margins and relative positioning but all end up with it either not being perfectly aligned to the edge or messes something else up as well.
Here is a base example of how the page is coded: https://www.bootply.com/wVw5jnKa35
Here if you want to achieve your requirement than you can add custom class in your col-xs-12 class
Like this
HTML
<div class="col-xs-12 no-pad">
<img class="FullWidth" src="http://calendar.volego.ru/img/users/wallpapers/20160215081029217.jpg">
</div>
CSS
.no-pad {
padding: 0;
}
You don't need to define and use a custom class for this purpose.
simply, At line 8, change:
<div class="col-xs-12">
to
<div>
Related
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 using bootstrap and I was wondering what would be a clean way to give a background to my container.
I am using the bootstrap class container, not container-fluid. Bootstrap doc clearly states that I shouldn't nest containers, so what is the alternative to achieve this goal ? If I set a background to my container the left and right margins are still white, I want to colour that space as well, but I also want my content to be aligned the way the container is aligned, not the way the container-fluid is aligned. Any suggestions ? My current solution is nesting a container inside container-fluid and remove the padding from the first one, but I want to make a better solution that doesn't go against the bootstrap documentation.
Thanks in advance !
EDIT
Here is for example what I had
<div class="container-fluid my-class">
<div class="container">
Some rows and columns here
</div>
</div>
and then I override bootstrap's padding in css
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.my-class {
background: red;
}
But, like I said, this is the bad way to do it.
Bootstrap doc clearly states that I shouldn't nest containers under other containers so just nest your container div under a new class div say, container-bg and add the background-image to that div like this:
HTML:
<div class="container-bg">
<div class="container">
<!-- your content -->
</div>
</div>
CSS:
.container-bg {
background: xxx;
}
If you want to set the background for the whole page, then set it on body.
If you want to set it for a section of the page, then wrap that section in an appropriate element (such as div or section), add a class, id or some other way to target it with a selector … just not one that uses a class provided by Bootstrap.
For Boostrap V4.0 and later
If you want to use boostrap colors as background, you can use these colors for the background, like below example
<div class="container bg-dark">
<!-- your content -->
</div>
I am using angularjs and bootstrap3. What is the proper procedure for centering widgets within a panel and obtaining responsive behavior? I am getting unique results in Firefox.
I have 4 column divs that are demarcated like this, each including a panel:
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="panel panel-default">
I have created a css class for called "center-block" for div's that I want centered. The center-block class is below.
.center-block
{
display: table;
margin: 0 auto;
}
I am using the justgage widget (http://justgage.com/)and angular-justgage (https://github.com/mattlaver/angular-justgage). The versions are:
<script src="./lib/angular-thirdparty/justgage-1.2.2/raphael-2.1.4.min.js"></script>
<script src="./lib/angular-thirdparty/justgage-1.2.2/justgage.js"></script>
<script src="./lib/angular-thirdparty/angular-justgage-master/ng-justgage.js"></script>
These are being included in the panel in the following manner:
<div class="center-block">
<just-gage id="thing" title="THING" min="40" max="220"
label={{thingstring}} value={{thing}}>
</just-gage>
</div>
I am also using some input-groups, toggle-switches, etc. Each within its own div with the center-block tag. This is how I am stacking the widgets vertically, and centering them within the panel.
The whole system works well and is responsive to screen changes EXCEPT on Firefox. In Firefox38, the justgage widget doesn't render at all, and in Firefox 46.01, it renders, but it isn't perfectly responsive as it moves to one side of the column as the page is shrunk and the columns reduce from 4 to 2 to 1 and back.
I am an experienced programmer, but not an experience web developer, and I was wondering if this behavior is to be expected in the world of browsers, of if I am doing something fundamentally incorrect with bootstrap and the centering of widgets.
bootstrap has some offset classes for aligning the grid. may be this link will help you to solve the issue
http://getbootstrap.com/css/#grid-offsetting
To horizontally center an element using margins remember the following "rules":
Your element can not be a float. No float left, right or whichever float property in your class. Margins do not move floated elements.
Your element must have a fixed width. For example: width: 400 px.
You need to display the element at a block level, using the property display: block.
Last, but not least use your property margin: 0 auto;
Example:
.center-block {
width: 400px;
display: block;
margin: 0 auto;
}
My buttons don't work when I put .pull-left. I tried using the W3C validator on the document, but no problem detected.
Here's the code.
Because you've made .secondline display as block and are positioning it, it's "covering up" the button.
You can keep it block level, but instead of positioning along an axis, try positioning with line-height.
.secondline {
width: 100%;
z-index: 1;
display: block;
line-height: 24px;
}
However, I think it's a better end result to use the grid system for this. Below is an example of what you could do using the content from your first result. (Of course, you would need to add your code and content)
<div class="row">
<div class="col-xs-12">
V ➜ GARE CORNAVIN (21:44)
</div>
</div>
<div class="row">
<div class="col-xs-6">
Button
</div>
<div class="col-xs-6 text-right">
19 minutes
</div>
</div>
You're dealing with HTML structure issue rather than a Bootstrap issue. One of your HTML elements appears to be covering the button. It appears as though it's your "time" span. I would recommend trying to restructure your HTML with your button in a div class and the minutes in another div class. You have a lot of span elements there that could probably be eliminated to simplify your markup.
Another solution is to increase the z-index of the covered element, your code is no longer linked but try adding style="z-index:2147483647" to the parent of the element with .pull-left
I have a fiddle here which shows my issue. You may need to make the 'result' quadrant wider to show the issue.
I have a couple of columns in my bootstrap layout but I can't seem to get my button to layout inside the parent div, it always seems to overlap it:
At first I thought it was due to the padding of the columns in bootstrap but I have removed that and the problem persists. I'm obviously missing something fundamental about how this is supposed to work, so any pointers to some help with css might not go amiss either.
apparently I have to link to some code to include a link to a fiddle so here is some:
My html is:
<div class="col-md-3 col-lg-3 nopadding">
<div class="definition-pallette">
<div class="row nopadding">
<div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
</div>
</div>
</div>
and the additional css on top of the bootstrap default is:
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Seems to be a few things going on here. The main issue is you are using a lot of divs with a class of 'col' inside your 'row' divs. To get them to start behaving you need to define what size the col is. This fixes most of your problems. So for example, where you have this
<div class="row">
<div class="col">Some content</div>
</div>
Change that to something like
<div class="row">
<div class="col-xs-12">Some content</div>
</div>
And it starts behaving.
I also got rid of your .nopadding class as you don't need that.
Here is an updated fiddle - http://jsfiddle.net/T4XY4/1/ - it fixes most of the things in the right panel, but I'll leave the rest to you. You may want to choose which classes you actually want inside your 'row' divs, I just chucked in xs-12 for simplicity.
Edit
The Bootstrap docs confirms that if you are nesting columns you need proper col-* classes - http://getbootstrap.com/css/#grid-nesting
Its caused by bootstraps margins in the row class adding margin:0; to your no padding class will fix this but might cause layout issues in other places or on mobile devices.
.row {
margin-right: -15px;
margin-left: -15px;
}