I'm working on a ruby on rails article page, I want to display four articles on front page as seen in my html/css/bulma code below, my question is how do I make users navigate to older articles with the post Navigation class code (1,2,3,4,5) beneath the articles, Thanks.
<section class="section blog-wrap">
<div class="container">
<div class="columns is-multiline">
<% #articles.each do |article| %>
<div class="column is-6-desktop is-6-tablet">
<div class="blog-item has-text-centered mb-3">
<%= image_tag("https://source.unsplash.com/random/1100x500", :alt => "rss feed", :class => "mb-4 rounded") %>
<h3 class="mb-2"> <%= link_to article.title.capitalize, article%></h3>
<div class="blog-item-meta ">
<span class="is-uppercase text-sm mr-3 letter-spacing">by themefisher</span>
<span class="is-uppercase text-sm letter-spacing"><i class="ti-time mr-1"></i> January 28,2019</span>
</div>
<p class="mt-3 mb-4"><%= render article %></p>
<%= link_to 'Read More', article, class: "btn btn-main" %>
</div>
</div>
<% end %>
</div>
<div class="columns mt-5 is-justify-content-center">
<div class="column is-8-widescreen has-text-centered">
<nav class="post-navigation">
<a class="current" href="#">1</a>
2
3
4
5
<i class="ti-angle-right"></i>
</nav>
</div>
</div>
</div>
</section>
Related
This is my code. I am using express.js. this is ejs file. the snapshot of code below is this
<%- include ("../partials/header") %>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>Welcome To YelpCamp!</h1>
<p>View our hand-picked campgrounds from all over the world</p>
<p>
<a class="btn btn-lg btn-primary" href="/campgrounds/new">Add new Campground </a>
</p>
</div>
</header>
<div class="row" style="display:flex; flex-wrap:wrap;">
<% campgrounds.forEach(function(campground){ %>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="<%= campground.image %>">
<div class="caption">
<h4> <%= campground.name %> </h4>
</div>
<p>
More Info
</p>
</div>
</div>
<% }); %>
</div>
</div>
<%- include ("../partials/footer") %>
I want to adjust thumbnails to occupy empty spaces in between as it is looking hideous. is there any way to do that using bootstrap 3
( I have also marked in image please refer the image)
Any help is appreciated..
What is the height of that largest thumbnail in the row?
Set the thumbnail class to be that height always
.thumbnail{
width:250px;
height:600px !important;
}
Can someone please explain to me why this is happening? My mobile views work fine but it breaks to the attached pic when I expand the window.The code for both cards is literally identical as shown below:
<!-- This is the view for the page: -->
<div class="col-12 col-md-9">
<div class="col-12 d-flex align-items-center mb-3">
<span class="h2"> Spread the Knowledge </span>
<%= link_to fa_icon("edit"), new_discussion_path, class: "profile-link fa-2x" %>
</div>
<div class="col-xs-12 col-md-9 mb-4">
<div class="card">
<div class="card-header">
<h4>Answered Questions</h4>
</div>
<div class="list-group list-group-flush">
<%= render "answered_disc" %>
</div>
<div class="card-footer text-center d-none">
See all
</div>
</div>
</div>
<div class="col-xs-12 col-md-9 mb-4">
<div class="card">
<div class="card-header">
<h4>Unanswered Questions</h4>
</div>
<div class="list-group list-group-flush">
<%= render "unanswered_disc" %>
</div>
<div class="card-footer text-center d-none">
See all
</div>
</div>
</div>
</div>
Both partials display the following code:
<% #discussions.each do |discussion| %>
<% if discussion.parent_id.nil? && discussion.resolved == true %>
<div class="list-group-item">
<div class="row">
<div class="wadinfo col-xs-12 col-md-9 mb-4">
<%= link_to discussion_path(discussion), class: 'profile-link' do %>
<h6 class="small"><%= discussion.content %></h6>
</div>
<% end %>
</div>
<div class="actions">
<% if discussion.resolved == false %>
<%= link_to 'Answer', discussion_path(discussion), class: 'profile-link' %>
<% else %>
<%= link_to 'Contribute', discussion_path(discussion), class: 'profile-link' %>
<% end %>
</div>
</div>
</div>
<% end %>
<% end %>
<!-- Code for menu -->
<div class="row row-sidebar">
<div class="col-12 mb-3 text-center">
</div>
<div class="col-12">
<ul class="list-group">
<% sidebar_elements.each do |element| %>
<a class="list-group-item list-group-item-action" href="<%= element[:link] %>">
<%= element[:name] %>
</a>
<% end %>
</ul>
</div>
</div>
The sidebar is rendered as a partial in a manifest file:
<% content_for :sub_layout do %>
<div class="row mt-4">
<div class="d-none d-md-flex col-3 align-items-start">
<%= render "wads/sidebar" %>
</div>
<%= yield %>
</div>
<% end %>
<%= render template: 'layouts/application' %>
Very confused as the code is identical
When I try to pretty format your partial erb code, it seems broken. I guess it can be the reason because the browser will try to correct the broken HTML, hence the structure might go wrong
<!-- This block seems broken -->
<div class="wadinfo col-xs-12 col-md-9 mb-4">
<%= link_to discussion_path(discussion), class: 'profile-link' do %>
<h6 class="small"><%= discussion.content %></h6>
</div>
<% end %><!-- The link_to block has an incorrect closing </div> -->
</div>
I think after correcting it, your code should work as expected.
Try placing the divs with class col-xs-12 in separate rows, i.e. in divs with class row:
Your code:
<div class="col-xs-12 col-md-9 mb-4">
<div class="card">
...
Fixed code:
<div class="row">
<div class="col-xs-12 col-md-9 mb-4">
<div class="card">
...
I have the following code
<% include partials/header %>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>Welcome to YelpCamp!</h1>
<p>View our handpicked campgrounds from all over the world!</p>
<p><a class="btn btn-primary btn-large" href="/campgrounds/new">Add New Campsite</a></p>
</div>
</header>
<div class="row text-center" >
<% campgrounds.forEach(function(campground){ %>
<div class="col-lg-3 col-md-4 col-xs-6 img-thumbnail p-0 ">
<img class="img-fluid" src="<%= campground.image %>">
<caption> <%= campground.name %> </caption>
</div>
<% }) %>
</div>
Back
</div>
<% include partials/footer %>
I'm reading from a campgrounds list and adding them to a Bootstrap grid.
However, the elements have no spacing between them. In Bootstrap 3 those gaps were automatic when using thumbnail (not available in 4).
If I add a margin mx-3, for example, to
`class="col-lg-3 col-md-4 col-xs-6 img-thumbnail"`
this is added to the total width and the lest item is displaced.
How can I add spacing between columns?
Bootstrap 4 can also give you automatic spacing. Assuming you use the right components for your needs.
The right component in your case would be the figure component. With the classes figure-img img-thumbnail applied to the images.
And for image captions, you should use these (instead of what you tried to use):
<figcaption class="figure-caption">Your Image Caption</figcaption>
The justify-content-center class on the row will center the thumbnails if you happen to have an uneven number of them or if you decide to add col-md-4 to the columns.
Click "run code snippet" below and expand to full page for testing:
<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">
<header class="jumbotron pl-5">
<h1>Welcome to YelpCamp!</h1>
<p>View our handpicked campgrounds from all over the world!</p>
<p><a class="btn btn-primary btn-large" href="/campgrounds/new">Add New Campsite</a></p>
</header>
<div class="row justify-content-center text-center">
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/animals" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/people" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/tech" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/arch" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
</div>
</div>
Also: You should avoid nesting Bootstrap containers unless absolutely necessary which is almost never the case.
I am having troubles with the css on how to make my content within a div that has a border to stay inside and horizontal. when the columns run out of room with their content the columns and content move down. I want them to stay horizontal and readable still instead of moving down below.
Picture before minimizing screen width:
Picture after minimizing screen width:
As you can see the the content inside doesnt stay put!!
Here is my html and some css:
<div class="container3" style="">
<div class="row">
<div class="col-md-11" style="min-width:760px;">
<div class="panel panel-default" style="">
<div class="panel-heading" >
<div >
<h style="margin-left:40px;">Your Requests </h>
</div>
<div style="float:right;margin-top:-30px;">Total: $<div id="sum" style="float:right;"> </div>
</div>
</div>
<% #revisers.each do |reviser| %>
<% reviser.reservations.where("status = ?", true).each do |reservation| %>
<script>
var total = <%= reviser.reservations.where("status = ?", true).sum(:total) %>;
$('#sum').html(total);
</script>
<div class="panel-body" style="">
<div class="col-md-12" style="border:3px solid black;height:108px;max-height:108px;min-width:703px;overflow:hidden;">
<!-- first column -->
<div class="row" style="">
<div class="col-sm-3 center" style="">
<div style="margin-left:-45px;">
<%= reservation.reviser.essay_type %>
</div>
</div>
<div class="col-sm-2 center" >
<div style=" margin-left:-40px;">
File
</div>
</div>
<div class="col-sm-2 center" >
<div style="margin-left:35px;">
Due
</div>
</div>
<div class="col-sm-2 center" >
<div style="margin-left:70px;">
File
</div>
</div>
<div class="col-sm-2 center" style="">
<div style="margin-left:110px;">
Total
</div>
</div>
</div>
<!-- second column -->
<div class="row" style="">
<div class="col-sm-2" style="">
<div style="margin-left:20px;">
<%= render 'shared/essayicons', reviser: reservation.reviser %>
</div>
</div>
<div class="col-sm-1" >
<li class="thumbnail2" style=""><%= image_tag(reservation.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
</div>
<div class="col-sm-1 center" style="margin-top:10px;">
<div class="row">
<div style="color:green;margin-left:10px;">
sent
</div>
</div>
<div class="row">
--->
</div>
</div>
<div class="col-sm-1">
<li class="thumbnail2"><%= image_tag(reservation.reviser.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
</div>
<div class="col-sm-2 center">
<%= reservation.due_date %>
</div>
<div class="col-sm-1">
<li class="thumbnail2"><%= image_tag(reservation.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
</div>
<div class="col-sm-1 center" style="margin-top:10px;">
<div class="row">
<div style="color:green;margin-left:10px;">
sent
</div>
</div>
<div class="row">
<---
</div>
</div>
<div class="col-sm-1">
<li class="thumbnail2"><%= image_tag(reservation.reviser.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
</div>
<div class="col-sm-1 center" style="margin-left:30px;">
<h4>$<%= reservation.total %></h4>
</div>
</div>
<!-- Third Column -->
<div class="row" style="">
<div class="col-sm-2 center">
<div>
<%= time_ago_in_words(reservation.created_at) %> ago
</div>
</div>
<div class="col-sm-2 center" style="">
<div style="margin-left:-45px;">
<%= reservation.user.username %>
</div>
</div>
<div class="col-sm-2 center">
<div style="margin-left:-40px;">
<%= reservation.reviser.user.username %>
</div>
</div>
<div class="col-sm-2 center" >
<div style="margin-left:70px;">
<%= reservation.user.username %>
</div>
</div>
<div class="col-sm-2 center" >
<div style="margin-left:50px;">
<%= reservation.reviser.user.username %>
</div>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
</div>
SCSS file:
.container3{
margin:auto;
width:80%;
}
.panel {
border-radius: 8px;
}
.panel-default .panel-heading {
color: #565a5c;
background-color: #edefed;
font-size: 18px;
font-weight: 400;
}
.panel-heading{
margin:0 auto;
h1 {
text-align: center;
}
}
.panel-body{
margin-top: 0px;
}
How can i get these divs to stop moving underneath each other? Just keep them put and if someone reduces screen width then they will just not be shown on screen unless the user extends the screen again, just like how the total on the header near Your Requests isn't showing up at a certain point when I minimize screen. Thank you!!^^
Just add .hidden-xs and .hidden-sm to the offending col-md-* divs
http://getbootstrap.com/css/#responsive-utilities
Rails newbie here. I am trying to to get a Bootstrap Grid to work correctly in Rails. I want a 3 column responsive grid. See below for example of 1 column:
<div class="box col-lg-3 col-md-4 col-sm-6 col-xs-12">
<h2>Content</h2>
</div>
I am unable to get the div columns to render beside each other, they just stack. Using the html and css outside of rails I am able to get the grid to work as expected.
I am using the following gems:
gem 'rails', '4.0.2'
gem 'bootstrap-sass', '~> 2'
gem 'bootswatch-rails' (I have also tried to do this without bootswatch)
gem 'sass-rails'
I have been trying to fix this for a week and need a hand.
Here is my application.css.scss (I have removed all custom styling, so this is it):
#import "bootswatch/united/variables";
#import "bootstrap";
// Bootstrap body padding for fixed navbar
body { padding-top: 60px; }
// Responsive styles go here in case you want them
#import "bootstrap-responsive";
// And finally bootswatch style itself
#import "bootswatch/united/bootswatch";
I am using the following as my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
Here is my _header.html erb partial:
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<%= link_to "Sweet Potato", '#', id: 'logo' %>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</nav>
</div>
</div>
</header>
Here is my home page with the grid:
<div class='hero-unit'>
<h1>Sweet Potato</h1>
<h2>Connect, Engage, Reflect</h2>
<h3>
Get the most out of your retreats.
</h3>
</div>
<div class="stuff">
<div class="row">
<div class="box col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="caption">
<h3>Connect</h3>
<p>Connect with the community of meditators</p>
<p><%= link_to "Sign up", '#',
class: "btn btn-primary btn-large btn-block" %></p>
</div>
</div>
</div>
<div class="box col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="caption">
<h3>Engage</h3>
<p>Engage in retreats</p>
<p>Find a Retreat</p>
</div>
</div>
</div>
<div class="box col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="caption">
<h3>Organize</h3>
<p>Organize a retreat</p>
<p>Start a Retreat</p>
</div>
</div>
</div>
</div>
</div>
Lastly here is my _footer.html.erb
<footer class="footer">
<small>
Sweet Potato
is made by McGiver.io
</small>
<nav>
<ul>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
<li><%= link_to "Help", help_path %></li>
</ul>
</nav>
</footer>