I'm trying to get this design out, but it just didn't work out. Where do I make mistakes? how can I do that? Can you please help me.
I couldn't write much as CSS. I haven't even gotten the footer part right in the Middle yet.
this is my codes:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<footer>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-2 footer-left ml-auto">
<p class="more-info-title">more info</p>
<ul class="footer-left-info ">
<li>about us</li>
<li>delivery info</li>
<li>FAQs</li>
<li>terms and conditions</li>
<li>privacy policy</li>
<li>rydale jobs</li>
<li>sitemap</li>
</ul>
</div>
<div class="col-lg-2 footer-center mx-auto">
dave smith
</div>
<div class="col-lg-2 footer-right mx-auto">
<p class="find-us-title">find us</p>
<ul class="footer-right-info">
<li>
<a href="#">
<i class="fas fa-map-marker-alt"></i> rydale stockists
</a>
</li>
<li>
<a href="#">
<i class="fas fa-phone-alt"></i> shows & events
</a>
</li>
<li>
<a href="#">
<i class="far fa-envelope"></i> 01377 337160
</a>
</li>
<li>
<a href="#">
<i class="fas fa-map-marker-alt"></i> contact us
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
Use the order-N to reorganize the columsn on smartphone, for example
<footer>
<div class="container">
<div class="row no-gutters">
<div class="col-6 col-lg-3 order-2 order-lg-1 text-center">
<p><br><br>LEFT<br><br></p>
</div>
<div class="col-12 col-lg-6 order-1 order-lg-1 text-center">
<p><br><br>MIDDLE<br><br></p>
</div>
<div class="col-6 col-lg-3 order-2 order-lg-1 text-center">
<p><br><br>RIGHT<br><br></p>
</div>
</div>
</div>
</footer>
Sorry to be a pain. I might have been staring at my code for way to long but I am trying to implement a Bootstrap Carousel into my website that will show 3 and then progress one. I am currently following the code sniper at: https://www.codeply.com/go/EIOtI7nkP8 but can only get it to show one and progress one at a time.
Any help would be most appreciated.
Many thanks,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="THE CARE COMPANY (SW) LTD, home care, care, care company, the, company, jobs, care jobs, TORBAY, DEVON, kingsbridge, totnes, plymouth, Care in Torbay , care Torbay, Care torquay, Torbay care , Care for eldery torbay, Torquay, the care company, home care services, home care medical, come care near me, home care elderly, home care agency, caregiver, home health care, respite care, home health aide, homecare, home care services, health, healthcare, assisted living, caregiver, respite care">
<meta name="description" content="Delivering professional home care & live-in care services. The Care Company provides bespoke respite care, dementia care, Alzheimer's care & much more." class="">
<title>The Care Company (SW) LTD</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles -->
<link href="css/grayscale.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<script>
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top" style="font-size: 1rem !IMPORTANT">The Care Company (SW) LTD</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Our Expertise
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">How Does Our Care Work</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Our CAREGivers</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Partnerships and professionals</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Our Care Options</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Home Care Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Companionship</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Home Help and Housekeeping</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Personal Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Dementia Care Including Alzheimer's desease</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Choosing The Right Care For You</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Advice and Support
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Cost Of Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">FAQ'S</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">How To Age Well</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Understanding And Preparing For Home Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Choosing The Right Care For You</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Nutrition</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Preventing Hospitalisation</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Community Involvement</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Alzheimers and Dementia Care</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Executive Profile</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Community Involvement</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Awards</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">What People Say About Us</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Why Choose The Care Company (SW) LTD</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Join Our Team
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">#YouCanCare</a>
</div>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">News & Events</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead v-header">
<div class="fullscreen-video-wrap">
<video src="video/vid.mp4" autoplay="yes" loop="yes">
</video>
</div>
<div class="header-overlay"></div>
<div class="header-content text-md-center container">
<h1 class="mx-auto my-0 text-uppercase" style="margin-bottom: 2px !IMPORTANT">Welcome To The Care Company (SW) LTD</h1>
<p style="color: white !IMPORTANT">Supporting Independence At Home</p>
<p>Our home care services not only provide you with the care you want, where and when you want it, we strive to keep you in control. It is your decisions, your life, your way.</p>
<h2 class="text-white-50 mx-auto mt-2 mb-5" style="color: white !IMPORTANT"></h2>
<p>Call on: 01548 521789</p>
<a href="#projects" class="btn btn-primary js-scroll-trigger" >Join Our Team</a>
Find Home Care
</div>
</header>
<!-- About Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="text-black mb-4">Supported at home the<img class="img-fluid mb-3 mb-lg-0" src="img/words/you.jpg" width="30%" alt="way you want"></h1>
<p class="text-black" >We understand that home is where you feel the happiest. If you want to stay living comfortably at home, you can live well, your way with The Care Company (SW) LTD.
<br><br>
Home Instead has been at the forefront of specialised home care for the elderly and supporting those being cared for and their families for many years. Founded on personal experience, these family values remain at the core of everything we do 24 years on.
<br><br>
Our award-winning care at home fits around your life - it’s tailored, it’s flexible and it’s adaptable. Whether you’re looking for help getting dressed and showered, help around the house or companionship, Home Instead’s trained CAREGivers are perfectly matched to you.
<br><br>
We believe age should be celebrated and that everybody should be able to live happily, comfortably and independently at home.
<br><br>
Start your Home Instead journey today.
<br><br><br>
Read More
</div>
</div>
<div class="row">
<div class="column">
<h1 class="text-black">Caring</h1>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”</p>
</div>
<div class="column">
<h1 class="text-black">Trustworthy</h1>
<br>
<p class="text-black">– We deliver a high standard of care, with integrity, through people who are passionate about what they do.
<br><br>
– “We are reliable, safe and diligent"</p>
</div>
<div class="column">
<h1 class="text-black">Positive</h1>
<br>
<p class="text-black">– We endeavour to encourage optimism and positive outcomes because we are enthusiastic about what we do.
<br><br>
– “We are pragmatic, tenacious, willing and conscientious”</p>
</div>
</div>
</div>
</section>
<!-- Looking For Staff Section -->
<section id="wjs" class="wjs-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<p class="text-black" style="font-size: 20px">
“ There is a real feeling of assurance that the person you love and care for is being taken care of in your absence. That’s what Home Instead does. My aunt hates to see her CAREGivers go. There are times she probably would like to see them more than me. ’’
<br><br>
Bon Jove - Clients Family
<br><br>
Read more client testimonials:
<br><br>
Testimonials
</div>
</div>
</div>
</section>
<!-- Why Join Us Section -->
<section id="about" class="about-section text-center">
<div class="container">
<h1 class="text-black mb-4">Services</h1>
<div class="row">
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/rcare.png" width="65%" alt="Respite Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/hcare.png" width="65%" alt="Hourly Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/ccare..png" width="65%" alt="Complex Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
</div>
<h3 class="text-black mb-4">To view all our services please click below:</h3>
All Services<br><br><br><br>
</div>
</section>
<!-- contact us Section -->
<section id="contactUs" class="signup-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<br><br>
<h2 class="text-black mb-5">Contact Us:</h2>
<p>You can either contact us via the form below or by post to: <br>The Care Company (SW) LTD, Little Spires, Totnes, Devon, TQ9 7QE <br> Tel: 01548 521789</p>
<form class="form-inline d-flex" action="contact_post.php"method="post">
<input type="test" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactFN" placeholder="Enter First Name *">
<input type="text" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactLN" placeholder="Enter Last Name *">
<input style="width: 100% !IMPORTANT; margin-top: 30px !IMPORTANT" type="text" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactCN" placeholder="Enter Subject">
<input type="email" style="margin-top: 30px !IMPORTANT" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactE" placeholder="Enter Contact Email Address *">
<input type="number" style="margin-top: 30px !IMPORTANT" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactN" placeholder="Enter Contact Number *">
<textarea style="width: 100% !IMPORTANT; margin-top: 30px !IMPORTANT" type="text" cols="40" rows="5" id="contactM" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactM" placeholder="Let us know how we can help"></textarea>
<br>
<p>By clicking submit I consent to The Care Company (SW) LTD using my data for marketing purposes. I have read and accept the Privacy Policy</p>
<button type="submit" style="margin-top: 20px !IMPORTANT" class="btn btn-primary mx-auto">Submit</button>
</form>
<br>
<br><br>
</div>
</div>
</div>
</section>
<!-- quick page Section -->
<!-- quick page Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="text-black mb-4">Awards & Affiliates</h1>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=1">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=2">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=3">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=4">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=5">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=6">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
</a>
</div>
<br><br>
</div>
</div>
</section>
<!-- Footer -->
<!-- Footer -->
<section id="contactUs" class="signup-section">
<footer class="page-footer font-small stylish-color-dark pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 mx-auto">
<!-- Content -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">News & Events</h5>
<div class="container">
<?php
$stmt = $db->query('SELECT postTitle, postSlug FROM blog_posts ORDER BY postID DESC LIMIT 5');
while($row = $stmt->fetch()){
echo '<p>'.$row['postTitle'].'</p>';
}
?>
</div>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Useful Links</h5>
<ul class="list-unstyled">
<li>
Home
</li>
<li>
News & Events
</li>
<li>
Franchise Opportunities
</li>
<li>
About Us
</li>
<li>
Admin Log-in
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Get Started</h5>
<ul class="list-unstyled">
<li>
Home Care Services
</li>
<li>
Book a Consultation
</li>
<li>
Meet the team
</li>
<li>
Jour our team
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Contact Us</h5>
<ul class="list-unstyled">
<li>
<p>The Care Company (SW) LTD
<br>
Little Spires
<br>
Totnes
<br>
Devon
<br>
TQ9 7QE</p>
</li>
<li>
<p>Tel: 01548 521789</p>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<hr>
<!-- Call to action -->
<ul class="list-unstyled list-inline text-center py-2">
<li class="list-inline-item">
</li>
<li class="list-inline-item">
<a href="#projects" class="btn btn-primary js-scroll-trigger" >Join Our Team</a>
Find Home Care
</li>
<hr style="margin-bottom: -30px !IMPORTANT">
</ul>
<!-- Call to action -->
</footer>
<!-- Footer -->
<footer class="bg-white small text-center text-black-50" style="background-color: #862d60 !IMPORTANT; color: white !IMPORTANT">
<div class="container">
<div class="col-md-12 col-xs-12" style=" margin-bottom: 20px !IMPORTANT">
<center>
Site Map | Privacy & Cookies | Terms & Conditions
</center>
</div>
<div class="social d-flex justify-content-center" style=" margin-bottom: 20px !IMPORTANT">
<a href="#" class="mx-2">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-instagram"></i>
</a>
</div>
Copyright © Your Website 2019
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</section>
</body>
</html>
Your script for the Carousel is using jQuery, but it's trying to run before jQuery is loaded by the page. In its current state you need to move the Carousel script to AFTER the jQuery loading.
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="grayscale.min.js"></script>
<script>
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
Now the jQuery functions correctly and it moving like you desire.
I downloaded the JS and CSS for grayscale and linked to the CDNs of the libraries to confirm this would work for you.
I Need help to move the navbar to the right side, since the row is not using all the width from the parent div (container).
Also I need to make the navbar resizable on smaller screens and when the button appears to show the hidden navbar, after click on it, displays the menu on right side (currently appearing on middle).
I have already tried to use the pl-5 ml-5 classes that bootstrap 4 provides to move the navbar, but it seems these classes don't solve the problem.
I have already checked that adding more content (text, links, li, etc.) inside those rows get bigger.
Current state of the website:
https://demos.posicionart.com/silleri/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light pb-0">
<div class="container">
<div class="row">
<div class="col-4 col-lg-4 ml-0">
<a class="navbar-brand" href="#">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</a>
</div>
<div class="col-8 col-lg-8">
<div class="row">
<p class="text-right navbar-header-footer">
<b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940 | <b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i> <i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS
</p>
</div>
<div class="row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
I Just want to move the navbar to the right and make it responsive, since this is the first time that I'm using a navbar like this and not the default one that bootstrap 4 provides.
we can not use same structure everywhere so just replace your above code with the following code
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12">
<ul class="top-navbar">
<li class=""><b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940</li>
<li class=""><b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i></li>
<li class=""><i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light pb-0">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
and CSS
.top-navbar {
list-style: none;
float: right;
}
.top-navbar li {
float: left;
}
There are many ways you can actually achieve this, I have added a class to the row and add css class as
.mobile-right {
justify-content: flex-end;
}
Here is the codepen link
https://codepen.io/sohebm/pen/MdxYQx
But I would suggest you, understand how Bootstrap grid layout works and responsive utilities
You could use the flex helpers provided by bootstrap especially justify-content-end to align the menu to the right and align-items-end to align the menu to the right in small screens as well as the ml-auto class to align the navbar toggler to the right.
See below :
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Silieri</title>
<meta name="description" content="Prueba Desc">
<meta name="keywords" content="Prueba, Prueba2">
<meta name="author" content="Posicionart">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://demos.posicionart.com/silleri/images/logosilieri.png">
<script src="https://demos.posicionart.com/silleri/js/landing/jquery-3.4.1.min.js"></script>
<script src="https://demos.posicionart.com/silleri/js/landing/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/webfonts/all.min.css">
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/styles.css">
</head>
<body><nav class="navbar navbar-expand-lg navbar-light bg-light pb-0">
<div class="container">
<div class="row">
<div class="col-4 col-lg-4 ml-0">
<a class="navbar-brand" href="#">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</a>
</div>
<div class="col-8 col-lg-8">
<div class="row">
<p class="text-right navbar-header-footer">
<b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940 | <b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i> <i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS
</p>
</div>
<div class="row">
<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav align-items-end">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav><section id="welcome">
<div class="jumbotron rounded-0 home-banner"></div>
</section>
<section id="main" class="container">
<div class="container">
<p class="main-title text-center">Podemos amueblar desde una oficina hasta <b class="welcome-title-header">UN CORPORATIVO</b></p>
<hr class="my-5 welcome-hr">
<p class="text-justify mb-5 welcome-message center-justified">
En Sileri nos especializamos en crear ambientes fucionales, cómodos y durables cuyo desarrollo va desde la planeación del proyecto hasta la entrega e instalación del mobiliario.
</p>
<div class="row">
<div class="col-md-4">
<img src="images/landing/banner-home-ambientes.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Ambientes">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Ver</b> Ambientes</h3>
<p class="text-justify welcome-text-card">¿Tienes un proyecto grande en mente? Visita nuestra selección de ambientes para inspirarte. VER MÁS</p>
</div>
</div>
</div>
<div class="col-md-4">
<img src="images/landing/banner-home-catalogo.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Cátalogo">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Ver</b> Catálogo</h3>
<p class="text-justify welcome-text-card">Encuentra piezas que funcionen, combinen y se adapten a tu proyecto y presupuesto. VER MÁS</p>
</div>
</div>
</div>
<div class="col-md-4">
<img src="images/landing/banner-home-asesoria.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Asesorías">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Solicita</b> Asesoría</h3>
<p class="text-justify welcome-text-card">Si no sabes cuándo es el momento ideal para renovar un área de trabajo, toma el test y contáctanos. VER MÁS</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="muebles" class="container">
<div class="container">
<div id="muebles-row" class="row pt-5 mt-5">
<div class="col-md-8 pr-0">
<h1 id="title-muebles" class="upper-letters main-title">Muebles Especiales</h1>
<hr class="muebles-hr">
<div class="container pl-0">
<p class="text-justify">Existen dentro de las empresas áreas que demandan soluciones específicas en cuestión de funcionalidad, diseño y estética; si necesitas una solución integral para tu proyecto, podemos ayudarte.</p>
</div>
<a id="btn-conoce-mas-1" class="mt-4 rounded-0 pl-5 pr-5 btn btn-dark upper-letters" href="#">Conoce <span class="primary-color">más</span></a>
</div>
<div class="col-md-4 pl-0">
<img src="images/landing/banner-home-muebles-especiales.jpg" class="muebles-image img-fluid" alt="Imagen Sección de Muebles">
<a id="btn-conoce-mas-2" class="mt-4 rounded-0 pl-5 pr-5 btn btn-dark upper-letters" href="#">Conoce <span class="primary-color">más</span></a>
</div>
</div>
</div>
</section>
<section id="testimonios" class="container">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-lg-10">
<img id="imagen-testimonios-1" class="mt-5 pt-5 testimonials-image img-fluid" src="images/landing/home-testimonio-am.png" alt="Imagen Sección Testimonios">
</div>
<div class="col-lg-2">
<div class="vr-testimonios"> </div>
</div>
</div>
</div>
<div class="col-md-8">
<br>
<div class="container">
<h1 id="title-testimonios" class="upper-letters main-title">Testimonios</h1>
<img id="imagen-testimonios-2" class="mt-5 pt-5 testimonials-image img-fluid" src="images/landing/home-testimonio-am.png" alt="Imagen Sección Testimonios">
<blockquote class="blockquote">
<p class="text-justify text-testimonials">Después de trabajar con ellos en el equipamento de nuestro comedor ejecutivo y de las salas de juntas del corporativo, recomiendo apliamente a Silieri Koncept por su experiencia, profesionalismo y entusiasmo en el proyecto.</p>
<b>
<footer class="blockquote-footer">
Director de compras, <cite title="Source Title">AM Consultores</cite>
</footer>
</b>
</blockquote>
</div>
</div>
</div>
</div>
</section><br>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li class="left">Proyectos</li>
<li class="left">Muebles Especiales</li>
<li class="left">Guía</li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li class="center">Catálogo</li>
<li class="center">Mesas y escritorios</li>
<li class="center">Sillas y sofás</li>
<li class="center">Recepciones</li>
<li class="center">Áreas de Guardado</li>
<li class="center">Escolares y Capacitación</li>
<li class="center">Muros Móviles</li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li>Contacto</li>
<li>
<p>
Oficina Matriz <br>
B. Quitana 208 <br>
Col. Carretas <br>
C.P 76050 <br>
Querétaro, Qro. MX.
</p>
</li>
<li>(442) 223 6825</li>
<li>(442) 183 0555</li>
<li>(442) 183 1940</li>
<br>
<li>
<p>
Oficina León <br>
(442) 432 0949
</p>
</li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<ul class="footer-icons pb-5">
<li id="li-icons" class="mr-3 ml-3"><i class="fab fa-facebook fa-3x"></i></li>
<li id="li-icons" class="mr-3 ml-3 pb-4"><i class="fab fa-whatsapp fa-3x"></i></li>
</ul>
<ul id="ul-brand" class="mt-4 pt-4">
<li class="upper-letters">Silieri Koncept</li>
<li>
<p>
Muebles de oficina <br>
& proyectos integrales
</p>
</li>
</ul>
</div>
</div>
</div>
<br><br><br><br>
<div class="second-footer">
<div class="container">
<div class="row">
<div class="col-3 col-md-3">
<img src="images/landing/silieri-logo-footer.png" class="d-inline-block align-top pt-2 pb-2" alt="Imagen Logo Footer Silieri">
</div>
<div class="col-9 col-md-9">
<p class="text-right mt-4 upper-letters">
2019 © Silieri Koncept. Todos los derechos reservados. Consulte nuestro aviso de privacidad
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
I'm new to the world of UI design. I'm trying to get a basic page up & running with bootstrap. What I'm after is the underlying reason for using bootstrap which is to scale the page & it's components depending on the device on which the web page is loaded. I'm failing just with this very requirement :)
Here's the code I'm trying to get working
<div class="container-fluid">
<div class="row-fluid ">
<div class="row row-eq-height ">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
<a id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1 " style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
</div>
<div class="col-xs6 col-sm-6 col-md-6 col-lg6 bg-primary">
<div class="page-header text-center" >
<p> <h2>BOOTSTRAP TRIAL </h2> </p>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
<h3> LOGGED IN</h3>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg- bg-primary text-right pull-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
</a>
<ul class="dropdown-menu">
<li>Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></li>
<li class="divider"></li>
<li>User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></li>
<li class="divider"></li>
<li>Messages <span class="badge pull-right blue"> 42 </span></li>
<li class="divider"></li>
<li>Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></li>
<li class="divider"></li>
<li>Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
This code doesn't re-size all the contents of the web page being loaded. I see just half the contents when I click on "restore" button of the browser.
A few questions
1) My understanding of bootstrap is that it is mobile first technology meaning, if we were to develop for small devices, then it could scale up to anything big. Please correct me if I've misunderstood this. Hence, Does one have to specify, -xs-, -md- & -lg- for all the elements in question to get the re-size working or is specifying -xs- enough? If not, which of these should I specify so that the scaling automatically happens across any device.
2) Is responsive web design only about handling content re-sizing?
I'd highly appreciate any help to get me moving here please.
Can you please check this code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="row row-eq-height">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
<a id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">
<div class="page-header text-center" >
<p> <h2>BOOTSTRAP TRIAL </h2> </p>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
<h3> LOGGED IN</h3>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary text-right pull-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
</a>
<ul class="dropdown-menu">
<li>Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></li>
<li class="divider"></li>
<li>User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></li>
<li class="divider"></li>
<li>Messages <span class="badge pull-right blue"> 42 </span></li>
<li class="divider"></li>
<li>Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></li>
<li class="divider"></li>
<li>Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I am creating a website using bootstrap3. I used an image as a background to a div but the image is not being displayed in correct ratio. The image being visible is displaying only a portion of it.
My code and css is as under:
<div class="jumbotron">
<div class="container">
<div class="col-md-12">
<div class="col-md-4">
<div id="show_div" class="dropdown">Menu
<span class="caret"></span>
<div id="hello" style="visibility:hidden;" >
<ul class="dropdown-menu" style="display:block!important;" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Our Services</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<p class="text-center"><a role="button" href="#" class="btn btn-default">Sign Up</a></p>
</div>
<div class="col-md-4">
<p class="text-right"><a role="button" href="#" >Sign Up</a></p>
</div>
</div>
<div class="col-md-12 clear-fix"> </div>
<div class="cover-container">
<div class="inner cover">
<h2 class="cover-heading">hello</h1>
<p class="lead">
<a class="btn btn-lg btn-default" href="#">Login</a>
</p>
</div>
</div>
<div class="col-md-12 clear-fix"> </div>
<div class="col-md-12 botomopdv">
<div class="col-md-4 ">
<div class="text-center textwrap">+91-9898976766</div>
</div>
<div class="col-md-4 ">
<div class="text-center textwrap"><img src="images/visa.png"></div>
</div>
<div class="col-md-4 ">
<div class="text-center textwrap">
<i class="fa fa-youtube fsz fa-inverse"></i>
<i class="fa fa-twitter-square fsz fa-inverse"></i>
<i class="fa fa-facebook-square fsz fa-inverse"></i>
<i class="fa fa-linkedin-square fsz fa-inverse"></i>
</div>
</div>
</div>
</div>
</div>
My css is like this:
.jumbotron{
background-image:url('../images/slide.png');
padding-bottom:1px!important;
}
If i understand your problem correctly, try adding background-size:cover:
.jumbotron{
background-image:url('../images/slide.png');
padding-bottom:1px!important;
background-size:cover; /**** add this line ****/
}
all your code is correct but you can experiment with background-size: 100% 100%; or background-size: cover;