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;
}
Related
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
here's my markup:
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="/images/foo.jpg">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
which will look like this:
the problem however is - when reducing the browser width it will turn out like this:
the image will overflow its container although it should be responsive ..
any ideas what's wrong?
thanks
Wrap the red and grey divs in a DIV tag, not a link. Give the following style to your containing div:
.containing-div {display:block; overflow:auto;}
you are missing the parent class .container form bootstrap. look at bootstrap docs
.container {
border: 1px grey solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="///dummyimage.com/300x600">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
</div>
My Requirement is to show 4 records in each row there will be more than 7 rows the entire design is responsive so I have to add
<div class="row">
//Image,lable hyperlink with text
</div>
All the records should be dynamic as per the count of DataTable.
I am stuck to add 4 records on
<div class="row">
</div>
On every new line of every row as the responsive work only in the row div.
My Code as if now
<div class="row">
<% foreach (System.Data.DataRow item in dt.Rows)
{
%>
<div class="col-xs-6 col-sm-3 mix livefeeds">
<div class="work-item">
<div class="image-holder">
<a href="<%=item["Identity"].ToString()%>">
<img src="<%=item["ImagePath"].ToString()%>"/>
<h4>
<span><%=item["Headline"].ToString()%></span>
</h4>
</a>
</div>
</div>
</div>
<%
}
%>
I thaught of adding a if condition like
<%
if (dt.Rows.Count %4 ==0)
{
<div class="row">
//Content
</div>
}
%>
But getting stuck with the syntax like what to write where and its on a ASPX page.
Here's the solution,with the help of bootstrap it will display 4 records on ever single row.
<div class="row" style="margin-left:5px;margin-right:5px">
<% foreach (System.Data.DataRow item in dt.Rows)
{
%>
<div class="col-xs-6 col-sm-3 mix livefeeds News">
<div class="work-item">
<div class="image-holder">
<a href="#">
<img src="<%=item["ImagePath"].ToString()%>"/>
<h4>
<span><%=item["Headline"].ToString()%></span>
</h4>
</a>
</div>
</div>
</div>
<%} %>
</div>