I'm having troubles with getting the grid to work, i have followed multiple tutorials and forums, but nothing will work. I'm using Sublime Text for my editor, and copying all the CDN tags and wrapping everything in a div="container"
Whenever i preview it, the text appears on the far left, what could I be doing wrong?
here is the pen
added some classes and css.
<div class="container">
<div class="row row-centered">
<div class="col-xs-12 col-centered">
Hello World!
</div>
</div>
<div class="row row-centered ">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row row-centered">
</div>
</div>
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
Read this for more details
Related
I'm new to learning Bootstrap and I'm looking have 2 col-md-6 divs next to one another having one background-color blue and the other white. How can I change one background color and not both?
I'm trying to get a look similar to below the full width photo on this website. Minus the image on the left. I just want a block white and a block blue. http://tympanus.net/Freebies/Boxify/
CSS
.bg-primary {
background-color: #1a52c6;
}
HTML
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="col-md-6">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
<div class="col-md-6 blue">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
</div>
</div>
</div>
You can target that div from your stylesheet in a number of ways.
Simply use
.col-md-6:first-child {
background-color: blue;
}
Another way is to assign a class to one div and then apply the style to that class.
<div class="col-md-6 blue"></div>
.blue {
background-color: blue;
}
There are also inline styles.
<div class="col-md-6" style="background-color: blue"></div>
Your example code works fine to me. I'm not sure if I undestand what you intend to do, but if you want a blue background on the second div just remove the bg-primary class from the section and add you custom class to the div.
.blue {
background-color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="about">
<div class="container">
<div class="row">
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="col-xs-6">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
<div class="col-xs-6 blue">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
</div>
</div>
</section>
You could hard code it.
<div class="col-md-6" style="background-color:blue;">
</div>
<div class="col-md-6" style="background-color:white;">
</div>
Not Bootstrap specific really... You can use inline styles or define a custom class to specify the desired "background-color".
On the other hand, Bootstrap does have a few built in background colors that have semantic meaning like "bg-success" (green) and "bg-danger" (red).
I'm trying to make some space / gap between 2x col-sm-6 inside an row. Have tried some methods from earlier posts here from Stack Overflow, but none seem to make the right result.
What I have tried:
<div class="row">
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
</div>
Well... this creates the right spacing, but then the left and right sides are not allign with the rest of the page content. To help you guys understand what I'm trying to explain, here is a picture.
Here you can see that the upper white content, the width is what I'm trying to keep for all the elements inside the page. I know its because the extra div I added, because the following code is producing the upper white content box you see in the picture, but then there is no spacing. Have also tried with col-md-5 and an offset of 2 but this creates too much spacing.
<div class="row">
<div class="col-sm-6 contentpage3">
</div>
<div class="col-sm-6 contentpage3">
</div>
</div>
What am I doing wrong?
You can do something like this.
All .col-* elements should be inside row elements.
All .col-* elements should contain content, not be content.
.example {
padding-bottom: 15px;
background: #ccc;
}
.example > .row > div {
margin-top: 15px;
}
.example .inside {
height: 50px;
background: #fff;
border: 1px solid #eee;
}
<div class="container-fluid example">
<div class="row">
<div class="col-xs-12">
<div class="inside"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="inside"></div>
</div>
<div class="col-xs-6">
<div class="inside"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
I am new with Bootstrap 3 and just want to know how can I use .container class from Bootstrap with my own fixed wrapper.When I have fixed container of the page for example
.wrapper {
width:960px;
}
and .container class from Bootstrap, how can I combine and use in my web page ?
<div class="container">
<div class="wrapper">
<div class="row">
<div class="col-md-12">
Text content here
</div> </div> </div> </div>
is it correct ?
Thanks!
no need for the extra div. You could just do
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
Text content here
</div>
</div>
</div>
.wrapper {
max-width: 960px;
}
Note that I used max-width in stead of width, or the responsiveness would be lost.
I am using the following to create a 3 columns layout feel to my website:
<div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
</div>
The above works great, and no matter how many foo items I added, it will format it to three columns layout automatically. However, I wanted to add a boxed feeling to each of the foo item, so that it does not look like that they're attached to each other. To achieve this, I added margin to the foo class:
.foo
{
margin: 3px 3px 3px 3px;
}
Adding the above, changes the layout become a two column layout.
My goal is to replicate responsive boxed layout, just like one we find in google plus.
Since the Bootstrap cols already having padding, you could make the content of your columns boxed.. For example, the panel creates a boxed effect.. No additional CSS required:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here..</div>
</div>
</div>
Demo on Bootply: http://bootply.com/96277
Also, you may be interest in this Bootstrap Google+ project:
http://iatek.github.io/bootstrap-google-plus/
http://jsbin.com/akaQufU/3
Put a div inside the col-* this can be done.
CSS
body {background:#eee}
/* demo */
.container {padding:3%;}
/* put a div inside .foo style for demo */
.foo > div {
background:#fff;
margin-bottom:4px;
padding:2%
}
/* adjust row margins */
.row.foo-row {
margin-left: -2px;
margin-right: -2px;
}
/* adjust padding */
.row.foo-row .col-sm-4,
.row.foo-row .col-md-4,
.row.foo-row .col-lg-4 {
padding-left: 2px;
padding-right: 2px;
}
HTML
<div class="container">
<div class="row foo-row">
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
</div>
</div>
how about adding inset border instead
.foo
{
border-color:transparent;
border:inset 3px;
}
because margin will be calculated as a column extra width
anyway if you want to seperate them without using borders , then just use padding
.foo
{
padding:3px 3px 3px 3px;
}
Your columns should already spaced properly by your code and bootstrap's grid system, you just need need to added a margin to the bottom to stop them touching.
margin-bottom: 3px;
The problem you had with it converting to a 2 column was because you were adding side margin of 3px as well, which throws bootstraps grid system out.
You can't use padding (well) because bootstrap uses it for spacing and that will be more pain than gain.
I downloaded the twitter bootstrap, then customized the starter-template.html file with the following very basic code:
<body>
<div class="container">
<div class="row">
<div class="span8 outsidecontainer"> ... </div>
<div class="span4 outsidecontainer"> ... </div>
</div>
</div>
</body>
So far so good. It shows up fine and the widths are OK too. As you notice, I tried adding an "outsidecontainer" style to bootstrap.css, at the very bottom, which is:
.outsidecontainer{
padding:5px;
background:#f2f2f2;
border-color:#cfcfcf;
border-width:0px;
border-style:solid;
border-radius: 5px;
}
For some reason, this styling doesn't show up though. What am I doing wrong? Something tells me it's at the very code level, not the CSS, because not even the background color changes.
You've added extra padding, which will result in the spanX divs no longer fitting inside the row.
Try this instead...
<body>
<div class="container">
<div class="row">
<div class="span8"><div class="outsidecontainer">...</div></div>
<div class="span4"><div class="outsidecontainer">...</div></div>
</div>
</div>
</body>