This code works perfectly in desktop on windows. but when i test it in safari ios the third col always collapse and jump to a new line.
here is the code:
<div class="container">
<div class="row">
<div class="col-4">
First, but unordered
</div>
<div class="col-4 order-sm-4">
Second in sm+, last in mobile
</div>
<div class="col-4 order-3">
Last in sm+, Second in mobile
</div>
</div>
</div>
Anybody else experienced it? is it a bug?
Thanks
I think you wrote the order classes wrong. Bootstrap is mobile first so col-sm for example is sm and up (to lg).
This is probably what you want:
<div class="container">
<div class="row">
<div class="col-4">
First, but unordered
</div>
<div class="col-4 order-3 order-sm-1">
Second in sm+, last in mobile
</div>
<div class="col-4 order-2">
Last in sm+, Second in mobile
</div>
</div>
</div>
Tell me if there's any issue with this code!
Related
My images wont stay on the same row once i put the <p> in, they both sit in there own row, not sure what im doing wrong here
<div class="container">
<div class="row">
<div class="image-fluid text-center">
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
I think whatever CSS you used in class="row" is not acting the way you expect, because that div has a single child.
I don't know what's in your css file, but the following HTML works as I expect you want:
<div class="container">
<div class="image-fluid text-center" style="display:flex">
<div>
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
</div>
<div>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
Each image/text pair gets its own div, and what used to be your row div now has multiple children.
I have a service which fetches data from the server on startup. This is working fine. The data gets populated into an array. When the array is filled, I check if the length is greater 0. If so another view gets displayed..
This is working fine on windows / android devices.
As soon as I use apple safari on my mac (with chrome its working), iPad or iPhone the view is not changing. Even with using chrome on iPad or iPhone.
Heres the template
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12" *ngIf="imageCount === 0">
<p class="text-center">sorry mate.. </p>
</div>
<div class="col-md-12 col-xs-12" *ngIf="imageCount !== 0">
<div class="center-image">
<p class="text-center">some other great code.. </p>
</div>
</div>
</div>
</div>
any suggestions would be great.
Using the following HTML I am trying to randomly select one of the href links
<div class="field">
Check availability
</div>
</div>
</div>
</div>
</article>
</div>
<div class="views-row views-row-3 views-row-odd views-row-last">
<article id="node-cruise-47" class="node node-cruise node-search-result node-cruise-search-result node-published node-not-promoted node-not-sticky author-admin odd clearfix s-search-result" itemscope="" itemtype="http://schema.org/Product">
<div class="search-result-inner clearfix">
<div class="s-search-result--left">
<div class="s-search-result--middle">
<div class="s-search-result--right">
<div class="field field-name-field-price field-type-number-decimal field-label-inline clearfix price-summary">
<div class="field field-name-field-departure-duration field-type-number-integer field-label-hidden price-conditions primary-condition">Based on 7 nights, yacht only</div>
<div class="availability-button-wrapper-search">
<div class="field">
Check availability
Note that several href links are present on the page not just these 2. I am using the following code
b.links(:xpath => '//div[#class="field"]/a').click
However I get:
"undefined method `click' for #<Watir::AnchorCollection:0x2ba1858> (NoMethodError)"
Try to pick randomly from array
b.links(:xpath => '//div[#class="field"]/a').to_a.sample.click
I installed Bootstrap for my Rails and decided to test out making a grid. This is my code.
<div class="row">
<div class="span4">
<h1>About the Creator</h1>
<p>
</p>
</div>
<div class="span8">
<h1>About the Site</h1>
<p>
</p>
</div>
</div>
This is what it looks like. As you can see, it's in 2 rows, however it should be in 2 columns. There doesn't seem to be anything wrong with the code itself as far as I can see. I don't think I made a mistake during installation, because when I installed bootstrap, it automatically stylized my webapp. Any help?
What version of bootstrap are you using? In recent versions of bootstrap the syntax is <tag class="col-xs-4"> rather than <tag class="span4">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4">
<h1>About the Creator</h1>
<p>
</p>
</div>
<div class="col-xs-8">
<h1>About the Site</h1>
<p>
</p>
</div>
</div>
There are 4 classes you can use in order to specify column size:
col-xs-#
col-sm-#
col-md-#
col-lg-#
They were introduced so that you could have columns have different portions of the screen on different platforms. For example, perhaps you want your main content to take up 12 columns, instead of 10, on a mobile phone. TO do this do:
<div class="row">
<div class="col-xs-12 col-md-10">
Content
</div>
</div>
I would like to know if it's a bug or some mistake of mine.
In my Rails project, twitter's bootstrap isn't aligning the container at the center.
My code:
<div class="container">
<div class="span12" style="background-color:blue; color:white;">
<%= yield %> <!-- This get the sample text "Some test." -->
</div>
</div>
Here's an image of the bug.
http://img543.imageshack.us/img543/3405/screenshot20120702at035.png
Thanks a lot everybody! :-)
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div>
DEMO