I have an image I'm trying to code divs based on with Bootstrap and HTML+CSS
The image looks like this:
I'm looking to have 3 of these side by side via bootstrap with
What I am currently struggling with is the split inside of each with the top part and bottom parts such as in the example photo.
Is there an easy way to do this? Ideally I'd like the top section of the div to be a different background color, with the image on the left and the text next to it on the right, with the bottom part of the div a separate color.
Any tips are greatly appreciated!
For layout, you can use something like this:
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
and insert you card instead of "column" word.
Bootstrap Grid system
<div class="row">
<div class="col-4">use BS card or create using div</div>
<div class="col-4">use BS card or create using div</div>
<div class="col-4">use BS card or create using div</div>
</div>
Related
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 making a web app which should list objects gathered from json in a tile-based list (kinda like shopping store), where every tile is a div. What is the best way to do that in Bootstrap ? I'm using Angular and I want to do it with a help from ng-repeat directive. If the number of divs exceed view area, scroll bar should appear.
This is graphical view, how I want it to look like.
What is actually the best way to implement that?
Thanks in advance.
You can use the regular bootstrap grid system
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
The width of the page is 12 units, so divs of width 4 will give you 3 columns. If you keep adding divs with a total width of more than 12, it will be placed in diferent rows.
In the example I gave you, you should get exacly 2 rows with 3 elements in each.
<div class=container>
<div class="row">
<div class="col-sm-4" ng-repeat="tile in tiles">
<div class="panel panel-default">
<div class="panel-header">
{{tile.header}}
</div>
<div class="panel-body">
{{tile.body}}
</div>
</div>
</div>
</div>
</div>
Something like this maybe? I use col-sm-4, that way 3 tiles can be visible in a row. When the screen becomes smaller, then 700-something, it will be layed upon eachother instead.
Use bootstraps grid system. Put all the divs in a container with .row class and mark the ng-repeated div with .col-sm-4 Add max-width: and overflow: auto to your container so you get the scrolling.
so I'm trying to make a bootstrap website but I don't really know how to customize the widths and position of these grids. I'm a bootstrap beginner. Could you please help me? It DOESN'T have to be accurate so bad but I need to keep the layout.
How it should look like:
http://i.imgur.com/WAE161o.png
HTML:
<div style="margin-top:200px;" class="container">
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<!--THIS ONE IS FOR THE MIDDLE, CENTERED AD-->
<div class="col-md-4 column">
</div>
<div class="col-md-4 column">
</div>
</div>
<div class="row clearfix">
<div class="col-md-2 column">
</div>
<!--THIS ONE IS FOR BUTTONS STICKED TO THE POST ON THE LEFT-->
<div class="col-md-1 column">
</div>
<!--THIS ONE IS FOR THE POST AND BUTTONS STICKED ON THE BOTTOM-->
<div class="col-md-4 column">
</div>
<!--THIS ONE IS FOR THE SIDEBAR-->
<div class="col-md-3 column">
</div>
<div class="col-md-2 column">
</div>
</div>
</div>
From Bootstrap 3.0 release
col-vp-push-x = push the column to the right by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.
col-vp-pull-x = pull the column to the left by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.
vp = xs, sm, md, or lg
x = 1 thru 12
So the answer to your question is push/pull columns. For example, your ad row should be like this:
<div class="row">
<div class="col-sm-8 col-sm-pull-2 col-sm-push-2 advertisement">
your center column
</div>
</div>
and so on. See fiddle here
If you need specific columns with pixel-specific widths, you can't use the Bootstrap grid. The Bootstrap grid is broken into 12 equal sized columns. You can still use Bootstrap, just not the grid part. There is some limited customization that can be done with the grid system, but I don't think it can approach what you are trying to do. You'll need to use custom CSS to position the site how you want it.
If you just want something similar and don't care about exact widths, then you should follow the grid documentation. You are moving in the right direction but when you have nested columns you need to make sure you wrap in a row, which you don't have. You can also use the col-md-offset-* styles to shift columns so you don't have to "use" all 12 columns. For example for the main part of the site you might want the first column to be ".col-md-3 .col-md-offset-4" and the second ".col-md-3".
I need to divide the browser window into two fluid rows so that regardless of size, they are stretched across the screen. In the first row i need to add different columns which should be centered automatically. Basically it looks like this:
The problem is that I can not center cols in first row and rows are not stretch to the browser height. My code looks like this:
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
</div>
You can use offset to center div
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-3 col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
</div>
And you can change padding for ajust space between blocs.
See on fiddle http://jsfiddle.net/JtzE6/
Also take a look at the Alignment Classes on twitter bootstrap documentation (Twitter Bootstrap Documentation). You should be able to apply these to any element tag in html. It worked for me.. Hope this helps..
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>