I'm a noob to html programming, but basically I want to have 3 divisions that look something like this:
| | |
| 1 | 2 |
| | |
-------------------
| |
| 3 |
| |
Right now, I'm using bootstrap and I can have columns beside each other using the div classes. But that only works if I want to do columns. For example:
<div class=col-lg-6>
Also, I can't use a fixed size, because div2 might be bigger than div1 or vice versa depending on the info that I get. Any suggestions to how I can do this?
I'm not entirely sure what you're asking. Did you want something like this?
https://jsfiddle.net/Garconis/zqptbjur/
This is utilizing Twitter Boostsrap CSS:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6" style="background: gray;">
Content1
</div>
<div class="col-xs-6" style="background: wheat;">
Content2
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="background: tan;">
Content3
</div>
</div>
</div>
If you don't want to use javascript, you can make those divs have fluid width like 30%, 70% and set their display property to 'inline-block', set the wrapping div's white-space property to 'nowrap'. After that, adding a br tag will drop the third div down. ..or you can just use table layout which I'd never suggest.
Related
I want to present name, phone and email like this:
| Joe Shmoe | 555-555-5555 |
| | joe#shmoe.net |
And when the name get's too long, I want to wrap like this:
| Josephine | 555-555-5555 |
| Hosssenpfefer | jfine#mail.net |
And when the email get's too long, I want to overflow like this:
| Joe Shmoe | 555-555-5555 |
| someverylongemail#mail.net |
I created this html, which defines a row with two half-width columns. The right hand column has two nested rows, and each of those nested rows has a full width column...
<div class="row">
<h5 class="col-xs-6 list-group-item-heading">Joe Shmoe</h5>
<div class="col-xs-6">
<div class="row">
<p class="col-xs-12 list-group-item-text text-right">555-555-5555</p>
</div>
<div class="row">
<p class="col-xs-12 list-group-item-text text-right" style="color:navy">joe#shmoe.net</p>
</div>
</div>
</div>
This almost works, but as you can see in this fiddle, the bottom nested row won't right-align. (You might need to make the view narrow to see the problem).
I'd like it right aligned just like the nested row above it. Furthermore, when the content is long, I'd like that content (not wrapped) to overflow on the left side, spilling into the left column if necessary.
Can someone give advice? Thanks!
I would try using a table for this. It might need additional styling, but find tables make it easier to handle the longer characters. Is this at all on the right track?
<div class="col-xs-12">
<table class="table">
<tr class=""><td class="col-xs-6">Joe Shmoe</td><td class="col-xs-6 text-right">555 555-5555</td></tr>
<tr class=""><td class="col-xs-6"></td><td class="col-xs-6 text-right">somereallylongemailaddress#reallylongemail.com</td></tr>
</table>
</div>
I have the following simplified markup:
<div class="row">
<div class="col-lg-3" ng-if="isSuperUser()">
Conditional column 1
</div>
<div class="col-lg-3">
Column 2
</div>
<div class="col-lg-6">
Column 3
</div>
</div>
I want Column 3 to take up the last 6 grid columns always. I also want the contents of Column 1 or Column 2 if not a super user to take up the first 3 grid columns depending.
The problem is when the Column 1 is not displayed, Column 2 and Column 3 shift to the left such that Column 3 is no longer on the right side. A solution that seems hacky is to add a <div class="col-lg-3" ng-if="!isSuperUser()"> before Column 3, but it seems like there may be a better solution.
I can't see anything in Bootstrap's documentation that demonstrates this functionality. I see there is push and pull classes, but they don't seem to be what I'm looking for.
Thanks in advance.
JSBIN
you can try nest row into the .col-xs-*. That's mean you could use the out row to fixed position before you want hidden something.
<div class="container">
<div class="row">
<div class="col-xs-6">col 6
<div class="row">
<div class="col-xs-2">
2
</div>
<div class="col-xs-10">
10
</div>
</div>
</div>
<div class="col-xs-6">col 6
<div class="row">
<div class="col-xs-12">
your purpose
</div>
</div>
</div>
</div>
</div>
You are looking to offset columns in Bootstrap. Conditionally add the class .col-lg-offset-3 to the second column.
Is it possible in bootstrap to move div from one row to another?
I need something like this:
Desktop/tablet:
-----------------------------
|Brand |search| #row1
-----------------------------
|Menu: | MAIN CONTENT |
|-link 1| | #row2
|-link 2| |
|-link 3| |
------------------------------
Mobile:
-----------
|Brand | #row1
-----------
|Menu: =|
|-link 1 | #row2 (expanding/collapsing navbar with menu and search form)
|-link 2 |
|-link 3 |
| search |
| |
| Main |
| content | #row2
| ... |
| ... |
-----------
On mobile, i need to move search form from #row1 to collapse menu in #row2.
Unfortunately, no. There's no way to accomplish this as you currently have it. One possible compromise would be to have the original search box become invisible at a certain screen size and have another search box, identical in functionality, that is shown where you need it at that point. For example:
<div class="row">
<div class="col-xs-12 col-sm-6">
Brand
</div>
<div class="col-sm-6 hidden-xs">
<input type="text" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<ul class="menu">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div class="visible-xs-block">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-sm-8">
<main>Main Content</main>
</div>
</div>
Obviously you don't want to make a habit of this kind of thing, but sometimes the optimal layout requires you to do things like this.
Gah lost all my rep opening a Bounty and now I can't comment.
Would it be a viable option to start using a framework? Not to promote any framework in particular but personally I started using Zurb Foundation for the reason you have described alone. http://foundation.zurb.com/
I am trying to create a layout with bootstrap 3 that is like the following
ASCII art of what I'd like to happen, the boxes are images.
bunch of texts bunch of texts bunch of texts ----------------
bunch of texts bunch of texts bunch of texts | |
bunch of texts bunch of texts bunch of texts | ______________ |
bunch of texts bunch of texts bunch of texts
---------------
| |
------------------------------------------------- | |
| | ---------------
| |
| | ----------------
| | | |
| | | |
------------------------------------------------- ----------------
Here is the html code:
<h1 class='title'>Project</h1>
<div class='row'>
<p class='col-md-5 col-sm-5'> bunch of texts * 20</p>
</div>
<div class='row'>
<img class='col-md-7 col-sm-8 img-responsive' src='test1IMG1.png'/>
<div class='col-md-5 col-sm-4'>
<img class='img-responsive' src='testIMGsm.png'/>
<img class='img-responsive' src='test1IMGsm.png'/>
<img class='img-responsive' src='test1IMGsm.png'/>
</div>
</div>
I can't seem to get top of the small image next to the texts. The top of small image is being pushed down to align to the left larger images.
I need to get it to work on the iPad and desktop. Can someone help me to fix this? Thanks a lot!
You have two rows, one with the text, and the one below with two columns.
If you want the text and large image to be in one column, and the other images to be in another column, put both columns inside a single row. Like so:
<div class='row'>
<div class='col-md-5 col-sm-5'> bunch of texts * 20
<img class='col-md-7 col-sm-8 img-responsive' src='test1IMG1.png'/>
</div>
<div class='col-md-5 col-sm-4'>
<img class='img-responsive' src='testIMGsm.png'/>
<img class='img-responsive' src='test1IMGsm.png'/>
<img class='img-responsive' src='test1IMGsm.png'/>
</div>
</div>
You should make two columns and put the large image in the left column.
Something like:
<div class='col-medium'>
<p>bunch of texts * 20</p>
<img src='test1IMG1.png'>
</div>
<div class='col-small'>
<img class='img-responsive' src='testIMGsm.png'>
<img class='img-responsive' src='test1IMGsm.png'>
<img class='img-responsive' src='test1IMGsm.png'>
</div>
This is how I would do it, hope it helps: http://jsfiddle.net/9477x/
I have multiple floated blocks. Is it possible to specify which block should be cleared?
Check following structure:
+------------+ +--------------------+
| | |+--------+ +-------+|
| float:left | ||fl left | |fl left||
| | |+--------+ +-------+|
| | |+------------------+|
| | || ||
| | || block that clears||
| | || prev 2 floated ||
| | || blocks but doesn't|
| | || clear first fl. ||
| | || block ||
| | |+------------------+|
| | +--------------------+
+------------+
in html:
<div class="floated-left-column">
left column content
</div>
<div class="right-column">
<div>
<div class="float-left">...</div>
<div class="float-left">...</div>
</div>
<div>
This block should clear only ".float-left" blocks (not ".floated-left-column")
</div>
<div>
Here is some content
</div>
</div>
You need to float the parent block on the right hand side "left" as well. You can float and clear in sub-containers and the parent container will not clear.
I see you added an example now. Float left the DIV "right-column"
This is basic HTML/CSS layout. Take a look at this JSFiddle example.
When you clear a float, it will usually only clear floats within the same container, or lower. This is why when you put something with clear: both into your container at the top level it clears everything.
I have solved it with following html. Thank you for your help. Is it ok solution for my problem (it works but I don't know it works in other browsers and etc.)?
<div class="floated-left-column">
left column content
</div>
<div class="right-column">
<div class="floated-left-with-100-precent-width">
<div>
<div class="float-left">...</div>
<div class="float-left">...</div>
</div>
<div class="clearfix"></div>
</div>
<div>
This block should clear only ".float-left" blocks (not ".floated-left-column")
</div>
<div>
Here is some content
</div>
</div>
This is probably pretty easy to do using bootstrap. If you're designing a new site from scratch, bootstrap's an excellent place to start anyway..