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:
Related
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.
Here is my Bootstrap 3 jsFiddle, although you'll likely need to view it in full screen view in order to see it in all its glory.
As you can see, there are two TB3 "wells" called Herps and Derps. They are currently sitting on top of one another, and furthermore, they are wider than the navbar, jumbotron and footer wells.
I'd like these to both be next to each other on the same line/"row", and I'd like the two wells to be the same width of all the other contents. I'd also like to have a bit of padding (spacing) between the two wells so that they're not smushed right up next to each other.
My best attempt (from that jsFiddle above):
<div class="row">
<div class="span6">
<div class="well">Herps</div>
</div>
<div class="span6">
<div class="well">Derps</div>
</div>
</div>
...does not seem to be doing the trick. Any ideas where I'm going awry?
You need to use the col-x-y css styles for your wells for the appropriate screen size and columns. In this case, you could use col-sm-6 since you have two columns.
<div class="row">
<div class="col-sm-6">
<div class="well">Herps</div>
</div>
<div class="col-sm-6">
<div class="well">Derps</div>
</div>
</div>
JSFiddle
Bootstrap Grid System
I'm trying to position sidebar on the right side in a site based on Bootstrap grid.
Well, this is very simplified layout that I've made - jsFiddle
I admit it's not the good use of bootstrap classes (rows etc.) but it works.
The problem is: the sidebar html code must be under the text and content (because of SEO), so it must be somehow positioned next to content (class .content).
I tried positioned it as an relative element but didn't have any luck.
The text in .text div does not have static height, it will change
The .content will have same height every time
Is this more what you were after?
<div class="container">
<div class="row">
<div class="col-xs-9 pull-right">
<div class="col-xs-12 content">Main</div>
<div class="col-xs-12 text">Lorem</div>
</div>
<div class="col-xs-3 sidebar pull-left">
<p>sidebar</p>
</div>
</div>
</div>
jsFiddle
Basically I've split your entire container 3 to 9, and then made your 'content' and 'text' blocks children of the '9' column. I then applied both the pull-left and pull-right class to the relevant containers.
I also fixed up your HTML a bit as it was missing a div tag. I also got rid of some of the text to make the code more readable to me!
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>
Im using the newest twitter bootstrap to construct a responsive grid website. i have three divs across a responsive grid like so:
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
...and this works as intended via the bootsrap documentation. However I have a separate background color on these divs from the html body background color, and when i drag the browser window to a smaller width to "collapse" the divs to show on top of each other, the gutter space between them disappears (creating a look of one big div versus three separate ones) is there anything i can do to create some gutter space between the divs when the width gets small enough to cause them to stack vertically?
You have a couple options...
(1) You could define a class and apply it to any divs you want to have a bottom margin.
In your application.css (or similar):
.mb10 {margin-bottom:10px;}
In your html page:
<div class="row-fluid">
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
</div>
OR
(2) You could make sure you wrap your div.span4 content in <p></p> tags.
<div class="row-fluid">
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
</div>
From the Bootstrap - Typography section:
http://twitter.github.io/bootstrap/base-css.html#typography
In addition,
<p> (paragraphs) receive a bottom margin of half their line-height
(10px by default).