Positioning view to the right of a sidebar with Rails/Bootstrap layout
0
I'm building a web app using Rails 5.2 and Bootstrap 4 and I'm having some trouble getting the basic layout in place.
What I'd like is to move the content for each view to the right of the sidebar. i.e. "Your companies".
Can someone help point me in the right direction so that all my views are "inside" the app view i.e below the nav and to the right of the sidebar.
Thank you! :)
Here's how the app looks currently:
Here is my application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
</div>
</div>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="span10">
<!--Body content-->
<%= yield %>
</div>
</body>
</html>
And here is my companies view (the same as the example in the screenshot above).
<div class="container">
<h1>Your Companies</h1>
<button>
<%= link_to 'Create New Company', new_company_path %>
</button>
<table>
<tr>
<th>Title</th>
<th>Text</th>
<th></th>
</tr>
<% @companies.each do |company| %>
<tr>
<td><%= company.title %></td>
<td><%= company.text %></td>
<td><%= link_to 'View Company', company_path(company) %></td>
<td><%= link_to 'Edit Company', edit_company_path(company) %></td>
<td><%= link_to 'Delete Company', company_path(company),
method: :delete,
data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</table>
</div>
ruby-on-rails bootstrap-4
asked Nov 12 '18 at 5:37
JP89
9318
add a comment |
0
I'm building a web app using Rails 5.2 and Bootstrap 4 and I'm having some trouble getting the basic layout in place.
What I'd like is to move the content for each view to the right of the sidebar. i.e. "Your companies".
Can someone help point me in the right direction so that all my views are "inside" the app view i.e below the nav and to the right of the sidebar.
Thank you! :)
Here's how the app looks currently:
Here is my application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
</div>
</div>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="span10">
<!--Body content-->
<%= yield %>
</div>
</body>
</html>
And here is my companies view (the same as the example in the screenshot above).
<div class="container">
<h1>Your Companies</h1>
<button>
<%= link_to 'Create New Company', new_company_path %>
</button>
<table>
<tr>
<th>Title</th>
<th>Text</th>
<th></th>
</tr>
<% @companies.each do |company| %>
<tr>
<td><%= company.title %></td>
<td><%= company.text %></td>
<td><%= link_to 'View Company', company_path(company) %></td>
<td><%= link_to 'Edit Company', edit_company_path(company) %></td>
<td><%= link_to 'Delete Company', company_path(company),
method: :delete,
data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</table>
</div>
ruby-on-rails bootstrap-4
asked Nov 12 '18 at 5:37
JP89
9318
add a comment |
0
0
0
I'm building a web app using Rails 5.2 and Bootstrap 4 and I'm having some trouble getting the basic layout in place.
What I'd like is to move the content for each view to the right of the sidebar. i.e. "Your companies".
Can someone help point me in the right direction so that all my views are "inside" the app view i.e below the nav and to the right of the sidebar.
Thank you! :)
Here's how the app looks currently:
Here is my application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
</div>
</div>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="span10">
<!--Body content-->
<%= yield %>
</div>
</body>
</html>
And here is my companies view (the same as the example in the screenshot above).
<div class="container">
<h1>Your Companies</h1>
<button>
<%= link_to 'Create New Company', new_company_path %>
</button>
<table>
<tr>
<th>Title</th>
<th>Text</th>
<th></th>
</tr>
<% @companies.each do |company| %>
<tr>
<td><%= company.title %></td>
<td><%= company.text %></td>
<td><%= link_to 'View Company', company_path(company) %></td>
<td><%= link_to 'Edit Company', edit_company_path(company) %></td>
<td><%= link_to 'Delete Company', company_path(company),
method: :delete,
data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</table>
</div>
ruby-on-rails bootstrap-4
asked Nov 12 '18 at 5:37
JP89
9318
I'm building a web app using Rails 5.2 and Bootstrap 4 and I'm having some trouble getting the basic layout in place.
What I'd like is to move the content for each view to the right of the sidebar. i.e. "Your companies".
Can someone help point me in the right direction so that all my views are "inside" the app view i.e below the nav and to the right of the sidebar.
Thank you! :)
Here's how the app looks currently:
Here is my application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
</div>
</div>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="span10">
<!--Body content-->
<%= yield %>
</div>
</body>
</html>
And here is my companies view (the same as the example in the screenshot above).
<div class="container">
<h1>Your Companies</h1>
<button>
<%= link_to 'Create New Company', new_company_path %>
</button>
<table>
<tr>
<th>Title</th>
<th>Text</th>
<th></th>
</tr>
<% @companies.each do |company| %>
<tr>
<td><%= company.title %></td>
<td><%= company.text %></td>
<td><%= link_to 'View Company', company_path(company) %></td>
<td><%= link_to 'Edit Company', edit_company_path(company) %></td>
<td><%= link_to 'Delete Company', company_path(company),
method: :delete,
data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</table>
</div>
ruby-on-rails bootstrap-4
ruby-on-rails bootstrap-4
asked Nov 12 '18 at 5:37
JP89
9318
asked Nov 12 '18 at 5:37
JP89
9318
asked Nov 12 '18 at 5:37
JP89
9318
asked Nov 12 '18 at 5:37
JP89
9318
asked Nov 12 '18 at 5:37
JP89
9318
9318
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
I guess you want to do something like that:
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
<div class="col-sm-8 col-md-9">
<!--Body content-->
<%= yield %>
</div>
</div>
</div>
</body>
</html>
Also, remove the class container from your companies/index.html.erb file.
answered Nov 12 '18 at 6:08
Emu
4,20311839
1
This worked great. Will check the diff so I see what you did there. Thank you!
– JP89
Nov 12 '18 at 6:25
Glad to hear that. Anyways, better if you check the bootstrap grid layout. It'll help you to find what I did there. Cheers!
– Emu
Nov 12 '18 at 6:44
add a comment |
0
As you are using bootstrap 4, you should use float-right class to float the content to the right.
<div class="container float-right">
--------content--------
</div
More info here
answered Nov 12 '18 at 6:09
Pavan
29.6k62953
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256430%2fpositioning-view-to-the-right-of-a-sidebar-with-rails-bootstrap-layout%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I guess you want to do something like that:
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
<div class="col-sm-8 col-md-9">
<!--Body content-->
<%= yield %>
</div>
</div>
</div>
</body>
</html>
Also, remove the class container from your companies/index.html.erb file.
answered Nov 12 '18 at 6:08
Emu
4,20311839
1
This worked great. Will check the diff so I see what you did there. Thank you!
– JP89
Nov 12 '18 at 6:25
Glad to hear that. Anyways, better if you check the bootstrap grid layout. It'll help you to find what I did there. Cheers!
– Emu
Nov 12 '18 at 6:44
add a comment |
1
I guess you want to do something like that:
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
<div class="col-sm-8 col-md-9">
<!--Body content-->
<%= yield %>
</div>
</div>
</div>
</body>
</html>
Also, remove the class container from your companies/index.html.erb file.
answered Nov 12 '18 at 6:08
Emu
4,20311839
1
This worked great. Will check the diff so I see what you did there. Thank you!
– JP89
Nov 12 '18 at 6:25
Glad to hear that. Anyways, better if you check the bootstrap grid layout. It'll help you to find what I did there. Cheers!
– Emu
Nov 12 '18 at 6:44
add a comment |
1
1
1
I guess you want to do something like that:
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
<div class="col-sm-8 col-md-9">
<!--Body content-->
<%= yield %>
</div>
</div>
</div>
</body>
</html>
Also, remove the class container from your companies/index.html.erb file.
answered Nov 12 '18 at 6:08
Emu
4,20311839
I guess you want to do something like that:
<!DOCTYPE html>
<html>
<head>
<title>Calmcap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- TODO add these as assets -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">Calmcap</a>
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Userid: <%= current_user.id %> / Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>
</p>
</nav>
<div class="row">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment-o"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-search"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-user"></i> Lorem ipsum
</a>
<a href="#" class="list-group-item">
<i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope"></i> Lorem ipsum
</a>
</div>
</div>
<div class="col-sm-8 col-md-9">
<!--Body content-->
<%= yield %>
</div>
</div>
</div>
</body>
</html>
Also, remove the class container from your companies/index.html.erb file.
answered Nov 12 '18 at 6:08
Emu
4,20311839
answered Nov 12 '18 at 6:08
Emu
4,20311839
answered Nov 12 '18 at 6:08
Emu
4,20311839
answered Nov 12 '18 at 6:08
Emu
4,20311839
4,20311839
1
This worked great. Will check the diff so I see what you did there. Thank you!
– JP89
Nov 12 '18 at 6:25
Glad to hear that. Anyways, better if you check the bootstrap grid layout. It'll help you to find what I did there. Cheers!
– Emu
Nov 12 '18 at 6:44
add a comment |
1
This worked great. Will check the diff so I see what you did there. Thank you!
– JP89
Nov 12 '18 at 6:25
Glad to hear that. Anyways, better if you check the bootstrap grid layout. It'll help you to find what I did there. Cheers!
– Emu
Nov 12 '18 at 6:44
1
1
This worked great. Will check the diff so I see what you did there. Thank you!
– JP89
Nov 12 '18 at 6:25
This worked great. Will check the diff so I see what you did there. Thank you!
– JP89
Nov 12 '18 at 6:25
Glad to hear that. Anyways, better if you check the bootstrap grid layout. It'll help you to find what I did there. Cheers!
– Emu
Nov 12 '18 at 6:44
Glad to hear that. Anyways, better if you check the bootstrap grid layout. It'll help you to find what I did there. Cheers!
– Emu
Nov 12 '18 at 6:44
add a comment |
0
As you are using bootstrap 4, you should use float-right class to float the content to the right.
<div class="container float-right">
--------content--------
</div
More info here
answered Nov 12 '18 at 6:09
Pavan
29.6k62953
add a comment |
0
As you are using bootstrap 4, you should use float-right class to float the content to the right.
<div class="container float-right">
--------content--------
</div
More info here
answered Nov 12 '18 at 6:09
Pavan
29.6k62953
add a comment |
0
0
0
As you are using bootstrap 4, you should use float-right class to float the content to the right.
<div class="container float-right">
--------content--------
</div
More info here
answered Nov 12 '18 at 6:09
Pavan
29.6k62953
As you are using bootstrap 4, you should use float-right class to float the content to the right.
<div class="container float-right">
--------content--------
</div
More info here
answered Nov 12 '18 at 6:09
Pavan
29.6k62953
edited Nov 12 '18 at 6:15
answered Nov 12 '18 at 6:09
Pavan
29.6k62953
answered Nov 12 '18 at 6:09
Pavan
29.6k62953
answered Nov 12 '18 at 6:09
Pavan
29.6k62953
29.6k62953
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256430%2fpositioning-view-to-the-right-of-a-sidebar-with-rails-bootstrap-layout%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
