I have a certain number of cards. I want to display them in two columns of fixed height in the following way: first I want to fill col number 1; when the end of col1 is reached, start filling col2 (see image).
How can I do that with Bootstrap 5?
cards stacked vertically on two columns
UPDATE
Here is my code:
<div class="container-lg">
<h2 class="">Technology Portal</h2>
<div class="row row-cols-md-2">
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 1</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 2</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 3</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 4</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 5</p>
...
</div>
</div>
</div>
...
</div>
</div>
SOLUTION
Gahan Vig helped me to find the solution.
Here it is:
<style>
.masonry { /* Masonry container */
column-count: 2;
column-gap: 1em;
}
.item { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
</style>
<div class="masonry">
<div class="card item">
<h1>card1</h1>
</div>
<div class="card item">
<h1>card2</h1>
</div>
<div class="card item">
<h1>card3</h1>
</div>
<div class="card item">
<h1>card4</h1>
</div>
<div class="card item">
<h1>card5</h1>
</div>
<div class="card item">
<h1>card6</h1>
</div>
<div class="card item">
<h1>card7</h1>
</div>
<div class="card item">
<h1>card8</h1>
</div>
<div class="card item">
<h1>card9</h1>
</div>
<div class="card item">
<h1>card10</h1>
</div>
</div>
More information here:
https://w3bits.com/css-masonry/
Such type of layout is known as masonry layout. Visit this stackoverflow link to know more how to createa vertical masonry layout
Your finished code after creating the layout will look something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.col-links{
display: inline-block;
margin: 0 0 20px;
page-break-inside: avoid;
break-inside: avoid;
width: 50%;
}
.row{
column-count: 2;
column-gap: 20px;
column-fill: balance;
margin: 20px auto 0;
padding: 2rem;
}
</style>
</head>
<body>
<div class="container-lg">
<h2 class="">Technology Portal</h2>
<div class="row row-cols-md-2 w-100">
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 1</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus sequi optio explicabo delectus quaerat recusandae consectetur illo eius tempora, aperiam inventore sint fuga eum, error cum corrupti eos iure neque veniam repellat consequatur iusto quae dolor maiores. Similique quisquam nam ducimus ipsum sit quidem consectetur eaque sequi optio non cumque atque eius rerum vitae reprehenderit perferendis, sed eligendi modi inventore architecto sunt labore! Repellat magni eos officia ducimus mollitia vero necessitatibus harum accusantium perferendis explicabo. Dicta quo, sapiente fugit cumque voluptatibus ipsum neque atque, deleniti, debitis tenetur in dolore saepe molestias eum. Eius, error incidunt hic obcaecati vero ipsum nobis.
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 2</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus maiores corporis placeat magnam laboriosam fugiat ut assumenda, aperiam sequi rerum reprehenderit vitae animi quasi neque error, amet nulla quae ea. Eius, consequuntur enim architecto incidunt facere fuga, nam modi ea, maxime labore nisi nobis eveniet deleniti quia expedita cum blanditiis?
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 3</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, dolorum.
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 4</p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi provident facilis voluptatem voluptate neque illum temporibus sit beatae, eum id iste possimus eveniet inventore ad quaerat hic, asperiores repellendus quia error debitis mollitia culpa, in delectus rem. Dignissimos voluptates voluptatem ut! Eum adipisci illo aliquam officiis hic doloribus quos odit accusantium dolorem sapiente, esse facilis exercitationem asperiores! Quas, consectetur, corporis eum similique earum quibusdam aliquam maxime temporibus animi, odio ratione nesciunt quaerat. Odit quos atque sit porro quod perspiciatis deleniti!
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 5</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio labore numquam culpa qui hic id libero soluta illo corporis inventore, deserunt porro corrupti nihil repudiandae.
</div>
</div>
</div>
...
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</html>
I have run into some odd behavior using the Sticky Headers plugin from within a jQuery UI tabs widget. I have tried to attach the sticky header to a wrapper element inside the tab, but the positioning of the header is incorrect. It begins at the top of the widget and moves down as I scroll the table?
The following illustrates the problem. When selecting tab "Two" and scrolling the table, the header moves vertically within the widget.
http://jsfiddle.net/gws000/74ja6gdj/5/
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p><span>test1</span>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div id='mywrapper' style='height:200px;overflow-y:scroll;'>
<table class="tablesorter">
<thead>
<tr>
<th>AlphaNumeric</th>
<th class='filter-select'>Numeric</th>
<th>Animals</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>abc 11</td>
<td>3</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>abc 2</td>
<td>56</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>ABC 10</td>
<td>87</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>zyx 12</td>
<td>0</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<span>test3</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
$("#tabs").tabs({
activate: function (event, ui) {
var $t = ui.newPanel.find('table');
if ($t.length) {
if ($t[0].config) {
$t.trigger('applyWidgets');
} else {
$t.tablesorter({
theme: 'blue',
widgets: ["zebra", "filter", "stickyheaders"],
widgetOptions: {
stickyHeaders_attachTo: "#mywrapper"
}
});
}
}
}
});
Any help would be appreciated.
It looks like the issue is that the #mywrapper element is missing a position:relative; definition. The sticky header is using position:absolute, so it ends up getting its positioned calculated based on the #tabs element, which is the only parent element with a position:relative assigned (by the jQuery tabs widget) (updated demo).
<div id='mywrapper' style='height:200px;overflow-y:scroll;position:relative;'>
I have recently completed the One Month Rails tutorial and wanted to start customizing my design. I went ahead and purchase a theme off WrapBootstrap and have completed the following:
Added Javascript/CSS to Vendor folder
Included all images needed in Vendor folder
Updated manifest file to include any new javascript or stylesheets
For whatever reason it appears bootstrap is not being loaded properly when I attempt to access any page besides the index page.
For example: my users/sign up page which I customized the Devise View no longer inherits any of the styling previously used. What I want to accomplish is to have the index page load the WrapBootstrap theme and then for my other pages to load just as they previously did prior to messing with anything.
I understand that Heroku has special ways in handing the asset pipeline and hard coding assets is not the proper way of doing things. However, my styling is not functional on my local environment either.
Application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require 'masonry/transitions'
*= require 'style.css'
*= require 'bootstrap.css'
*= require 'bootstrap.min.css'
*= require 'overwrite.css'
*= require 'animate.css'
*= require 'font-awesome.min.css'
*= require 'theme.css'
*= require 'simpletextrotator.css'
*= require 'default.css'
*= require_tree .
Application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.turbolinks
//= require turbolinks
//= require masonry/jquery.masonry
//= require jquery.js
//= require bootstrap.min.js
//= require custom.js
//= require wow.min.js
//= require mb.bgndGallery.js
//= require jquery.simple-text-rotator.min.js
//= require jquery.scrollTo.js
//= require jquery.nav.js
//= require modernizr.custom.js
//= require grid.js
//= require stellar.js
//= require_tree .
Home Page View:
<!DOCTYPE html>
<html>
<head>
<title>Alstar - Bootstrap 3 one page template</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- css -->
<link href="/assets//bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/assets/style.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- intro area -->
<div id="intro">
<div class="intro-text">
<div class="container">
<div class="col-md-12">
<div id="rotator">
<h1><span class="1strotate">We are changing the World.</span></h1>
<div class="line-spacer"></div>
<p><span class="2ndrotate">We connect brands with donation opportunities that empower their users.</span></p>
</div>
<div class="arrow-wrap"><a class="arrow-down scroll" href="#home-top"></a></div>
<br>
<br>
</div>
</div>
</div>
</div>
<!-- Services -->
<section id="services" class="home-section bg-white">
<div class="container">
<div class="row">
<div style="width: 100%;">
<div style="float: left; width: 33%;"><p><%= link_to "I'm a Charity", new_user_registration_path, class: "btn-primary-red btn-lg" %></p></div>
<div style="float: left; width: 33%;"><p><%= link_to "I'm a Donor", new_user_registration_path, class: "btn-primary-red btn-lg" %></p></div>
<div style="float: left; width: 33%;"><p><a class="btn-primary-red btn-lg" href="#about" role="button">I'm a Merchant</a></p></div>
<br style="clear: left;" />
</div>
<br>
<br>
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Services</h2>
<div class="heading-line"></div>
<p>We’ve been building unique digital products, platforms, and experiences for the past 6 years.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="carousel-service" class="service carousel slide">
<!-- slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Website Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/1.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Brand Identity</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/2.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Web & Mobile Apps</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/3.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<li data-target="#carousel-service" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="home-section bg-red">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<br>
<br>
<br>
<h2>About us</h2>
<div class="heading-line"></div>
<p>We’ve been building a beutiful checkout process that connects merchants with their loyal customers.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="box-team wow bounceInDown" data-wow-delay="0.1s">
<img src="/assets/team/1.jpg" alt="" class="img-circle img-responsive" />
<h4>Dominique Vroslav</h4>
<p>Art Director</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.3s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/2.jpg" alt="" class="img-circle img-responsive" />
<h4>Thomas Jeffersonn</h4>
<p>Web Designer</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.5s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/3.jpg" alt="" class="img-circle img-responsive" />
<h4>Nola Maurin</h4>
<p>Illustrator</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.7s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/4.jpg" alt="" class="img-circle img-responsive" />
<h4>Mira Ladovic</h4>
<p>Typographer</p>
</div>
</div>
</div>
</div>
</section>
<!-- Parallax 1 -->
<section id="parallax1" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="color-light">
<h2 class="wow bounceInDown" data-wow-delay="1s">Details are the key for perfection</h2>
<p class="lead wow bounceInUp" data-wow-delay="2s">We mix all detailed things together</p>
</div>
</div>
</div>
</div>
</section>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<li data-target="#carousel-service" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="portfolio" class="home-section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Works</h2>
<div class="heading-line"></div>
<p>We’ve been building unique digital products, platforms, and experiences for the past 6 years.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul id="og-grid" class="og-grid">
<li>
<a href="#" data-largesrc="/assets/works/1.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim, an movet interesset necessitatibus mea.">
<img src="/assets/works/thumbs/1.jpg" alt=""/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/2.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="/assets/works/thumbs/2.jpg" alt=""/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/3.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="/assets/works/thumbs/3.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/4.jpg" data-title="Portfolio title" data-description="In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim, an movet interesset necessitatibus mea.">
<img src="/assets/works/thumbs/4.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/5.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea">
<img src="assets/works/thumbs/5.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/6.jpg" data-title="Portfolio title" data-description="Id elit saepe pro. In atomorum constituam definitionem quo, at torquatos sadipscing eum, ut eum wisi meis mentitum. Probo feugiat ea duo. An usu platonem instructior, qui dolores inciderint ad. Te elit essent mea, vim ne atqui legimus invenire, ad dolor vitae sea.">
<img src="assets/works/thumbs/6.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/7.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei.">
<img src="assets/works/thumbs/7.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="asssets/works/8.jpg" data-title="Portfolio title" data-description="No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="assets/works/thumbs/8.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/9.jpg" data-title="Portfolio title" data-description="Lorem ipsum dolor sit amet, ex pri quod ferri fastidii. Mazim philosophia eum ad, facilisis laboramus te est. Eam magna fabellas ut. Ne vis diceret accumsan salutandi, pro in impedit accusamus dissentias, ut nonumy eloquentiam ius.">
<img src="assets/works/thumbs/9.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/10.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim.">
<img src="assets/works/thumbs/10.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/11.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="assets/works/thumbs/11.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/12.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="assets/works/thumbs/12.jpg" alt="img01"/>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Parallax 2 -->
<section id="parallax2" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="clients">
<li class="wow fadeInDown" data-wow-delay="0.3s"><img src="assets/clients/1.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="0.6s"><img src="assets/clients/2.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="0.9s"><img src="assets/clients/3.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="1.1s"><img src="assets/clients/4.png" alt="" /></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="home-section bg-white">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Contact us</h2>
<div class="heading-line"></div>
<p>If you have any question or just want to say 'hello' to Alstar web studio please
fill out form below and we will be get in touch with you within 24 hours. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="text" class="form-control" id="inputSubject" placeholder="Subject">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<textarea name="message" class="form-control" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<button type="button" class="btn btn-theme btn-lg btn-block">Send message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer
================================================== -->
<footer id="contact" class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-sm-3 col-md-3">
<div class="footer-logo">
<h2>Prestige</h2>
<p>1024 Main Street, Vancouver BC<br>+1 (123) 456-7890</p>
<br>
<p class="muted">© 2013 Prestige Inc.</p>
Terms of Service
Privacy
</div>
</div>
<div class="col-sm-3 col-md-3">
<h3>Product</h3>
<ul class="list-unstyled">
<li>Product for iOS</li>
<li>Product for Android</li>
<li>Product for Windows</li>
</ul>
</div>
<div class="col-sm-3 col-md-3">
<h3>Company</h3>
<ul class="list-unstyled">
<li>About Us</li>
<li>Our Team</li>
<li>Jobs <span class="label label-info">We're hiring!</span></li>
</ul>
</div>
<div class="col-sm-3 col-md-3">
<h3>Documentation</h3>
<ul class="list-unstyled">
<li>Product Help</li>
<li>Developer API</li>
<li>Product Markdown</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<a class="icon" href="http://www.twitter.com/dparrelli" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="icon" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="icon" href="http://www.dribbble.com/dparrelli" target="_blank"><i class="fa fa-dribbble"></i></a>
<a class="icon" href="http://www.workingnomads.co" target="_blank"><i class="fa fa-globe"></i></a>
</div>
</div>
</div>
</footer>
<!-- js -->
<script src="/assets/jquery.js"></script>
<script src="/assets/bootstrap.min.js"></script>
<script src="/assets/wow.min.js"></script>
<script src="/assets/mb.bgndGallery.js"></script>
<script src="/assets/mb.bgndGallery.effects.js"></script>
<script src="/assets/jquery.simple-text-rotator.min.js"></script>
<script src="/assets/jquery.scrollTo.js"></script>
<script src="/assets/jquery.nav.js"></script>
<script src="/assets/modernizr.custom.js"></script>
<script src="/assets/grid.js"></script>
<script src="/assets/stellar.js"></script>
<script src="/assets/custom.js"></script>
</html>
Any ideas what is getting mixed up here? Should I be putting the page.css under page.css.scss instead of in the application.css files? Thank you!
you should add your css and javascript files to assests/stylesheets and assests/javascripts respectively. and add these to head of your views/layout/application.html.erb or any other layout you are using:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
I hope that will work.
I have a multi page jQuery Mobile (1.40, with jQuery 1.10.2) page, like below. On iOS, the transition 'right' to the next page distorts the background image briefly. The same transition 'left' works as expected. It seems to work normally on Safari on Mac.
See this video to see what's happening :- http://cl.ly/3C1k3y1k2I0C/download/jQuery%20Mobile%20issue.mp4
HTML:
<div data-role="page" class="welcome" id="welcome1">
<div role="main" class="ui-content">
<h2 class="logo">Page 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
<div class="dots-container">
<ul class="dots">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="welcome" id="welcome2">
<div role="main" class="ui-content">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
<div class="dots-container">
<ul class="dots">
<li>1</li>
<li class="on">2</li>
<li>3</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="welcome" id="welcome3">
<div role="main" class="ui-content">
<h2>Get Started</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
<div class="dots-container">
<ul class="dots">
<li>1</li>
<li>2</li>
<li class="on">3</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
CSS:
[data-role=page].welcome {
background: no-repeat center center fixed;
background-size:100%;
}
[data-role=page]#welcome1 {
background-image: url('images/welcome1.jpg');
}
[data-role=page]#welcome2 {
background-image: url('images/welcome2.jpg');
}
[data-role=page]#welcome3{
background-image: url('images/welcome3.jpg');
}
I have a standard accordion that looks like
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
and currently my view loads a list of messages like
<ul id="msgs_list">
<% msgs.each do |msg| %>
<div class="msg_message_container">
<%= h msg.title %>
<%= h msg.message %><br />
<% end %>
</ul>
How can I wrap the title of each message in the h3 accordion tags and have each message in a separate accordion div? Thanks
Does this code work for you? I got rid of the ul and the div for msg_message_container however adding them back if you need them should be easy.
<% msgs.each do |msg| %>
<h3><%= h msg.title %></h3>
<div>
<p>
<%= h msg.message %>
</p>
</div>
<% end %>