I know I have done something silly, but still learning BS3, can anybody tell me why this page does not go across in three rows, but shows only one per row?
I am using data driven information, code is below, and my problem can be viewed at http://ncpeachrecipes.com/index.php (I know this is usually frowned upon, hope this is ok)
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-4">
<div data-binding-id="repeat1" data-binding-repeat="DETAILS.data">
<div class="thumbnail">
<img class="img-circle" src="" data-binding-src="images/th_{{IMAGE}}" />
<div class="caption" align="center">
<h5><strong>{{NAME}}</strong></h5>
<p>View the Recipe </p>
</div>
</div>
</div>
</div>
</div>
</div>
Its because you create a row and 1 column this means it will only create 1 colum.
If you put the repeat in the column block it will create them alongside each other instead of underneath.
Related
I want to have my web layout setup like this on MD and larger:
img - content
content - img
But on a smaller screen I want the content to come first and then the image, like so:
content
img
I can do this with this line of code on my row where the row is img-content:
flex-column-reverse flex-md-row
But all of this is dependent also on how I order the HTML, I am using vue components, so I dont want to change my html order, it might add too much complexity
So I keep the HTML order consistent.
This is my code:
<div class="row p-5 flex-column-reverse flex-md-row">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title ">lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>
// Next row
<div class="row p-5 flex-column-reverse ">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title "> lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>
here is the setup in jsfiddle
The reverse class does reverse the order but The problem with this approach is for some odd reason, the next row that should be content-img, the image gets pushed to the next line.
Anyone got any idea why and how to have it not push to the new line?
A little bit of back n-forth found out the solution.
flex-column-reverse
-is a vertical reverseŕ,thus its always pushing it to the new line, so having it be the only one on it, our row doesn't know to change on a larger size so we add this:
flex-md-row-reverse
note the row in it, since we are setting it, horizontally
If you want content / image – content / image on small screens, then you should set the order that way. Then, to have the content and images switch place on larger screens, add order-md-first to the even lines.
I’ve modified the code from your Fiddle:
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title ">Title 1</h2>
<p class="about-p text-muted">Desc 1</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper">
<h2>MY IMAGE1</h2>
</div>
</div>
// Next row
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title "> Title 2</h2>
<p class="about-p text-muted">Desc 2</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper order-md-first">
<h2>MY IMAGE2</h2>
</div>
</div>
</div>
I am new to Skeleton framework and am trying to build a two column layout for a blog project. So far this is what I have:
<section class="list-posts">
<div class="container">
<div class="row">
<div class="nine columns posts">
[NINE COLUMNS]
</div><!--nine columns-->
<div class="three columns aside">
[ASIDE]
[/ASIDE]
</div>
</div><!--row-->
</div>
but as more columns are added to the .posts class the aside collapses. Your help will be appreciated.
Not sure if I understand your problem, but if you are trying to nest columns you need to put a row div within the nine columns, and end the row(s) for every twelve columns.
If this is not the case, could you please provide a more specific clarification of your problem with a link or image.
Well after waiting for some hours without getting any help, i decided to get my hands dirty, this is what i did
<section class="content">
<div class="container">
<div class="row">
<!--LIST ALL THE POSTS HERE-->
<div class="twelve columns">
<div class='twelve'>
<div class='row single-entry'>
<div class='six columns'>
...
</div>
<div class='six columns'>
...
</div>
</div><!--row-->
</div><!--twelve-->
</div><!--row-->
<!-- ASIDE-->
<div class="four columns aside border-between">
<div class="row ">
<div class="twelve columns">
<div class="twelve">
<h4 class="standing">Recommendations</h4>
</div>
<div class="twelve columns recommended-articles">
<div class="three columns">
<img src="images/footer.png" class="u-max-full-width">
</div>
<div class="nine columns recommended-articles-details">
<h6 class="article-title">4 top SEO trends for 2017</h6>
<p class="author_name">Joel Orok</p>
</div>
</div>
</div>
</div>
</div>
</section>
I am looking to implement the following table where the name column uses two rows while age and location uses one. The text would be centered in their own row:
Is this bootstrap compliant? If so, how would you implement such a table?
Thanks.
Yep, you can nest rows and columns in bootstrap. The markup would look something like this.
<div class="container">
<div class="row">
<div class="col-sm-4">
<h1>Name</h1>
<div class="row">
<div class="col-sm-6">
<p>John Smith</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>Contractor</p>
</div>
</div>
</div>
<div class="col-sm-4">
<h1>Age</h1>
</div>
<div class="col-sm-4">
<h1>Location</h1>
</div>
</div>
</div>
I am using Bootstrap v-3.0.2. And I faced an issue while using pull-right into div col class.
please have a look at following URL.Check both full screen and minimized view.
Bootstrap-3 issue
In Mobile-view both panels are merged. But it should be separate.
Both div panels class has grid axis value 12 (col-xs-12).
If I am try with different value it is working fine.
Is it a bug on bootstrap 3 ?
Use col-sm-push and col-sm-pull instead.
Also, you don't need to use col-md-6 and col-lg-6 if you want 50% width columns on any screens larger than xs...
<div class="container">
<!-- div's are merged.But It should be one after another -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Right Panel</h3>
</div>
<div class="panel-body">
Right Panel content
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Left Panel</h3>
</div>
<div class="panel-body">
Left Panel content
</div>
</div>
</div>
</div>
</div>
Bootply
I'm not sure why you would need to add .pull-right to the columns, but if you add .clearfix to the other column, it should resolve this issue.
I think you might get better results using the .col-xx-pull-x and .col-xx-push-x classes to accomplish the same thing. See the grid documentation "Column Ordering" section for more info on this.
I have some problems with column ordering after disabling responsiveness in Bootstrap 3.
<div class="row">
<div class="col-xs-9 col-md-push-3">...</div>
<div class="col-xs-3 col-md-pull-9">...</div>
</div>
If i do so, it affect layout on resolution below 1024 - blocks change places.
I've tried another solutions, like this one...
<div class="row">
<div class="col-xs-9 col-xs-push-3">...</div>
<div class="col-xs-3 col-xs-pull-9">...</div>
</div>
... and this one...
<div class="row">
<div class="col-md-9 col-md-push-3">...</div>
<div class="col-md-3 col-md-pull-9">...</div>
</div>
... and none of them work properly.
I just want to disable responsiveness and force col-9 block go first in HTML document and col-3 go after it at any resolution, but col-3 block (sidebar) must be aligned left and col-9 block (main content) must be aligned right.
Any suggestions?
Also read http://getbootstrap.com/getting-started/#disable-responsive and /or try maybe. https://github.com/bassjobsen/non-responsive-tb3. Using the col-xs-* classes seems right (cause they never stack). The xs grid don't have pull, push and offset classes.
Add an float right seems a solution in your case:
<div class="container" style="background-color:white;">
<div class="row">
<div class="col-xs-9" style="background-color:red;float:right;">Right</div>
<div class="col-xs-3" style="background-color:yellow;">Left</div>
</div>
<div class="row">
<div class="col-xs-9" style="background-color:green;">Right</div>
<div class="col-xs-3" style="background-color:blue;">Left</div>
</div>
</div>