I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>
Related
I am trying to build a website with flash-cards to help learn the Hebrew alphabet. My Card partial view looks like this:
#model FlashCards.MultipleChoice.ViewModels.CardViewModel
<div class="index-card">
<div class="row">
<div class="col-md-offset-5"></div>
<div class="col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
Now the col-md-offset works on all but the first row, causing the card to render as in the below image:
Now why isn't the 1 in the image offset like the glyph and the name for the letter Aleph?
My CSS file for these cards only contains the following so far:
.index-card {
height: 150px;
}
.index-card .card-symbol {
font-size: large
}
I believe you're using the offset classes wrong; do not apply them to empty divs.
Your text is centered. Second and third rows have widths of 8 columns. It looks like the offset is working but it really isn't. The first row is only 2 columns wide. None of your offset divs are having any effect on the layout.
You need to do something like this, at the very least:
<div class="index-card">
<div class="row">
<div class="col-md-offset-5 col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
I am trying to adapt a layout on Bootstrap that I got from the designer. Two columns in the content has a small spacing, that I couldn't achieve with direct column-spacing (as it gives too much gap). Thus, I tried wrapping everything into a row and adding sub-columns inside my main columns. Here in the code, it's more clear:
<div class="container">
<div class="col-md-12 banner"></div>
<div class="row">
<div class="col-md-8">
<div class="col-md-12 leftSide">
</div>
<div class="col-md-12 leftSide">
</div>
</div>
<div class="col-md-4 rightSide">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Now the spacing seems good but as I wrapped it in a row (I think), the right panel overflowed more then the banner.
It can be seen more clear on the fiddle: http://www.bootply.com/gMBrLvaK5C
The problem is the 'rightSide' panel.
How can I keep that spacing between 'leftSide' and 'rightSide', and fix the overflowing of the right column (because the spacing gets too much if I try achieving spacing with columns)? Or what is the best way to achieve that?
this is my personal solution, instead of add a class on the columns, create a div inside of a column, then you can place a div.banner and div.block like my example:
http://www.bootply.com/PEIiDnp9VD
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="block"></div>
</div>
<div class="col-md-4">
<div class="block"></div>
</div>
</div>
</div>
if you want less space between the columns you can simply override Bootstrap col-md-* class by adding a class on the columns changing the padding left and right.
First of all, you need to follow proper wrapping of rows and columns. If you want consistency you need to make sure all columns are wrapped into a row.
<div class="row">
<div class="col-md-8 leftSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-4 rightSide">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
Then apply custom margins and styling to elements inside of the columns, not columns themselves.
http://www.bootply.com/g6eLHRd1tH
I'm wondering what is the best way to stack a div? Would I be best off using the div class table? Here is my code
<div class="row">
<div class="col-md-5 content1">
[rotatingtweets screen_name='lauterbachgroup']
</div>
<div class="col-md-4 content2">
<p>Gallery</p>
</div>
<div class="col-md-3 content3">
<p>content3</p>
</div>
<div class="col-md-5 content4">
<p>content4</p>
</div>
</div>
I am trying to get the last content box to flow underneath the first box. I think I may be overthinking it but I have a couple more things I would like to try but, any advice would be great.
I'm trying to have image next to the headline in one row, both centered in Foundation 5. Example is here.
HTML
<div class="row">
<div class="panel small-12 column">
<div class="row">
<div class="small-5 column text-right">
<img src="http://placehold.it/60x60&text=logo" />
</div>
<div class="small-7 column text-left">
<h1>APP NAME</h1>
</div>
</div>
</div>
</div>
In this example solution isn't ideal because it is not centered exactly especialy on the large screens.
I've also tried something like this:
HTML
<div class="row">
<div class="panel small-12 column text-center">
<img src="http://placehold.it/60x60&text=logo" />
<h1>APP NAME</h1>
</div>
</div>
But it doesn't work: image isn't centered. What is the best way how to do this in Foundation 5?
Since an img is an inline element and h1 is a block element, you should put the image inside the heading. See the JSFiddle demo.
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="panel small-12 column text-center">
<h1><img src="http://placehold.it/60x60&text=logo" alt="" /> APP NAME</h1>
</div>
</div>
Additionally, alt is a required attribute, so I've added one with a blank value.
I'm building a website using Bootstrap 3.
Part of this site are 4 div-containers:
<div class="container">
<div id="content" class="row">
<div class="col-sm-4 col-md-3" style="background-color:#00F; color:#FFF">
Menu
</div>
<div class="col-sm-12 col-md-3 col-md-push-6 " style="background-color:#F00;">
<div class="row">
<div class="visible-md visible-lg col-md-12" style="background-color:#F08;">
Mod_1
</div>
<div class="col-md-12" style="background-color:#F80;">
Mod_2
</div>
</div>
</div>
<div class="col-sm-8 col-md-6 col-md-pull-3" style="background-color:#0F0;">
Main content goes here
</div>
</div>
</div>
Layout-View is shown here:
Code on Fiddler
"Mod_1" is only visible in the desktop view like expected. "Mod_2" should move above the Menu and Main container in the tablet view, but I can't find a way to place the container on top of both of them.
I already tried to use the col-sm-[colnumber]-push and -pull classes. But I didn't get the right results.