I would like to show the right position div into the left position in the mobile view. I am using bootstrap 4. Below I am adding my HTML code. The right image should come first at in mobile view. Thanks In Advance.
<div class="card">
<div class="row no-gutters">
<div class="col-8">
<div class="card-block">
<h4 class="card-title">v</h4>
<p class="card-text">Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronic engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation, and
use of robots, as well as computer systems for their control, sensory feedback, and information processing.</p>
Explore <i class="fa fa-caret-right"></i>
</div>
</div>
<div class="col-4">
<img src="./images/product-development.jpg" class="img-fluid" alt="product-development">
</div>
</div>
</div>
Use the flex order utility classes...
<div class="card">
<div class="row no-gutters">
<div class="col-8 order-last order-sm-first">
<div class="card-block">
<h4 class="card-title">v</h4>
<p class="card-text">Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronic engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation,
and use of robots, as well as computer systems for their control, sensory feedback, and information processing.</p>
Explore <i class="fa fa-caret-right"></i>
</div>
</div>
<div class="col-4 order-first">
<img src="./images/product-development.jpg" class="img-fluid" alt="product-development">
</div>
</div>
</div>
<script src="http://codeply.com/js/embed.js"></script><div data-codeply="GW6MbfBVbA" ></div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="row no-gutters">
<div class="col-md-8 order-md-1 order-sm-12 order-12">
<div class="card-block">
<h4 class="card-title">v</h4>
<p class="card-text">Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronic engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation, and
use of robots, as well as computer systems for their control, sensory feedback, and information processing.</p>
Explore <i class="fa fa-caret-right"></i>
</div>
</div>
<div class="col-md-4 order-md-12 order-sm-1 order-1">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" class="img-fluid" alt="product-development" style="width: 100%;">
</div>
</div>
</div>
</body>
</html>
Related
I am completing a course from coursera on bootstrap and was following along with the course, but the toggle button on the navigation bar of one of the webpages isn't working and displays error in the console "Failed to load resource: the server responded with a status of 404 (Not Found)"
I have the same code in the index.html (home page) and the button seems to be working perfectly in that, but in the aboutus.html it won't open the collapsed navigation options
Here are the codes:
aboutus.html --> the one with the error
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion: About Us</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-header">
<ol class="col-12 breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">About Us</li>
</ol>
<div class="col-sm-6">
<h3>About Us</h3>
<hr>
</div>
</div>
<div class="row row-content">
<div class="col col-sm-6 order-sm-last col-md-6">
<h2>Our History</h2>
<p>Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.</p>
<p>The restaurant traces its humble beginnings to <em>The Frying Pan</em>, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.</p>
</div>
<div>
</div>
</div>
<div class="row row-content">
<div class="col-12 col-sm-12">
<h2>Corporate Leadership</h2>
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p>
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p>
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p>
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm-6 order-sm-last col-md">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm-6 col-md">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm-6 order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
I believe you're missing the script tags at the end of your aboutus page. Try adding these lines just before you close your body tag.
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
I'm trying to add the animation 'fadeIn' into my proje[enter link description here][1]ct but the animation doesn't work. I would appreciate it if anyone who has experience with animate.css will be able to help me out. I installed the CDN { from animate.css website into my project.
I added "animate__animated animate__fadeIn" into my class but it's not working.
Any help would be appreciated thank you.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>Omni Food</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="Resources/IMG/logo-white.png" alt="Omnifood logo" class="logo">
<img src="Resources/IMG/logo.png" alt="Omnifood logo" class="logo-black">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
</div>
</header>
<section class="section-features js--section-features" id="features">
<div class="row">
<h2>Get food fast — not fast food.</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row animate__animated animate__fadeIn">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
In the documentation of Animate.css says:
You can't animate inline elements. Even though some browsers can
animate inline elements, this goes against the CSS animation specs and
will break on some browsers or eventually cease to work. Always
animate block or inline-block level elements (grid and flex containers
and children are block-level elements too). You can set an element to
display: inline-block when animating an inline-level element.
Maybe, for some reason, the display of the element don't let to show the animation.
It would be helpful if we can check your project online, to get deeper.
Here is working code of animate.css. Its just working fine as you needed with fadeIn Effects.
Demo: https://jsfiddle.net/usmanmunir/2mbghper/7/
Refer to this documentation for more info: https://animate.style/
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>Omni Food</title>
</head>
<body>
<header>
<h1 class="animate__animated animate__fadeIn">An animated element</h1>
<nav>
<div class="row animate__animated animate__fadeIn">
<ul class="main-nav animate__fadeIn">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-text-box animate__animated animate__fadeIn">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
</div>
</header>
<section class="section-features js--section-features" id="features">
<div class="row animate__animated animate__fadeIn">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
I have a nice web page built up with cards but they simply dont seem to work when i paste it in the editor in the bootstrapemail editor which returns pure css code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vrindavan Chandrodaya Mandir</title>
<meta name="description" content="">
<meta name="author" content="LayoutIt!">
<!--Template based on URL below-->
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/starter-template/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<!-- <link href="css/Bootstrap.css" rel="stylesheet">-->
</head>
<body class="" style="background-color: azure">
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<div class="card-footer">Hare Krishna</div>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body></html>
I am using https://bootstrapemail.com/editor to get pure css to make some nice emails. Where am I going wrong? I know only bootstrap as my go to platform for designing.
I have gone through your code and with bootstrap email and I found that you missed some divs like container . You didn't mentioned
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> as they did.
//Here is a sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" href="/assets/application-mailer-dbc5154d3c4160e8fa7ef52fa740fa402760c39b5d22c8f6d64ad5999499d263.css" />
<style><!-- Add custom styles that you want inlined here --></style>
</head>
<body class="bg-light">
<preview>Thank you for riding with Lyft!</preview>
<div class="container">
<img class="mx-auto mt-4 mb-3" width="42" height="30" src="https://s3.amazonaws.com/lyft.zimride.com/images/emails/logo/v2/logo_44#2x.png" />
<div class="card mb-4" style="border-top: 5px solid #ff00bf;">
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<div class="card-footer">Hare Krishna</div>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>
</div>
</body></html>
//result
I am learning front end developement using html, css.
I want to create a menubar and above menu bar i need to add an image ( header image).
Problem is I am not getting the image which is added to my images folder.
and this is the html code...
Kindly help me with the issue.
enter code here
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
color:green;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="/images/spmhead.jpg" scale="0" width="100%">
</a>
</div>
</nav>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<a class="navbar-brand" href="#">Hello World Mentors </a>
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>Hell</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Android</h2>
<p>Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.</p>
</div>
<br>
<div class="col-md-6">
<h2>CSS</h2>
<p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
</div>
<div class="container">
<div class="col-md-6">
<h2>Java</h2>
<marquee direction="up" scrolldelay=250 vspace=20 hspace=20 bgcolor=grey><p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.</p> </marquee>
</div>
<div class="col-md-6">
<marquee direction="up">This text will scroll from bottom to up</marquee>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<script src="js/jquery.js"> </script>
<script src="js/bootstrap.min.js"> </script>
</body>
</html>
Refer the image tag with relative path .
<img src="./images/spmhead.jpg" scale="0" width="100%">
It must be <img src="images/spmhead.jpg" scale="0" width="100%">.
Finally, I got solution for the question I have posted above.
This is the code which worked for me.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
color:green;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<a href="#">
<img src="images/spmhead.jpg" class="img-responsive">
</a>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<a class="navbar-brand" href="#">Hello World Mentors </a>
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>Hell</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Android</h2>
<p>Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.</p>
</div>
<br>
<div class="col-md-6">
<h2>CSS</h2>
<p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
</div>
<div class="container">
<div class="col-md-6">
<h2>Java</h2>
<marquee direction="up" scrolldelay=250 vspace=20 hspace=20 bgcolor=grey><p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.</p> </marquee>
</div>
<div class="col-md-6">
<marquee direction="up">This text will scroll from bottom to up</marquee>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
<div class="jumbotron">
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</div>
</div>
<script src="js/jquery.js"> </script>
<script src="js/bootstrap.min.js"> </script>
</body>
</html>
My school offers a free website space for each student. I created a website with the following structure
- index.html
- main-site/
- css/
- bootstrap.css
- style.css
- img/
- js/
- help-docs/
- template/
When I visit the site on my home machine, everything loads fine and the css is applied to the pages.
I then upload the folder to the root of my website for the school. I replace the default index.html with mine and place the folders in the same structure as before. But the problem is that when I open the page from the new endpoint, the css is not applied. None of the images are loaded and the website just looks bare.
I've tried changing the permissions of the folders and files to make them accessible but this does not seem to work. I even changed everything to 777 and it does not make a difference.
I got one of my friends to try my website on his page and everything seems to be working well for him. So at this point I'm not sure what the problem is.
I should also add that the webserver is apache
So far, in my .htaccess file, I have the following:
DirectoryIndex website.html
I have also changed index.html to website.html and now accessing the website by using website.html rather than index.html still works fine apart from the inability to load css or js files.
Is this something that can be solved using a .htaccess file? If so, what could I add to it to make this work? Other solutions are welcome, although it should be noted that I do not have root access
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Light Wave Template | DesignBootstrap</title>
<!-- BOOTSTRAP CORE CSS -->
<link href="main-site/css/bootstrap.css" rel="stylesheet" />
<!-- CUSTOM CSS -->
<link href="main-site/css/style.css" rel="stylesheet" />
<!-- HTML5 Shiv and Respond.js for 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]-->
</head>
<body>
<!-- HEADER SECTION START-->
<section id="header">
<div class="container">
<div class="row text-center">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
<h1>Light Wave Template </h1>
<p>
<strong>6 Style </strong> Versions
</p>
<h4>Click on the image to see demos</h4>
</div>
</div>
</div>
</section>
<!-- HEADER SECTION END-->
<!-- PREVIEW SECTION START-->
<section id="preview">
<div class="container">
<div class="row text-center">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 ">
<h1>SEE DEMOS</h1>
<h3> See Document</h3>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/blue.html" target="_blank">
<img src="main-site/img/previews/1.png" class="img-responsive" alt="" />
<hr />
<p>
Blue Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/green.html" target="_blank">
<img src="main-site/img/previews/2.png" class="img-responsive" alt="" />
<hr />
<p>
Green Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/red.html" target="_blank">
<img src="main-site/img/previews/3.png" class="img-responsive" alt="" />
<hr />
<p>
Red Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/yellow.html" target="_blank">
<img src="main-site/img/previews/4.png" class="img-responsive" alt="" />
<hr />
<p>
Yellow Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/solid-black.html" target="_blank">
<img src="main-site/img/previews/5.png" class="img-responsive" alt="" />
<hr />
<p>
Black Background Version ( With solid background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/solid-red.html" target="_blank">
<img src="main-site/img/previews/6.png" class="img-responsive" alt="" />
<hr />
<p>
Green Background Version ( With solid background )
</p>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- PREVIEW SECTION END-->
<!-- YES SECTION START-->
<section id="yes">
<div class="overlay">
<div class="container">
<div class="row text-center">
<div class="col-lg-12 col-md-12">
<span class="text-yes">Yes , You heard right !
<br />
its'free and with documentation</span>
</div>
</div>
</div>
</div>
</section>
<!-- YES SECTION END-->
<!-- BOTTOM SECTION START-->
<section id="bottom">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h3>Want Some More ?</h3>
<h4>EXPLORE : DesignBootstrap.com</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-12 ">
</div>
</div>
</div>
</section>
<!-- BOTTOM SECTION END-->
<!-- FOOTER SECTION START-->
<footer>
<div class="container">
<div class="row text-center">
<div class="col-md-12">
© 2015 DesignBootstrap.com
</div>
</div>
</div>
</footer>
<!-- FOOTER SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY SCRIPTS -->
<script src="main-site/js/jquery-1.11.1.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="main-site/js/bootstrap.js"></script>
</body>
</html>
Try creating a new directory outside of main-site and moving the files to that directory. This may fix the problem that you are experiencing.
Sounds like there may be a problem with file or directory ownership, but without being able to see it, I'm not exactly sure.
In addition to Brandon's answer, I found that the actual issue was that the directories I had copied over did not have the right permissions associated with them. After creating a temporary directory, I noticed that the folder had the permission 755
ls -ld tempdir
drwxr-xr-x 2 aaa111 student 4096 Feb 21 18:34 tempdir
Whereas the other folders had only permission 700
To fix, this I ran this command:
find main-site template help-docs -type d | xargs chmod 755
And now everything works well