I'm still pretty new to coding, so I apologize if this is an easy fix. I'm using Ruby on Rails with the Bootstrap Gem.
I'm trying to set up a home page on my website that features an info box and sign up/sign in box with a background that is a three image carousel.
I've got the boxes set up with divs, but I can't get the images to fit the background. I'd like to have the images fade in, one after the other, but I'm stumped - any guides I've found so far are for earlier bootstrap versions.
Here is what I have currently.
<div id="myCarousel" class="carousel slide" style="position:relative;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="sample.jpg">
</div>
<div class="item">
<img src="sample1.jpg">
</div>
<div class="item">
<img src="sample2.jpg">
</div>
</div>
</div>
Any suggestions would be greatly appreciated.
Thank you!
Related
I'm attempting to use a basic Bootstrap carousel in my Rails app and I've copied it over as is:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
This is currently on a partial page, but I have also tried using the carousel in different HTML pages but to no effect. I also tried using the line of javascript offered on the Bootstrap site:
$('.carousel').carousel()
...but this also made no difference. I was expecting to get something resembling an empty Bootstrap Carousel, but what I get in my page is three failed image icons with 'first slide', 'second slide' and 'third slide' next to them. It looks as though Bootstrap is not working at all, but I have already used it in this app for a Navbar and a Jumbotron, which were both successful.
This may be something quite simple, but I'm unable to find out what the problem is, so I would really appreciate some help :-)
Is there a built-in Bootstrap 4 trick that will align these three to centre, in a line "on a large screen", with a small space between them, then place them over each other when displayed on a small screen?
<h4 class="h4">Follow Social Media</h4>
<div class="row">
<div class="col-6-lg col-4-md col-1-sm center-pills">
<ul class="nav nav-pills">
<li class="nav-tabs">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</row>
I've tried adding custom css but it keeps falling apart and looks messy.
At the moment, the code above output this:
Is there a build in bootstrap 4 trick that will align these three to centre
One of the first tricks is to use Bootstrap classes that actually exist.
col-6-lg col-4-md col-1-sm classes don't exist.
The next best trick is to replace your nav-tabs class with nav-item because the nav-tabs class isn't designed to be used the way you attempted to.
The mx-auto class needs to be added to the column to center it.
Finally, adding nav-justified to the parent element will do the trick of spreading the pills evenly. And for padding, you can use responsive padding classes px-lg-3 p-md-2 p-1.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-5 col-6 text-center mx-auto">
<h4 class="h4">Follow Social Media</h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</div>
Hello I am working a basic rails app, and I want to include a welcome page with a slideshow. How would I implement this in a Rails app? I am new to Rails, and I tried using Jquery, but it didn't work. I am also using bootstrap on my website.The problem is that the images wont load and I only see the arrow buttons and no images.
Thanks! Here is my code,
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src='pictwo.png'></div>
<div class="item"><img src='pictone.png'></div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Twitter bootstrap incudes one, as well as provides examples on its usage - http://twitter.github.io/bootstrap/javascript.html#carousel.
I am Using cordova-2.1.0, JQueryMobile-1.3.0 for iOS app. Some of the pages in my app has very small content still that pages scrolls. I am testing it on iOS 6. How to stop scrolling of the pages having small content. I dont want to use the preventDefault.
It's just looks normal when I tried in the fiddle http://jsfiddle.net/JEqKh/
this is the HTML I used. Try import the libraries in the <head></head> tag
<div data-role="page" id="menu">
<div data-theme="b" data-role="header" data-position="fixed">
<h3>Header</h3>
</div>
<div data-role="content">
<ul data-role="listview" id="mainMenu">
<li style="height:50px"><img src="a.png" class="ui-li-icon"/>Menu1
</li>
<li style="height:50px"><img src="b.jpg" class="ui-li-icon"/>Menu2
</li>
</ul>
</div>
</div>
I'm new to jquery mobile and need some help to move further in my application
I used NAVBAR with two buttons view and two buttons are navigating fine and displaying different list views & when I click on list view item the page is navigating to another HTML page and displaying related data but the problem is I'm not able to view navbar in next page...
I want the navbar to be constant for all pages like tabgroup activity in android.
anyone please help me with good example and application or show me some good links to achieve this...
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar" id="nav1">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
<div class="ui-grid-but" id="list">
<div class="ui-block-a">
<a href="#lv1" data-role="button" id="button1" >
<img src="task.png" alt="Tasks" /></a>
</div>
<div class="ui-block-b">
<a href="#lv2" data-role="button" id="button2">
<img src="reminder.png" alt="Reminders" /></a>
</div>
</div>
<div class="def_content_div" id="dashboard">
<ul data-role="listview" data-inset="true">
<li>List View 1 </li>
<li><a href="#lv2" >List View 2</a> </li>
<li><a href="#lv3" >List View 3</a> </li>
<li><a href="#lv4" >List View 4</a> </li>
</ul>
</div>
<div class="content_div" id="deals">
<ul data-role="listview"data-inset="true">
<li> List View 5</li>
<li> List View 6</li>
<li>List View 7</li>
<li>List View 8</li>
</ul>
</div>
</div>
The best way to achieve this is to put your navbar inside a JQM header and use the same data-id for every header. i.e.
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
You have to include the above code snippet in every listview page. That will give the appearance of a constant fixed nav menu.
Here is an example as requested http://jsfiddle.net/codaniel/z5VYF/1/
I got the solution from http://jquerymobile.com/demos
According to codaniel's answer, we need to include the code snippet in every listview page.
And then, we need to add the following class to the "current" nav-button of every page.
class="ui-btn-active ui-state-persist"
For the first front page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
And the second page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>