Currently I have my website looking like this.
http://imgur.com/jS1vEKq
Here's the html
<html ng-app="app">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/opencv_css.css" />
</head>
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<body ng-controller="MainController">
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-model="template"
ng-options="t as t for t in templates">
</select>
</div>
</form>
</div>
</div>
<input type="file" id="fileToUpload" name="fileToUpload">
<button ng-click="add()">Upload</button>
</div>
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
<script src="js/jQuery.js"></script>
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I was wondering how I would move image elements just a few pixels lower so that they aren't right against the upload button? And I know that the way I've placed the images in bootstrap must be completely wrong and awful. I'm still a noob to web dev so I simply looked at someone else's code and made it fit to my needs.
Try a < br> (Without Space) it will break one line ;)
I saw this answer was given already, sorry
You can add a margin to your .data-image class
.data-image {
margin: 10px 0px;
}
Well theres a few ways you could do this firstly (kinda cheaty) just use simple <br> tags like so...
<br><br> <--- right here
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
you can add it in before or after the row tag i think but try this
Related
I've hard time installing RTL with Semantic UI, I used npm to insall semantic then edited the semantic.json file "rtl": false, to true
then followed this question (Existing Installation) but neved worked does semantic ui framework support rtl languages?
I also tried this with CDN https://rtlcss.com/cdn/css-frameworks/semantic-ui/index.html didn't work either!
What is the problem ?
semantic.json
permission": false,
"autoInstall": false,
"rtl": true,
"version": "2.3.3"
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Homepage</title>
<!-- Semanti UI -->
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
<!-- Semanti UI -->
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- nav -->
<div class="ui stackable menu">
<div class="item">
<img src="https://en.facebookbrand.com/wp-content/uploads/2016/05/flogo_rgb_hex-brc-site-250.png">
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<div class="right menu">
<a class="item ">Sign-in</a>
<a class="item ">Sign-up</a>
</div>
</div>
<!-- nav -->
<div class="commentsContainer">
<h2 class="ui center aligned icon header">
SMLE
</h2>
<div class="ui stacked segment">
<p> بسم الله الرحمن الرحيم
</p>
</div>
<div class="bu">
<div class="RorL">
<button class="ui blue right labeled icon button">
<i class="right arrow icon"></i>
التالي
</button>
</div>
<button class="ui blue left labeled icon button">
<i class="left arrow icon"></i>
السابق
</button>
</div>
<div class="ui small comments">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/molly.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
<div class="actions">
<a class="reply"><span> 22</span> UpVote</a>
<a class="reply">DownVote</a>
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</a>
<div class="content">
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">Just now</span>
</div>
<div class="text">
Elliot you are always so right :)
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
<!-- Comments -->
</div>
<!-- Semanti UI -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
<!-- Semanti UI -->
</body>
</html>
Fixed it , It's a simple mistake.
The code was missing this.
<html dir="rtl" lang="ar">
`<!DOCTYPE html>
<html class="no-js">
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" type="image/png" href="images/favicon.png">
<title>Timer Agency Template</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Template CSS Files
================================================== -->
<!-- Twitter Bootstrs CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Ionicons Fonts Css -->
<link rel="stylesheet" href="css/ionicons.min.css">
<!-- animate css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Hero area slider css-->
<link rel="stylesheet" href="css/slider.css">
<!-- owl craousel css -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<!-- template main css file -->
<link rel="stylesheet" href="css/main.css">
<!-- responsive css -->
<link rel="stylesheet" href="css/responsive.css">
<!-- Template Javascript Files
================================================== -->
<!-- modernizr js -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- owl carouserl js -->
<script src="js/owl.carousel.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- wow js -->
<script src="js/wow.min.js"></script>
<!-- slider js -->
<script src="js/slider.js"></script>
<script src="js/jquery.fancybox.js"></script>
<!-- template main js -->
<script src="js/main.js"></script>
</head>
<body>
<!--
==================================================
Header Section Start
================================================== -->
<header id="top-bar" class="navbar-fixed-top animated-header">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<div class="navbar-brand">
<a href="index.html" >
<img src="images/logo.png" alt="">
</a>
</div>
<!-- /logo -->
</div>
<!-- main menu -->
<nav class="collapse navbar-collapse navbar-right" role="navigation">
<div class="main-menu">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html" >Home</a>
</li>
<li>Sign Up</li>
<li>Log In</li>
<li>Contact</li>
</ul>
</div>
</nav>
<!-- /main nav -->
</div>
</header>
<!--
==================================================
Slider Section Start
================================================== -->
<section id="hero-area" >
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="block wow fadeInUp" data-wow-delay=".3s">
<!-- Slider -->
<section class="cd-intro">
<h1 class="wow fadeInUp animated cd-headline slide" data-wow-delay=".4s" >
<span>EMPLOYEE TRAINING PROGRAMME</span><br>
<span class="cd-words-wrapper">
<b class="is-visible">(ETP)</b>
<b>DEVELOPER</b>
<b>FATHER</b>
</span>
</h1>
</section> <!-- cd-intro -->
<!-- /.slider -->
<a class="btn-lines dark light wow fadeInUp animated smooth-scroll btn btn-default btn-green" data-wow-delay=".9s" href="#works" data-section="#works" >View Programmes</a>
</div>
</div>
</div>
</div>
</section><!--/#main-slider-->
<!--
==================================================
Slider Section Start
================================================== -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInLeft" data-wow-delay=".3s" data-wow-duration="500ms">
<h2>
ABOUT THE COMPANY
</h2>
<p>
Persistent Systems is a technology services company which was incorporated on 16 May 1990 as Persistent Systems Private Limited. It was subsequently converted into a public Limited company on 17 September 2010 with the name Persistent Systems Limited and a new certificate of incorporation was issued on 28 September 2007 from the RoC.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms">
<img src="images/about/about.jpg" alt="">
</div>
</div>
</div>
</div>
</section> <!-- /#about -->
<!--
==================================================
Portfolio Section Start
================================================== -->
<section id="works" class="works">
<div class="container">
<div class="section-heading">
<h1 class="title wow fadeInDown" data-wow-delay=".3s">Available Programmes</h1>
<p class="wow fadeInDown" data-wow-delay=".5s">
The following programmes are available for our employees..
</p>
</div>
<div class="row">
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<div class="img-wrapper">
<img src="images/portfolio/item-1.jpg" class="img-responsive" alt="this is a title" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for Selenium</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
Selenium
</a>
</h4>
<p>
Automated software testing tool
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="300ms">
<div class="img-wrapper">
<img src="images/portfolio/item-2.jpg" class="img-responsive" alt="this is a title" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for Robotium</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
Robotium
</a>
</h4>
<p>
Automation testing framework (Android) </p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="300ms">
<div class="img-wrapper">
<img src="images/portfolio/item-3.jpg" class="img-responsive" alt="" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for TestComplete</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
TestComplete
</a>
</h4>
<p>
Open testing platform
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="600ms">
<div class="img-wrapper">
<img src="images/portfolio/item-4.jpg" class="img-responsive" alt="" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for SoapUI</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
SoapUI
</a>
</h4>
<p>
Web service testing application
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="900ms">
<div class="img-wrapper">
<img src="images/portfolio/item-5.jpg" class="img-responsive" alt="" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for QTP(HP)</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
QTP
</a>
</h4>
<p>
Automated functional testing tool
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 col-xs-12">
<figure class="wow fadeInLeft animated" data-wow-duration="500ms" data-wow-delay="1200ms">
<div class="img-wrapper">
<img src="images/portfolio/item-6.jpg" class="img-responsive" alt="" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="service.html">Enroll for TestDrive</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
TestDrive
</a>
</h4>
<p>
Automated software quality solution
</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section> <!-- #works -->
<!--
==================================================
Portfolio Section Start
================================================== -->
<section id="feature">
<div class="container">
<div class="section-heading">
<h1 class="title wow fadeInDown" data-wow-delay=".3s">BENEFITS</h1>
<p class="wow fadeInDown" data-wow-delay=".5s">
The benefits of the programme are clearly very high.<br>The programme empowers you with new ways for quality software development.
</p>
</div>
<div class="row">
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInUp animated" data-wow-duration="500ms" data-wow-delay="300ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-flask-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Better product quality
</h4>
<p>After the programme,the products you generate will see a rise in quality.</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="600ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-lightbulb-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Client satisfaction
</h4>
<p>Better quality products will automatically lead to better client satisfaction</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="900ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-lightbulb-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Work reduction
</h4>
<p>The programme will allow you to generate products in a complete new mannner thus reducing your work.</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="1200ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-americanfootball-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Easier development
</h4>
<p>Development of new products will now be easier than ever before.</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="1500ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-keypad-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Increased work rate
</h4>
<p>New methods will allow you to work at a faster pace thus increasing your work rate.</p>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12">
<div class="media wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="1800ms">
<div class="media-left">
<div class="icon">
<i class="ion-ios-barcode-outline"></i>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Skill upgradation</h4>
<p>Last but not the least,you will have a new set of skills completely industry relevant.</p>
</div>
</div>
</div>
</div>
</div>
</section> <!-- /#feature -->
<!--
==================================================
Call To Action Section Start
================================================== -->
<section id="call-to-action">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="block">
<h2 class="title wow fadeInDown" data-wow-delay=".3s" data-wow-duration="500ms">STILL THINKING?</h1>
<p class="wow fadeInDown" data-wow-delay=".5s" data-wow-duration="500ms">Stop thinking. Begin now. The later you begin, the more you will be left behind.</p>
Contact With Me
</div>
</div>
</div>
</div>
</section>
<!--
==================================================
Footer Section Start
================================================== -->
<footer id="footer">
<div class="container">
<div class="col-md-8">
<p class="copyright">Copyright: <span>2015</span> . `enter code here`Design and Developed by Themefisher</p>
</div>
<div class="col-md-4">
<!-- Social Media -->
<ul class="social">
<li>
<a href="https://www.facebook.com/PersistentSystems/" target="_blank"class="Facebook">
<i class="ion-social-facebook"></i>
</a>
</li>
<li>
<a href="https://twitter.com/Persistentsys?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" class="Twitter">
<i class="ion-social-twitter"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/persistent-systems" class="Linkedin" target="_blank">
<i class="ion-social-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</footer> <!-- /#footer -->
</body>
</html>
I am currently working on a web project where if the user wants to enroll for a particular program the user clicks on enroll and they are redirected to the log in page. but I want that they should be automatically redirected to their profile pages if they are already logged in.What should I do.Also I am a newbie to stackoverflow so I don't know how to present my code here.If someone would tell me how to do so I am totally open to do it.
You have to test in PHP if your user is logged into your website.
session_start();
if(isset($_SESSION['isLogged'])){
header('Location: profil.php');
exit;
}
else {
header('Location: login.php');
exit;
}
I suppose you don't know a lot PHP, so you should have a look to how create a membership and use PHP sessions :-)
https://code.tutsplus.com/tutorials/user-membership-with-php--net-1523
well you need to check your if session or if cookie exists and is not expired .... if they exist then you redirect before the whole page is loaded (server Logic) ... as i dont know what language you have written you server logic in i cant help you with the code
After user is logged-in generate a user token and store it in a cookie when ever user redirect to login-page use jquery/javascript to check the cookie then from there you can decide whether user should stay in login-page or redirect to profile page.
You can post your code by pasting in the editor and select the code then click on {} this symbol
The header is all effed: How do I get this smartcat.png image to be the entire background for the header only?
I am hoping to add the answer to my stylesheet "cat.css" .
I appreciate all suggestions and better practices for coding with bootstrap.
Here is the website:
http://chillcastle.com/cat/felinedelirium
Here is my stylesheet:
.header-content {background: url("img/smartcat.png");}
.header {background: url("img/smartcat.png");}
Here is the webpage code:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Feline Delirium</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/creative.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="www.chillcreatives.com">
<span class="sr-only">Poop</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Felines</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">Cat Tales</a>
</li>
<li>
<a class="page-scroll" href="#services">Cat News</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Cat Life</a>
</li>
<li>
<a class="page-scroll" href="#contact">Cat Stuff</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Kitty Cats</h1>
<hr>
<p>Feline Delirium is a fun thing.</p>
Find Out More
</div>
</div>
</header>
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Cats</h2>
<hr class="light">
<p class="text-faded">Whoa. Cats.</p>
Get Started!
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">BIJOUXXX</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-diamond text-primary sr-icons"></i>
<h3>Sturdy Templates</h3>
<p class="text-muted">Cats!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i>
<h3>Ready to Ship</h3>
<p class="text-muted">You can use this theme as is, or you can make changes!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-newspaper-o text-primary sr-icons"></i>
<h3>Up to Date</h3>
<p class="text-muted">We update dependencies to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-heart text-primary sr-icons"></i>
<h3>Made with Love</h3>
<p class="text-muted">You have to make your websites with love these days!</p>
</div>
</div>
</div>
</div>
</section>
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter popup-gallery">
<div class="col-lg-4 col-sm-6">
<a href="img/cubecat.png" class="portfolio-box">
<img src="img/cubecat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/smartcat.png" class="portfolio-box">
<img src="img/smartcat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/goldencat.png" class="portfolio-box">
<img src="img/goldencat.png" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="smokincat.jpg" class="portfolio-box">
<img src="img/smokingcat.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/5.jpg" class="portfolio-box">
<img src="img/" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="img/6.jpg" class="portfolio-box">
<img src="img/portfolio/thumbnails/6.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<aside class="bg-dark">
<div class="container text-center">
<div class="call-to-action">
<h2>Bijouxxx</h2>
cats!
</div>
</div>
</aside>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p>Hit us up with your cat pic</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p>123-456-6789</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p><a href="the chill castle # gmail.com >feedback#startbootstrap.com</a></p>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/creative.min.js"></script>
The aspect ratio of the cat picture compared to the header is way different. You could crop the image in height a little bit to help it fit.
After which you can use this code to get it scale to cover the entire header. You will need to mess around with the css position and the size of the cat image to see what works for you.
.header-content {
background: url(img/smartcat.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's the article link for a full width background image - https://css-tricks.com/perfect-full-page-background-image/
Happy coding!
Added Note
The header is very thin and currently has an approximate aspect ratio of 7:1. Which basically means in order to maintain aspect ratio ,every one increase in height will cause a 7 times increase in width. So if you double the height, the width will be 14 (i.e 14:2)
Now your image on the other hand has an aspect ratio of 25:24.
So imagine that you're trying to fit a square box inside a thin horizontal line. Not really going to fit without distorting the image.
So you basically have three options.
Change background-size:cover to background-size:contain. This will basically make the height of the image the same as the parent so that the whole image appears without breaking the ratio. Basically it will make sure your whole image is displayed in the container. But this also means that your container will not get fully covered by the image. Here is an example of option 1 . http://i.imgur.com/GxcF4aO.jpg?1
Keep background-size:cover and adjust the aspect ratio of the image to be more like the header. i.e. Crop the image in height.
Here is an example of a cropped image. http://i.imgur.com/GNEZq4U.jpg?1
Keep everything the way it is and increase the height of the header to match the image.
Here's a link to show how aspect ratio works. You can toggle the How to handle ratio mismatches radio buttons at the bottom to check the difference between options 1 and 2.
http://andrew.hedges.name/experiments/aspect_ratio/ Make sure you have the show sample image button checked. Enter the dimensions of the header and either the height or the width of the image to find out what ratio the image should be.
Hope this helps.
I've tried playing with putting the indents and placement in different places but it still appear underneath the navigation button. I want it on the same line across the top.
I might of made it a bit messy trying to get it on the same line, if so just take out whenever isn't necessary.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap For Beginners</title>
<meta name="description" content="Hello World">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style>
.nav {
}
.nav container-fluid {
}
.nav li {
display: inline;
padding: 20px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
.jumbotron {
}
.jumbotron container-fluid {
}
.jumbotron h1 {
.footer {
}
.footer container-fluid {
}
.footer p {
}
</style>
</head>
<body>
<div class="nav">
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form>
</div>
</div>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h1>Student</h1>
<h1>Business</h1>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p>By:</p>
<p>For:</p>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
The input bar doesn't seem to be responsive on really really small windows, is that normal?
I also want the footer to be the same size as the nav header and the jumbotron to fill up the rest of the space in between, everything fits in the window with no scrolling.
Thanks in advance.
Your code looks great, all you have to do is wrap the form and nav in a wrapper / container then separate the sections with col-md-6. I built an example for you here http://www.bootply.com/P7VmPZOfXp.
/* CSS used here will be applied after bootstrap.css */
.footer {
height: 58px;
background: #ccc;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="container-fluid">
<div class="col-md-6 col-lg-6">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?" type="email">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form><!-- .form-horizontal -->
</div><!-- .col-6 -->
<div class="col-md-6 col-lg-6">
<div class="nav">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div><!-- .nav -->
</div><!-- .col-6 -->
</div><!-- .fluid container -->
</div><!-- .row -->
</div><!-- .container-->
</div><!-- .wrapper-->
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h1>Student</h1>
<h1>Business</h1>
</div>
</div>
</div><!-- .jumbotron -->
<div class="footer">
<div class="container-fluid">
<p>By:</p>
<p>For:</p>
</div>
</div><!-- .footer -->
To address part of your issue, try putting the sections you would like to be side-by-side in the same div.row, then wrap a div.col-xx-x around each. For example:
<div class="nav">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I'm really not sure why you're not using the <navbar> class. It's there and ready to accomplish exactly what you're looking for. See this Bootply for example:
Bootply - Navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Have Feedback?" type="text">
</div>
<button type="submit" class="btn btn-default">Submit Feedback</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
There is a way to do it like you have it, but I'm not sure how to get the <form> to align perfectly with the <nav> class, since there's padding on it and moves it down from the top a bit. You may need some custom CSS to handle that.
Bootply - Original
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<form class="form-horizontal">
<input class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?" type="email">
</form>
</div>
<div class="col-xs-2">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
<div class="col-xs-6">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div>
</div>
</div>
Give them both a look and see if either works for you.
Hope that helps!
I can't seem to get this site to format correctly (be "responsive" to mobile) when viewing with mobile devices.
I am using Bootstrap, but when I view from a mobile device, it just looks like a normal desktop is viewing it. Other sites I have done, it "zooms" in on the text and such to look nice on mobile.
I'm sorry if I'm missing something small here, but any help would be greatly appreciated!
Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE HERE</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div role="main">
<header>
<div class="container">
<div class="row address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row center">
<div class="span12">
<ul class="nav nav-pills menu">
<li>VIDEO</li>
<li>PHOTOS</li>
<li>WALKSCORE MAP</li>
</ul>
</div>
</div>
<div class="container">
<div class="row center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
</div>
<br/>
<div class="container">
<div class="row">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
</div>
<br/>
<div class="row center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<?=$user['email_address']?>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer>
</div>
</body>
</html>
It seems that you are only using span12 in all the rows, which means that they will never get segmented when the viewport changes. A large part of having a responsive grid layout is breaking the elements of a row into segments so that the row's layout can be adjusted if the viewport falls below certain thresholds.
If the primary <div> in every row is span12 all the content in the row will remain essentially width=100% and the content will only scale down as the viewport decreases.
I would suggest avoid using span12 for every primary <div> and spend some time reconsidering the granularity of the content. See the Twitter Bootstrap documentation on Scaffolding for reference.
Use this layout, i think it will solve your issue. I removed the row class.
TITLE HERE
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script> </head> <body> <div role="main">
<header>
<div class="container">
<div class="address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="center">
<div class="span12">
<ul class="nav nav-pills menu">
<li>VIDEO</li>
<li>PHOTOS</li>
<li>WALKSCORE MAP</li>
</ul>
</div>
</div>
<div class="container">
<div class="center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
<br/>
<div class="container">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
<br/>
<div class="center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<?=$user['email_address']?>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer> </div> </body> </html>