I have 4 images with different sizes. I want to create a grid of 2x2 with each block is equal to each other and it is a clickable image (work as a button). How can I do this in CSS/Bootstrap?
This is what I have tried (in Rails):
<div class="row row-cols-2 main-wrapper px-4">
<%= link_to students_path, class:"nav-link col btn btn-light center-div" do %>
<%= image_tag "/assets/bg/cs-ds-bg.jpeg" %>
<p class="h2">Student stories & Research</p>
<% end %>
<%= link_to faculties_path, class:"nav-link col btn btn-light center-div" do %>
<%= image_tag "/assets/bg/cs-bg.jpeg" %>
<p class="h2">Faculty & Staff</p>
<% end %>
<%= link_to courses_path, class:"nav-link col btn btn-light center-div" do %>
<p class="h2">Courses</p>
<% end %>
<%= link_to requirements_path, class: "nav-link col btn btn-light center-div" do %>
<p class="h2">Computer Science & Data Science <br>
Major & Minor Requirements</p>
<% end %>
</div>
CSS:
.main-wrapper {
height: 80vh;
}
.center-div {
display: flex;
align-items: center;
justify-content: center;
border: 0.5px solid #000000;
}
This is the image of what it looks right now
Thank you!
Related
Im having trouble using Ruby on Rail's in_groups_of method to show rows of products in groups of 4. When my code is as follows it works perfectly:
<% #products.in_groups_of(4, false).each do |row| %>
<div class="center">
<td>
<tr>
<% for product in row %>
<product>
<u><%= link_to "#{product.title}", product_path(product) %></u>
</product>
</tr>
</td>
</div>
However when I try to add additional product info all of the products are centered. This is the page with the additional info added:
<% #products.in_groups_of(4, false).each do |row| %>
<div class="center">
<td>
<tr>
<% for product in row %>
<product>
<u><%= link_to "#{product.title}", product_path(product) %></u>
</product>
<%= image_tag product.picture.url if product.picture? %>
<% if product.active == false %>
<p>Sorry, this product is not available at this time.</p>
<% else %>
<div id="paypalbutton"><%= raw product.paypalbutton %></div>
<% end %>
<% end %>
</tr>
</td>
</div>
<% end %>
I think my SCSS may be the problem but I'm not sure what's causing it to break. All SCSS used in the page is as followed:
.products {
list-style: none;
margin: 0;
li {
overflow: auto;
padding: 10px 0;
border-bottom: 1px solid $gray-lighter;
}
}
product {
font-size: 1.5em;
letter-spacing: -1px;
margin-bottom: 30px;
font-weight: normal;
color: $dark-gray-darker;
u {
text-decoration: underline;
}
}
#paypalbutton {
height: 50px;
width: 200px;
margin:0 auto;
}
Removing the 'margin:0 auto;' from #paypalbutton doesn't change anything either.
I don't think that this is the correct way of solving this but I got it to work using cards and a nav-bar class
<div class="container-center">
<% #products.in_groups_of(4, false) do |group| %>
<% for product in group %>
<ul class="nav navbar-nav">
<li>
<div class="card" style="width: 25rem;">
<%= image_tag product.picture.url if product.picture? %>
<div class="card-block">
<h3 class="card-title">
<u><%= link_to "#{product.title}", product_path(product) %></u>
</h3>
<div class="center">
<% if product.active == false %>
<p class="card-text">Sorry, this product is not available at this time.</p>
<% else %>
<div class="card-text" id="paypalbutton"><%= raw product.paypalbutton %></div>
<% end %>
</div>
</div>
</div>
</li>
</ul>
<% end %>
<% end %>
</div>
My Ruby on Rails application uses BootStrap for easier layout rendering. I define rows and columns:
<div class="container-fluid">
<div class="row">
<div class="col-md-3 left_border">
<ul class="" role="menu">
<li><%= link_to t('Groups'), groups_path %></li>
<li><%= link_to t('Users'), users_path %></li>
<li><%= link_to t('Parameters'), "#" %></li>
</ul>
</div>
<div class="col-md-8 col-md-offset-1">
<%= yield %>
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
</div>
</div>
</div>
The left-border class only sets the background color for the element:
.left_border {
background-color: $grayDarker;
}
It works fine, but the first column's background is set for its content only, not for the whole cell. If the <%= yield %> function returns lots of lines, I get a small grey box on the left including the menu, where I'd like to display a full grey column.
Thanks for your help.
I finally switched to the css3 Flexible Box feature, which provides a smart way of designing grids:
1 - I created the classes I needed in my css file
/* flex containers */
.flex-container {
display: -webkit-flex;
display: flex;
background-color: white;
}
.flex-container-v {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
background-color: white;
}
.flex-item {
background-color: white;
margin-left: 10px;
width: 80%
}
.flex-item-border {
background-color: lightgrey;
width: 20%;
}
2 - I organise my display blocks using these classes
<div class="flex-container-v">
<div class="flex-container">
<div class="flex-item-border logo">
<br/>
<%= image_tag("k.png", alt: "KeyMan") %>
<br/>
</div>
<div class="flex-item">
<nav class="top_menu">
<ul>
<% if user_signed_in? %>
<li> <%= t('User') %>: <%= link_to (current_user.first_name + ' ' + current_user.name), edit_user_registration_path %></li>
<li> | <%= link_to t('Sign_out'), destroy_user_session_path, method: "delete" %></li>
<% else %>
<li> <%= link_to t('Sign_in'), new_user_session_path %></li>
<% end %>
<li> | <%= link_to t('Help'), "#" %> </li>
</ul>
</nav>
<h1><%= t('Cryptographic Keys Manager') %></h1> </div>
</div>
...
And it works fine !
This is the code I have:
<div class="col-md-6 col-sm-6 col-xs-6">
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to "Sign in", omniauth_authorize_path(resource_name, provider) %>
<% end -%>
<% end -%>
</div>
From the code above how can I change link_to "Sign in" with:
<button class="btn btn-facebook btn btn-lg btn-block"><i class="fa fa-facebook fa-2x"></i> | Connect with <br> Facebook</button>
So instead of "sign in" simple button, I will show my custom made Facebook button.
Answer: this is how i solved it
<div class="col-md-6 col-sm-6 col-xs-6">
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to omniauth_authorize_path(resource_name, provider), class: 'btn btn-facebook btn btn-lg btn-block' do %>
<i class="fa fa-facebook fa-2x"></i>
|Connect with <br> Facebook
<% end %>
<% end -%>
<% end -%>
</div>
and it looks like this
when someone clicks on that,it gets redirected to the required path,which is omniauth_authorize_path(resource_name, provider)
for those who need the css code for this button here it is
.btn-facebook.btn.btn-lg.btn-block {
color: white;
background-color: DodgerBlue;
font-size: 1em;
&:hover {
color: white;
background-color: RoyalBlue;
}
}
I would appreciate if someone,would tell me how to make the "f" icon,to be in the center of the button.
Thank you
What I did:
<%= link_to raw('<span class="fa fa-facebook"></span> Ingresa con Facebook'), user_omniauth_authorize_path(:facebook), :class => 'btn btn-block btn-social btn-facebook form-control' %>
Im using the bootstrap-social gem and the font-awesome gem to style it exactly like facebook looks :P
https://github.com/gavinkflam/bootstrap-social-rails
I'm building a layout for my login page and am having problem getting my buttons to line up. I have used a custom class to center my username and password form, and would now like to have 2 equal sized buttons for log in and sign up underneath them. I tried achieving this with col that are half size of the parent, but so far they are just sized the same. Any help on what I'm doing wrong is appreciated.
html:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
<div class="col xs-2">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
</div>
css:
.btnstyle {
width:100%;
}
.centered {
float: none;
margin: 0 auto;
}
I tried to set up a fiddle, but ofc it won't work with rails tags...
figured it out, had a - missing and had to post them outside of the main col with an offset to center. Here's the final result:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
</div>
</div>
<div class="col-xs-2 col-xs-offset-4">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col-xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
Right now my users are displaying vertically. I would like them to display horizontally side by side. I know this is a very simple to do however, I am having a hard time getting it to be how I would like. Thank you in advance.
User/Index
<div class="page-header">
<center><strong><h1> All Users </h1></strong></center>
</div>
<% #users.each do |user| %>
<div class="user horizontal-align col-md-2">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<br><%= link_to user.name, user %></br>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
<% end %>
</div>
<div class="center">
<%= will_paginate #users, renderer: BootstrapPagination::Rails %>
</div>
User CSS
.user {
width: 200px;
display: inline-block;
}
Try the following:
Isolate .user from the .col-x-x containers. The col containers should be used for layout only. Styling the .user element is overriding the BS3 layout styles.
Remove any width definitions in your CSS for .user. Allow width to fall.
Wrap nested columns with .row
jsFiddle: http://jsfiddle.net/zktfu52t/2/
EX:
<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
<div class="row">
<% #users.each do |user| %>
<div class="horizontal-align col-md-2">
<div class="user">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<br><%= link_to user.name, user %></br>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
try this
<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
<% #users.each do |user| %>
<div class="user col-md-2 col-lg-2 text-center">
<%= link_to image_tag(user.avatar.url(:thumb)), user %>
<p><%= link_to user.name, user %></p>
<% if current_user.admin %>
<%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
<% end %>
</div>
With this css
.user{
margin:0.2%;
display:block;
}
This will give you 5 across on medium and large screens and vertical stacks on small and extra small screens. A Quick jsFiddle for you.
Also you have unclosed div tags here:
<div class="panel panel-default">
<div class="panel-heading center">
First things first: stop using the center tag. It's deprecated and unreliable. Use CSS for your styling needs.
To get your users displayed horizontally, you need to wrap all of the user details (links, in this case) in some sort of element. A div is probably best. Then you need to set those elements to display: inline-block.