I am using bootstrap 3 and noticed that my left margin gets indented little by little for each row.
Here's a snapshot depicted the issue I'm having, please check here
The code looks something like this for the first two rows in the image:
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="btn-toolbar well" role="toolbar">
...
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="row">
<div class="col-sm-6 col-md-6">
<div id="accordion2" class="panel panel-default">
You are putting a div inside a div and bootstrap applies a margin or padding (I forgot which one) to it.
test this out : In your style.css or equivelant do this :
.nopadtest{margin: 0px; padding: 0px;}
apply that class to your div's and see what happens. On a side note, you never closed any of the div's ! so you keep putting them in each other.
Related
I've read a lot about bootstraps breakpoints and grid system now and perused many stackoverflow questions but remain bamboozled.
I have a simple bootstrap v3 container like this:
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5">
image
</div>
<div class="col-md-7 d-flex">
text
</div>
</div>
</div>
And in a web browser this renders beautifully, but on my phone the image and text continue to occupy one row with no break and the image is thus scaled tiny and ugly and I'd like Bootstrap to do what it does best, render that image at the full phone width and the next beneath it, that is, break these two columns.
A live sample is her, at present:
http://hobart.gamessociety.info/
and I would be most grateful if anyone with experience could lend some insight into why this doesn't render as I'd like on my phone.
As I understood bootstrap it's phone first, and md says apply the 5/7 split on medium and larger screens and on smaller ones do what it does sensibly, i.e. not scale that image to tiny proportions and show both columns side by side, but break between them and show one above the other.
The class "vertical-align" adds the css style "display:flex" if you remove that you will see the items behaving as you currently desire (I think). Use chrome and inspect to add/remove css styles.
You could just add col-xs-12 to each div class.
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5 col-xs-12">
image
</div>
<div class="col-md-7 col-xs-12 d-flex">
text
</div>
</div>
</div>
Here is an alternative to your second question
create a css class
.myClass {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
And add it to the inner divs
<div class="container">
<div class="row">
<div class="col-md-5 myClass">
image
</div>
<div class="col-md-7 myClass">
text
</div>
</div>
</div>
Found the answer here Twitter Bootstrap 3, vertically center content
I have a panel that floats right within a container. When my data-spy affix executes, the side-panel gains the position: fixed property which removes the float: right. The panel becomes fixed at the correct height, but becomes fixed at the left in the container not the right in the container. I cannot simply state a fixed value for the left property because I am using a container fixed to 1200px, not container-fluid and the left offset changes whenever the user resizes their screen.
How can I set the panel mimic float-right while affixed near the top of the view?
<div id="navbarContainer" class="affix-top clearfix" data-spy="affix" data-offset-top="70">
<div class="navbar navbar-inverse navbar-static-top" role="navigation" id="topnavbar">
</div>
</div>
// code removed
<div class="container">
<div id="right_panel" class="panel right-panel pull-right">
<div class="panel-head">
Related Information
</div>
<div class="panel-body">A Basic Panel</div>
</div>
css
.rightpanelAffix{
position:fixed;
top:101px;
}
js
$("#navbarContainer").on("affixed.bs.affix", function () {
$("#body").addClass("bodyAffixPadding");
$("#right_panel").addClass("rightpanelAffix");
});
$("#navbarContainer").on("affixed-top.bs.affix", function () {
$("#body").removeClass("bodyAffixPadding");
$("#right_panel").removeClass("rightpanelAffix");
});
Please Show us some code. and may be you want to ask that you can't adjust your container size. Let me know if this helps.
Check this out
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-6"></div></div></div>
I've been using Bootstrap for a while (specifically, version 3) and have noticed that I still am unsure whether I should always close columns with a that has a class of .row assigned to it after every 12 columns OR can I wait and apply that closing .row at the end of my code as long as I understand that any columns that add up to more than 12 columns in a single row will simply wrap automatically onto a new line. The benefit of the latter option is that it would be less code and less chances of forgetting to add that closing div tag for each 12 column row.
In other words, is it better to do this?
<div class="row">
<div class="col-md-8">
<p>some content here</p>
</div>
<div class="col-md-4">
<p>some content here too</p>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-md-6">
<p>some content here</p>
</div>
<div class="col-md-6">
<p>some content here too</p>
</div>
</div><!--/.row-->
OR, is this method more efficient?
<div class="row">
<div class="col-md-8">
<p>some content here</p>
</div><!--/.col-md-8-->
<div class="col-md-4">
<p>some more content here</p>
</div><!--/.col-md-4-->
<div class="col-md-6">
<p>some content here</p>
</div>
<div class="col-md-6">
<p>some content here too</p>
</div>
</div><!--/one .row div to close them all-->
...well, it actually depends on the design - I am using both depending on the circumstance.
The difference lies in the height of the elements. If the two cols in the first row had different heights, closing the row would essentially mean that the two bottom columns would be aligned starting from the same top position.
However if the cols have different heights NOT closing the row can have different results.
edit: ...this is because of the way float works on the cols elements. Closing a row clears the float.
edit2: here is an example of both cases:
not closing row:
<div class="row">
<div class="col-">
content
</div>
<div class="col-">
content
</div>
<div class="col-">
content
</div>
<div class="col-">
content
</div>
</div>
http://jsfiddle.net/b2rkgd5w/1/
closing row:
http://jsfiddle.net/1krj49pm/2/
besides closing the row element the rest of the code is exactly the same.
I'm creating a list of employees (2 items in each row), and I've encountered several problems:
I want picture to use full space of left side of list item - the example is here: http://2fm9xz2drvqemrbu.zippykid.netdna-cdn.com/wp-content/uploads/2013/01/facebook-search-results.jpg
borders of list items with thumbnail class touches each other - I'd like to have some padding
My example in fiddle: http://jsfiddle.net/bC4Wy/
My list item code:
<div class="col-sm-6 col-xs-12 thumbnail">
<div>
<div class="col-xs-3"><img class="img-responsive" src="http://lorempixel.com/300/300/" /></div>
<div class="col-xs-9">
<div class="h4">Paul Smith</div>
<div>Title: Developer</div>
<div>Skills: C#, .NET</div>
</div>
</div>
</div>
I see that you're using thumbnail and putting "col" inside of col directly.
You may consider not using thumbnail at all:
<div class="col-sm-6 col-xs-12 listitem">
<div class="row">
<div class="col-xs-3"><img class="img-responsive" src="http://lorempixel.com/300/300/"/></div>
<div class="col-xs-9">
<div class="h4">Paul Smith</div>
<div>Title: Developer</div>
<div>Skills: C#, .NET</div>
</div>
</div>
</div>
CSS
.listitem {
border-radius: 5px;
border: 1px solid black;
overflow-y:hidden;
}
.listitem img {margin-left: -15px;}
I have also added additional row to insure your layout will be consistent. You may want to add styling for the border radius for mozilla and webkit.
We are using Bootstrap 2 on a Joomla 3.2.2 site. See: http://test.stuntlist.com/west
The first slide works perfectly, but when the second slide comes in, it disappears. You can see it start to transition between the slides, but then the area where the slide should be just disappears and the content is moved up into the slide area.
I don't see any JS errors on the site. We have used the same carousel code on other sites without this issue.
Here is the carousel code:
<div class="slideshow">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="/component/joomgallery/action-photos?Itemid=88"><span data-picture data-alt="">
<span data-src="/images/hero/slide01.jpg"></span>
<span data-src="/images/hero/portrait/slide01mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide01.jpg" alt=""></noscript>
</span></a>
<div class="carousel-caption">
<div class="container">
<h4>Slide Caption Goes Here.</h4>
</div>
</div>
</div>
<div class="item">
<span data-picture data-alt="">
<span data-src="/images/hero/slide02.jpg"></span>
<span data-src="/images/hero/portrait/slide02mobile.jpg" data-media="(max-width: 768px) and (orientation:portrait)"></span>
<noscript><img src="/images/hero/slide02.jpg" alt=""></noscript>
</span>
<div class="carousel-caption">
<div class="container">
<h4>Second Caption.</h4>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
Any idea what could be causing the problem?
Thank you.
This is caused due to a conflict with Mootools, download the following plugin and apply your preferences and it'll resolve this problem:
https://extensions.joomla.org/extension/mootools-enabler-disabler
The problem is Joomla adds another DIV (We will call it JDIV) outside the Carousel container, when second/EVEN Numbered Slides are viewed some script sets the height of the JDIV equal to "0px", see my code below
<div class="col-sm-12 pharma">
<!-- this is the div which joomla is adding (JDIV) -->
<div style="margin: 0px; position: relative; overflow: hidden; height: 0px;">
<!-- this is the div which joomla is adding (JDIV) -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: -203px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
....
</div>
<div class="ind-div">
<ol class="carousel-indicators">
....
</ol>
</div>
</div>
</div>
</div>
The Solution
This solution worked for me and should also work for you too.
Add a CSS class named "#myCarousel" ( ID of the carousel) and sets its margin to 0px with important,
#myCarousel{ margin:0px !important; }
Secondly add another CSS class like
.pharma>div{ height:204px !important; }
where .pharma is the class which I have used on the DIV which is outside the JDIV. The height will be different from what I have used and might have to use media queries if using responsive.
To find the height simply inspect the element and note the height of the first slide and use that height in CSS class.
I do not have a fix for you but I was able to find a few issues. The first and biggest issue being that you have inline styling that is causing the image to "disappear". The image is really just moved 572px upwards and is off the screen. Notice the two images below. The first link is the image that does work. The second link is the image that does not display.
http://tinypic.com/r/hthi4y/8
http://tinypic.com/r/2hoix35/8
Using chrome, I opened the developer console and manually changed the margin to 0px instead of -572px and it fixed the issue. I would take a look at your JS again and see what values are being applied to each image because the entire display is being rendered dynamically, I assume for mobile devices.