This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 11 months ago.
Helo everyone!
Can not figure out how to align vertically items in Bootstrap 5 on a specific example. The row is separated into two columns ( col-md-6 ) and I want to position two items in only the first column one in the middle of the flexbox and the other in the end. I can't separate the two items, the only thing that works is to move them together. Any thoughts?
<div class="row min-vh-100" id="about">
<div class="col-md-6 bg-red d-flex flex-column justify-content-center">
<div class="text-center">
<h2>ABOUT</h2>
</div>
<div class="d-flex flex-column justify-content-end">
<div class="text-center">
<ul>
<li>about me /</li>
<li>projects /</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero expedita
ea assumenda aperiam? Nam atque dolorum aut quo,
magni voluptatum aspernatur consequatur doloremque excepturi, reprehenderit,
vitae eius similique doloribus? Quae?
</div>
</div>
Use justify-content-between to spread the elements across the start, middle and end section of your column. To push the heading in the middle and the menu to the bottom, just add an empty <div> as first element in your column.
You can find pretty good pictured tutorial on flex-items here.
<div class="row min-vh-100" id="about">
<div class="col-md-6 bg-red d-flex flex-column justify-content-between">
<div class="w-100"> <!-- just an empty box with 100% width --></div>
<div class="text-center">
<h2>ABOUT</h2>
</div>
<div class="d-flex flex-column justify-content-end">
<div class="text-center">
<ul>
<li>about me /</li>
<li>projects /</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero expedita
ea assumenda aperiam? Nam atque dolorum aut quo,
magni voluptatum aspernatur consequatur doloremque excepturi, reprehenderit,
vitae eius similique doloribus? Quae?
</div>
</div>
Related
I am creating a tabbed login page, so that the user can either log-in or click on other tabs for other info. Here's the code:
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Log-in</a></li>
<li><a data-toggle="tab" href="#aboutus">What's HooHit?</a></li>
<li><a data-toggle="tab" href="#howworks">How it works!</a></li>
<li><a data-toggle="tab" href="#blog">Blog</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="aboutus" class="tab-pane fade">
<h3>HooHit Logo</h3>
<p>HooHit Pets is an online community...</p>
</div>
<div id="howworks" class="tab-pane fade">
<h3>Steps picture</h3>
<p>You simply upload a picture or video ...</p>
</div>
<div id="blog" class="tab-pane fade">
<br />
<p>...</p>
Click here!
</div>
</div>
</div>
</div>
</div>
The issue I am having is that when I run the code, the tabs don't work. So when I click on the blog tab as an example, the URL on the browser changes to http://localhost:43345/Account/Login2#blog but the tab doesn't change in the view. I can guess the reasoning (i.e. routing in MVC) but am not sure how to fix it. Any ideas?
Code is correct.
You might be missing a Jquery reference needed by boostrap in your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Having trouble implementing Bootstrap Grid System on Rails
I created a partial for sidebar so I wouldn't have to copy it to all of my views. The solution I went for in my
application.html.erb
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-8"><%= yield %></div>
<div class="col-md-4"><%= render 'layouts/sidebar' %></div>
</div>
<!-- /.row -->
</div>
index.html.erb (start)
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div>
<h1 class="my-4">Page Heading
<small>Secondary Text</small>
</h1>
<!-- Blog Post -->
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">Post Title</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
Read More →
</div>
<div class="card-footer text-muted">
Posted on January 1, 2017 by
Start Bootstrap
</div>
</div>
_sidebar.html.erb
<div>
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
Current Problem
What it should look like--
https://blackrockdigital.github.io/startbootstrap-blog-post/
Solved it by replacing row-fluid from my application.html.erb with just row. If someone could explain to me why that was happening that would really help me a lot on my journey in learning web application development. Thanks!
Question: In a Bootstrap Tabs panel, how can we display an MVC View page in the corresponding tab-content area?
Details: Following example (taken from here) works fine in my ASP.NET MVC Core project. But, using anchor tag helper I want to call an action method when user clicks on a tab; when I do that I get the following error. For example, I get this error when in tab Menu 1 I use asp-controller and asp-action attributes as follows. I know the error is related to href attribute that is related to the corresponding tab contents. Is there a workaround so we can still call an action method when a tab is clicked?:
Error:
Cannot override the 'href' attribute for <a>.
Error is on this line: <li><a data-toggle="tab" href="#menu1" asp-controller="myController asp-action="myAction">Menu 1</a></li>
Following works if anchor tag helper is not used:
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
What you need to do is to call #Html.RenderAction() inside the required tab content. Leave the href as they are, there purpose is only to show the corresponding tab based on tab id.
See the following Question:
Create controller for partial view in ASP.NET MVC
I followed the instructions written here - https://github.com/twbs/bootstrap-sass
But bootstrap seems to be not working.
I installed the gems needed, updated files written in the github documentation, and then in my application_layout,
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
it breaks the layout and the grids comes one under another.
I think the reason your bootstrap grid is not working in your browser is that your screen resolution might be too small. Since its small it requires the col-sm-4 class and you also forget a to close out the container. I've posted a fiddle https://jsfiddle.net/rvega20/pogfb4w9/
Also as mentioned before in order to use bootstrap-sass, one has to use the main syntax (as of Sass 3) which is known as "SCSS". So straight from the bootstrap documentation -->
Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
Then, remove all the //= require and //= require_tree statements from the file. Instead, use #import to import Sass files.
Do not use //= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
Require Bootstrap Javascripts in app/assets/javascripts/application.js:
//= require jquery
//= require bootstrap-sprockets
bootstrap-sprockets and bootstrap should not both be included in application.js.
bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-sm-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4 col-sm-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4 col-sm-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
I'll try to guess what your problem is, but you haven't provided the necessary context code so it's impossible for anyone to answer you with any certainty.
I'm guessing you don't have that nested inside a row div.
Check your application.css file - it must be removed, and instead of it you must have application.css.scss file with contents:
#import "bootstrap-sprockets";
#import "bootstrap";
I've been trying to create a basic portfolio such as this one (www.tommyblue.it) using Locomotive CMS,
I've managed to set up all the needed gems and required programs, mongodb, homebrew etc...
However due to the extreme difficulty of finding decent haml or Locomotive CMS documentation (for a newbie) online I'm stuck with it. My goal would be to have running app before the end of the month, crazy uh?
Any help is truly appreciated.
Basically this is what I'm stuck with atm:
{{ 'js.js' | javascript_tag }}
{{ 'main.js' | javascript_tag }}
{{ 'custom.js' | javascript_tag }}
{{ 'jquery-1.7.1.min.js' | javascript_tag }}
{{ 'jquery.easing.1.3.js' | javascript_tag }}
{{ 'jquery.masonry.min.js' | javascript_tag }}
{{ 'jquery.prettyPhoto.js' | javascript_tag }}
{{ 'jquery.quicksand.js' | javascript_tag }}
{{ 'jquery.tweet.js' | javascript_tag }}
{{ 'modernizr.js' | javascript_tag }}
{{ 'style.css' | stylesheet_tag }}
{{ 'font.css' | stylesheet_tag }}
{{ 'prettyPhoto.css' | stylesheet_tag }}
{{ 'reset.css' | stylesheet_tag }}
{{ 'typography.css' | stylesheet_tag }}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
{{ Design.Diverso }}
</head>
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
<div class="body-inside">
<!-- begin header -->
<header id="header">
<!-- begin slider -->
<div id="f_slider">
<div class="slider">
<ul>
<li>
<div class="row">
<h5>HELLO,</h5>
<h2>WELCOME TO <span class="h_black">NONAME</span></h2>
</div>
<div class="row">
<h4>
Enjoy our company For the design & production of all manner of digital creative.
</h4>
</div>
</li>
<li>
<div class="row text-center">
<h2>Enjoy <span class="h_black"> our </span>company </h2>
</div>
<div class="row one-half text-right">
<h4>Who we are</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
Lorem ipsum dolor sit amet, consecadipiscing elit.
</div>
</div>
<div class="row one-half last">
<h4>What we've done</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
Lorem ipsum dolor sit amet, consecadipiscing elit.
</div>
</div>
<span class="clear"></span>
</li>
<li>
<div class="row one-half text-right">
<h2> we make </h2>
<h2> it <span class="h_black">better</span></h2>
</div>
<div class="row one-half last">
<h4>Lorem ipsum dolor</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec.
<div>
{{ 'html5_logo.png' | theme_image_tag }}
{{ 'css3_logo.png' | theme_image_tag }}
{{ 'jquery_logo.png' | theme_image_tag }}
</div>
<span class="clear"></span>
</li>
</ul>
</div>
</div>
<!-- end slider -->
<!-- begin navigation -->
<nav id="top_menu">
<div class="inside">
<!-- logo -->
<a href="#" class="logo">
{{ 'logo.png' | theme_image_tag }}
</a>
<!-- begin menu -->
<ul class="menu">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="works.html">
Works
</a>
</li>
<li>
<a href="blog.html">
Blog
</a>
<ul>
<li>Single Post</li>
</ul>
</li>
<li>
<a href="services.html">
Services
</a>
</li>
<li>
About Us
</li>
<li>
<a href="#">
Features
</a>
<!-- begin sub menu -->
<ul>
<li>
<a href="typography.html">
Typography
</a>
</li>
<li>
<a href="columns.html">
Columns
</a>
</li>
<li>
<a href="elements.html">
Elements
</a>
</li>
<li>
<a href="team.html">
Our Team
</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
<!-- end menu -->
</div>
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- begin main -->
<article id="main">
<!-- Begin ajax menu -->
<nav id="to-top-menu">
<span></span>
</nav>
<!-- end ajax menu -->
<ul class="fast_link">
<li class="">
<div class="link_wrap" data-link="works">
<div class="link_title">
<h2>OUR WORKS</h2>
<p>Recent Projects</p>
</div>
{{ 'a_works.png' | theme_image_tag }}
{{ 'a_works_hover.png' | theme_image_tag }}>
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="blog">
<div class="link_title">
<h2>BLOG</h2>
<p>From the Blog</p>
</div>
{{ 'a_blog.png' | theme_image_tag }}
{{ 'a_blog_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="services">
<div class="link_title">
<h2>SERVICES</h2>
<p>What we do</p>
</div>
{{ 'a_service.png' | theme_image_tag }}
{{ 'a_service_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="team">
<div class="link_title">
<h2>THE TEAM</h2>
<p>Meat the team </p>
</div>
{{ 'a_team.png' | theme_image_tag }}
{{ 'a_team_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="last">
<div class="link_wrap" data-link="contact">
<div class="link_title">
<h2>CONTACT</h2>
<p>Get in touch</p>
</div>
{{ 'a_contact.png' | theme_image_tag }}
{{ 'a_contact_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
</ul>
<span class="clear"></span>
<!-- home page title -->
<nav class="page_title displaynone">
<h2>
<span class="title">PLACE SELECT A PAGE</span>
<span class="loading_link"></span>
</h2>
</nav>
<!-- callback ajax content -->
<section id="content">
</section>
<span class="clear"></span>
</article>
<!-- end main -->
</div>
<!-- end body inside -->
<!-- begin footer -->
<footer id="footer">
<div class="inside">
<div class="footer-widget">
<div class="one-third">
<h2>Follow Us</h2>
<p>
Omnes enim peccaverunt et egent gloriam Dei. In principio creavit Deus caelum et terram.
</p>
<ul class="footer-socials">
<li class="rss"></li>
<li class="twitter"></li>
<li class="facebook"></li>
<li class="dribbble"></li>
<li class="vimeo"></li>
<li class="skype"></li>
</ul>
<span class="clear"></span>
</div>
<div class="one-third">
<h2>About Us</h2>
<p>{{ 'logo.png' | theme_image_tag }}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec. Proin nec sollicitudin augue. Donec hendrerit</p>
</div>
<div class="one-third last">
<h2>Join our newsletter</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis.</p>
<form id="form_newslatter">
<input type="text" name="newslatter" id="newslatter" placeholder="Email Address..." />
</form>
</div>
<span class="clear"></span>
</div>
<div class="footer-bottom">
<span class="copyright">© 2012 · AGT NoName ( Valid html5 ) All Rights Reserved</span>
<nav id="footer_menu">
<ul>
<li>Home</li>
<li>Works</li>
<li>Blog</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</footer>
<!-- end footer -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</body>
</html>
You might want to use twitter bootstrap as your theme for it includes a pretty nice and lighweight carousel and create a Photos model with a file and description fields then in your page implement somthing like this in locomotive:
{% for photo in contents.photos %}
<li>
{{ photo.fichier.url | image_tag }}
</li>
{% endfor %}
This is an example, don't just copy and paste since I'm using this with fundation as a theme and lightbox for photos.
Let me know if you need further explanation (I don't have time right now).
I think you should read this stuff carefully http://doc.locomotivecms.com/installation/getting_started
Also I have the clue you are mixing 2 things at this very moment:
CMS is explained as Content Management System therefor you will be able to Manage your Content with this System ;)
Ruby on rails is the main web development tool you use to build the housing of your website in the so called server side and client side.
So try to make a website in Ruby on Rails first. then add your CMS system to it and that should do it.