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>
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 am having trouble to put in horizontal lines between 2 images. Not sure how to go about doing this as I have just started learning Bootstrap.
I would like to achieve like the below image:
http://i.stack.imgur.com/9vJdm.png
Just have a look at this code will be useful for you
<style>
img{
width:10%;
display:inline-block;
}
.col-lg-5, .col-lg-2{
padding-left:0px;
padding-right: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5" style="text-align:right">
<img src="path/img1.jpg">
</div>
<div class="col-lg-2">
<hr>
</div>
<div class="col-lg-5">
<img src="path/img2.jpg">
</div>
</div>
</div>
</body>
Based on the size of the image(default) you can change width and col-lg-, col-md-, col-sm-, col-xs- values and also CSS. Its working fine for me.
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
I'm having a really simple problem with css but the solution is not coming to me. It's about positioning elements in a grid, I want the grid elements to look like this, but instead they are coming out to look like this. I tried putting one tag inside the other and then attempting to remove the box model from it (margin and padding) but the div is offset. I've tried nesting both inside a div tag but that doesn't work either.
I attempted to do a jsfiddle but it's not loading correctly. Fiddle . required random code below of the html.
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div></div>
<div class="col-md-7" style="height:40px">head text
<div class="col-md-7" style="margin-left:0px;padding-left:0px;margin-top:40px;box-sizing:border-box;">nav</div>
</div>
</div>
</div>
Just fyi the bootstrap col-md-1 through col-md-12 are bootstraps grid positioning system. I think they have to add up to 12 to form a single line. Here is the bootstrap html i am using.
and the grid css . and bootstrap
Your jsfiddle is not displaying correctly because the default iframe size is too small, but you can change the width to view the page in a manner consistent with your problem. Your problem is that you have a div nested inside another div by mistake. Try the following instead:
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div class="col-md-8" style="height:45.3px">head text</div>
<div class="col-md-8" style="height:40px;">nav</div>
</div>
</div>
<!-- /container -->
I'm having problems getting several divs to function as two columns. In the code below I want the container (or content) and right to act as two columns.
Both need borders (non-image) where the border in between both should be the same visual width as the outer borders.
Both columns need to have the same height between top and bottom
right should be fixed size
Is this even possible without changing the HTML?
Take the following HTML:
<body>
<div id="top"></div>
<div id="container">
<div id="content">
</div>
</div>
<div id="right">
</div>
<div id="bottom"></div>
</body>
This will do what you want.
Markup
<body>
<div id="top">top</div>
<div id="container">
<div id="content">
content
</div>
<div id="right">
right
</div>
<br style="clear:both" />
</div>
<div id="bottom">bottom</div>
</body>
CSS
#container {border:1px solid blue;}
#content, #right {float:left;}
#content {width:400px; border-right:1px solid blue;}
Doesnt anser your issue fully, as your question is a tad lightweight, but you can position divs however you want. Fiddle here: http://www.jsfiddle.net/ozzy/F3K8k/
Have updated fiddle: http://www.jsfiddle.net/ozzy/F3K8k/1/