I have a set of 3 horizontal panels. I want to add some padding inbetween each panel so it looks better.. Here is what it looks like currently.
Here is my html
<div class="container-fluid">
<div class="row">
<div class="col-md-4 panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Eating Healthy</h3>
</div>
<div class="panel-body">
<p class="panel-content">
Hello, it's me. I was wondering, if after all these years you'd like to meet. To go over everything. They say that time's supposed to heal ya. But i ain't done much healing. Hello. Can you hear me? I'm in California. Dreamin about who we used to be, when we were young and free.
</p>
</div>
</div>
<div class="col-md-4 panel panel-default ">
<div class="panel-heading">
<h3 class="panel-title">Health Calculators</h3>
</div>
<div class="panel-body">
<p class="panel-content">
Hello, it's me. I was wondering, if after all these years you'd like to meet. To go over everything. They say that time's supposed to heal ya. But i ain't done much healing. Hello. Can you hear me? I'm in California. Dreamin about who we used to be, when we were young and free.
</p> </div>
</div>
<div class="col-md-4 panel panel-default ">
<div class="panel-heading">
<h3 class="panel-title">Health and Awareness</h3>
</div>
<div class="panel-body">
<p class="panel-content">
Hello, it's me. I was wondering, if after all these years you'd like to meet. To go over everything. They say that time's supposed to heal ya. But i ain't done much healing. Hello. Can you hear me? I'm in California. Dreamin about who we used to be, when we were young and free.
</p> </div>
</div>
</div>
</div>
I tried "margin-outside: 10%" in my application.css.scss but that did nothing to add padding between the panels. I'm not quite sure how to fix this, any help is greatly appreciated.
Don't use the panel classes in the same div that has the col classes.
<div class="col-md-4">
<div class="panel panel-default ">
<div class="panel-heading">
<h3 class="panel-title">Health Calculators</h3>
</div>
<div class="panel-body">
<p class="panel-content">
Hello, it's me. I was wondering, if after all these years you'd like to meet. To go over everything. They say that time's supposed to heal ya. But i ain't done much healing. Hello. Can you hear me? I'm in California. Dreamin about who we used to be, when we were young and free.
</p> </div>
</div>
</div>
http://www.bootply.com/Bri4UcQ7Zi
Related
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 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.
thanks for helping:
here is my objectif: make Make a fullscreen responsive slider on a homepage with joomla:
the main problem my template's slider position is in multiple container just like these
<div>
<div id="ja-slider" class="wrap ">
<div class="main">
<div class="main-inner1 clearfix">
<div class="ja-moduletable ;Position: slider" id="Mod104">
<div class="moduletable-inner clearfix">
<div class="ja-box-ct clearfix">
<div id="slider" class="favslider">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
what I wish is:
<div>
<div id="ja-slider" class="wrap ">
<div id="slider" class="favslider">
</div>
</div>
</div>
is there anyone could help? thanks a lots! I'm not a programmer but I understand html and CSS.
thanks again! hoping this thread could helps others!
You might be able to override the existing code using an extension like ReReplacer or similar:
http://extensions.joomla.org/extensions/edition/replace/4336
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>