I have a bootstrap grid/row that looks like this...
<!--column a-->
<div class="col-sm-3">
</div>
<!--column b-->
<div class="col-sm-6">
<!-- I want this div to always be fixed at the top of column b and take up 15% of column b's height-->
<div>
<h1 id="mainText">
Some main text
</h1>
</div>
<!-- I want these 2 divs to be centered within the remaining 85% of column b's height-->
<div>
<p id="bodyText">
Some body text
</p>
</div>
<div>
<h2 id="detailText">
Some detail text
</h2>
</div>
</div>
<!--column c-->
<div class="col-sm-3">
</div>
I want the top div within column b (that contains the h1 element "mainText"), to always be fixed at the top - accounting for, say the top 15% of the column.
I then want the remaining 2 divs (containing "bodyText" and "detailText") to be vertically centered/spread-out within the remaining 85% of column B.
I can achieve the vertical center effect on all 3 divs within col-sm-6 by simply adding "margin:auto" to col-sm-6 (but of course this means "mainText" might slip down further than 15% of column B). So I experimented adding another div (with "margin:auto") around the last 2 divs, but it had no effect at all.
Does anyone have any suggestions on the best way to combine these 2 requirements of fixing one div within a bootstrap column, and spreading out the other 2? Really struggling to visualise the right way to structure this so appreciate any thoughts at all.
Related
I'm getting back into frontend, so I'm making myself a portfolio page for practice, I'm using the css framework called Bulma I can't figure out why the "1" on the left isn't centered. I have 4 total divs in the body, 1 to hold the 3 columns, and the 3 columns sized in thirds
These are what my divs look like. I didn't feel like making a navbar in traditional CSS, so I used a framework for it. I'm using the repl IDE, here is the website where you can view my issue.
I basically just want those 3 divs to be centered, so I can add text in the middle div, labeled as "2". I made the two other divs so I can set some "boundaries".
<div class="columns"> <!--defines where the columns are-->
<div id="left" class="column is-one-third">1</div>
<div class="column is-one-third">2</div>
<div class="column is-one-third">3</div>
</div>
I see from your example that the divs are centered, but the text inside them is not.
<div class="columns">
<div class="column is-one-third has-text-centered">1</div>
<div class="column is-one-third has-text-centered">2</div>
<div class="column is-one-third has-text-centered">3</div>
</div>
I centered the text with has-text-centered and added a background color to demonstrate:
I have the following basic layout, in which to show a flash-card - the detail-card:
<div class="col-md-4"></div>
<div id="cardContainer" class="col-md-4 text-center detail-card-container">
#Html.Partial("_DetailCard", cardModel)
</div>
<div class="col-md-4"></div>
I know I could just use col-offset but I have plans for the other two columns.
My vision here was to divide the page into three columns, give the middle one, detail-card-container, class text-center so that the content of that div should be horizontally centered inside it.
Yet when I start up the app, I get a display as follows:
The blue is the available space in the detail-card-container for the 'detail-card, outlined in red. The detail card is fixed width 200, and the available space is about 400+ .This is displaying at the left of its available space, not in the centre as intended. The empty spaces to the left and right of the green in the image are the emptycol-md-4` divs.
What am I doing wrong?
Maybe you could give a specific width, display: block, plus margin-left: auto, margin-right: auto.
Use
<div class="col-md-4" align="center">
I am trying to center two of my divs in Bootstrap 3's grid. The problem is, together they span 9 columns, which is an odd number of columns. My first div spans 6 columns, and the second one spans 3 columns. This leaves me with 3 extra columns for whitespace, but I'm not able to figure out how to divide this up equally to the left and right. I can either have 2 empty columns on the left and 1 on the right or the other way round.
For example, this gets left aligned:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6">
<div id="myFirstDiv"></div>
</div>
<div class="col-md-3">
<div id="mySecondDiv"></div>
</div>
<div class="col-md-1"></div>
</div>
If there was a way to make the first column 1.5 and the last 1.5, that would be have been perfect. Is there anything I can do to center my content?
I have tried using center-block, but this doesn't seem to have any effect.
So you want a .col-md-1andahalf class?
Just create one, if that's what you need:
#media (min-width: 992px)/*or whatever*/{
.col-md-1-5 {
width: 12.5%;
}
//.....
}
It seems I can't really solve this problem after two whole days of research and various tests.
I need a div which contains two div standing side by side as two columns, like in the image.
http://i.gyazo.com/bbfdcf09a2178fc0e662c59fae995988.png
The first div (in white) must assume the right size to contain properly the two columns.
I tried basically two ways:
1) make the two columns to float:left and add a clear:both empty div. The problem is, when one column become taller then the first, it wraps around it.
The code is:
<div style="position:relative; background-color:#fff">
<div style="float:left; width:50px;">
this is the first column
</div>
<div style="float:left; font-family:trebuchet MS, sans-serif;">
The second column..contains various divs.
<div> a header </div>
<div> some more contents </div>
<div> a footer </div>
</div>
<div style="clear:both;"></div></div>
2) make the two columns position:absolute and place them manually. It works, but I can't get the container to resize properly..
I don't know the context of this bit of code in relation to the rest of the code on your page, but can you make the outer div float? Because it contains two divs that do float but it itself does not, it collapses and its white background doesn't extend down to match the height of the divs within it. Having it float too means it does and you could also get rid of the <div style="clear: both;"></div> tag.
I've stripped out some of your code to leave just the crux of what I'm getting at:
<div style="float: left;">
<div style="float:left; width: 50px;">
this is the first column
</div>
<div style="float: left;">
The second column..contains various divs.
<div> a header </div>
<div> some more contents </div>
<div> a footer </div>
</div>
</div>
Using twitter bootstrap, I'm trying to float some .well divs inside a modal box, but it's giving me all kinds of headaches.
Basically, I want each well to contain two things, some text on the left, and an image on the right. I want those two in the same row. Then, I want the wells floating next to each other.
Unfortunately, I can't get the content of the well to work correctly. The text always gets squished to the left, and the image is also to the left, and the entire right side is empty.
Here's my css:
<div class="modal-body">
<div class="row-fluid">
<div class="span4 oneBook">
<div class="well">
<div class="row">
<div class="span2">
<p><strong>Book Title</strong>: Claw of the Conciliator<br>
<strong>Author:</strong>: Gene Wolfe<br>
</div>
<div class="offset3">
<img class="img-polaroid smallerImage" src="http://www.picturesofbooks.com/claw-of-the-conciliator"/>
</div>
</div>
</div>
</div>
</div>
</div>
The div with the class oneBook would be repeated multiple times for however many books I want to display in the modal.
Does anyone have any suggestions to get this to work?
<div class="offset3 span3"><img class="img-polaroid smallerImage" src="http://www.picturesofbooks.com/claw-of-the-conciliator"/></div>