I am trying to achieve a similar look to paypal.com's page. I am having trouble right aligning some of my content. I have a cover bg for each section, but I need the content to shift left and right.
I am not 100% understand your question, but as align in paypal.com modify your div as below
<div class="pull-right section col-md-6 light text-left">
add "pull-right" and make it "text-left"
Hope this is helpfull!!!
in bootstrap there are some specific classes to text alignment
.text-left{
/* Text align left */
}
.text-right{
/* Text align right*/
}
.text-center{
/* Text align center*/
}
Using above mentioned classes you can align content aswell as
inline-elements in your layout. you should also check bootstrap documentation on the same topic http://getbootstrap.com/css/#type-alignment
I am not really sure what you are trying to achieve. You should elaborate and and a little better so that we can help
.text-center, .text-right, .text-left, .pull-right, .pull-left
are all helper methods in bootstrap for positon also look into using the grid
NOTE: this was removed in Bootstrap 3.
Pre-Bootstrap 3, you could use the CSS class pagination-centered like this:
<div class="span12 pagination-centered">
Centered content.
</div>
Class pagination-centered is already in bootstrap.css (or bootstrap.min.css) and has the only one rule:
.pagination-centered{text-align:center;}
With Bootstrap 2.3.0. just use class text-center
Related
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>
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 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.
I use twitter bootstrap 2 version.
<div class="span4">
&{'main.menu.with.me'}
&{'main.menu.raise.request'}
</div>
I need to put 2 buttons to the right with space between them. But if I put pull-right to both there is no space between them, I injecting doesn't help.
not very good at html, but I'd do something like this:
bootstrap 2:
<div class="span4">
<div class='pull-right'>
&{'main.menu.with.me'}
&{'main.menu.raise.request'}
</div>
</div>
in this case you'd want a div.clearfix after the one with pull-right and there is no css involved unless you want more space between buttons then bootstrap already has.
(update 4.08.2016) bootstrap 3:
<div class='btn-toolbar'>
&{'main.menu.with.me'}
&{'main.menu.raise.request'}
</div>
simply add pull-right to both the buttons
the, to give space :
.btn{
margin-right:10px;
}
Also, keep in mind that, pulling right would change the order of the buttons...so better swap according to your layout (i have done that in my fiddle example)
fiddle demo
.span4 .btn {
margin-left: 10px;
margin-right: 10px;
}
There are some options I can choose from when it comes to horizontal center alignment with Bootstap.
I can either use offset class or use blank span class as a placeholder.
One other option can be using custom alignment like the following
.center {
float: none;
margin: 0 auto;
}
None of these options solve my issue because the content of the div container has to fill up the width by 100%.
Let's say I have the following
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 offset4">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
</div>
If the buttons do not fill up the whole div space of span4, I won't get the real center alignment. Perhaps, I can make the content stretch to 100% but I don't know if this is any good practice.
Here I have a canvas to play with. JS BIN
Since you have inline elements you can just use the .text-center class on the span, also your're probably better off using offsets than empty elements:
HTML
<div class="row-fluid">
<div class="span4 offset4 text-center">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
Updated demo: http://jsbin.com/ayuFEhO/2/edit
You don't need add a new class, if you want horizontal align this buttons, just use .text-center here is a bin http://jsbin.com/UVeGejO/1/edit
Obs: text-center class already exist on twitter's bootstrap code.