I don't know if the point of bootstrap is for this sort of form ,but is it possible for the page to take up the WHOLE area of the page and not the center?
and if not then that I could atleast put an imageon the whole page?(sorry if I don't make much sense).So yea Any help is heavily appreciated!
Html:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">CompanyName</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">Products</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Product 1</a>
<a class="dropdown-item" href="#">Product 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Product 1</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide p-3" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/painter.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/sydney.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/thing.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
Another link
</div>
</div>
</div>
<div class="col">
<div class="card ">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
Another link
</div>
</div>
</div>
<div class="col">
<div class="card ">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
Another link
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
Another link
</div>
</div>
</div>
</div>
<div class="row mt-sm-4 mt-md-0">
<div class="col-sm-12 col-md-8 text-sm-center text-md-left">
<h3>Important heading</h3>
<p class="lead">A sort of important subheading can go here, which is larger and gray.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis lorem ac diam vestibulum, vitae tempor nulla aliquam. Nam in accumsan libero, et tempus nisi. Vivamus luctus turpis efficitur, vehicula tortor sed, lacinia nunc. Suspendisse eu hendrerit est. Donec placerat placerat facilisis. Sed interdum vitae metus et efficitur. Fusce pretium sed enim eget maximus. </p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis lorem ac diam vestibulum, vitae tempor nulla aliquam. Nam in accumsan libero, et tempus nisi. Vivamus luctus turpis efficitur, vehicula tortor sed, lacinia nunc. Suspendisse eu hendrerit est. Donec placerat placerat facilisis. Sed interdum vitae metus et efficitur. Fusce pretium sed enim eget maximus. </p>
</div>
<div class="footer sm-12 text-sm-center bg-secondary">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis lorem ac diam vestibulum, vitae tempor nulla aliquam. Nam in accumsan libero, et tempus nisi. Vivamus luctus turpis efficitur, vehicula tortor sed, lacinia nunc. Suspendisse eu hendrerit est. Donec placerat placerat facilisis. Sed interdum vitae metus et efficitur. Fusce pretium sed enim eget maximus. </p>
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"><`enter code here`/script>
<script src="/js/bootstrap.min.js"></script>
</body>`enter code here`
</html>
As mentioned in the docs:
Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
A container div with the class container will be:
fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
while a container with the class container-fluid:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
So you should change your first div class from container to container-fluid.
Related
I'm using Bootstrap 4.4 to create a card column:
<!DOCTYPE html>
<html>
<head>
<title>Problems using Card-img-overlay with card-columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card-columns" style="padding-top: 2%;">
<div class="card">
<img class="card-img" src="https://source.unsplash.com/user/erondu/1920x1080" style="opacity: 65%;">
<div class="card-img-overlay">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-danger text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-primary text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-primary" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="">Link 3</a>
</li>
</ul>
</div>
<div class="card-body">
<h4>Título do cartão</h4>
<h6>Subtítulo do cartão</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-danger btn-block" href="">Leia mais</a>
</div>
</div>
<div class="card bg-success text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-success" href="">Leia mais</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The problem is with the card I use Card-img-overlay. When the screen has a higher resolution, the display occurs as expected:
When the screen is smaller:
Part of the meat and its contents are omitted. I tried padding top but it doesn't work properly.
Besides, I can't seem to make the image fit. I tried for a vertically larger image but all I can get is that the card occupies the space corresponding to the height of the image.
How do I prevent the content from being overlaid by another card? and so that the image occupies all the space of the card always?
It is because the parent div element of card-img-overlay is not set to relative and has no fixed height. Set a minimum height for the parent div element (which is .card) so that it will not shrink when the viewport gets smaller.
.card {
min-height: 300px;
position: relative;
}
https://jsfiddle.net/svwb6r31/
I think bootstrap way to impliment this idea is not the best one. Element with position: absolute is taking out of DOM and can't be fit with it's content.
I suggest to replace .card-img-overlay with .card-body and instead of <img> make div with image as it's background and parametrs as in snippet.
.bg-img {
opacity: 65%;
background: no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(https://source.unsplash.com/user/erondu/1920x1080);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg-img + .card-body {
position: relative;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<title>Problems using Card-img-overlay with card-columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card-columns" style="padding-top: 2%;">
<div class="card">
<div class="bg-img"></div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-danger text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-primary text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-primary" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="">Link 3</a>
</li>
</ul>
</div>
<div class="card-body">
<h4>Título do cartão</h4>
<h6>Subtítulo do cartão</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-danger btn-block" href="">Leia mais</a>
</div>
</div>
<div class="card bg-success text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-success" href="">Leia mais</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I'm using Bootstrap 4 and I'm trying to build a website for a client but I can't seem to get the grid to behave/expand as I want it to.
Here's a rough sketch of what I'm trying to achieve.
Desktop Layout Sketch:
Mobile Layout Sketch:
Here's a code snippet that I currently have that works on Desktop sizes but completly breaks down when the size goes mobile.
<div class="container">
<div class="row">
<div class="col-sm">
<h1 class="main-cap">Your Caption. Goes Here.</h1>
<div class="d-flex main-desc flex-grow-0">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus in nisl
tempor, porttitor quam eu, lacinia nibh. Etiam
interdum est magna, vel ullamcorper arcu
dignissim sit amet. Nullam commodo elementum
felis, id congue dui facilisis sit amet. </div>
</div>
<div class="col-sm hidden-xs">
<img src="assets/vectors/graphic.svg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 style="padding-left: 30px;">
<button type="button" class="learn-more btn btn-outline-primary btn-block btn-lg">
Learn more
<i class="material-icons arrow-right">keyboard_arrow_right</i>
</button>
</div>
</div>
<div class="row">
<div class="socials col-xs-6"></div>
<div class="email-form col-xs-6"></div>
</div>
Any help is appreciated.
Thanks.
Your code had tags and double quotes missing... to get the effect you want, you'd have to insert (either "the image" or "the description & buttons") twice and toggle it at the appropriate breakpoint...
code snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<h1 class="main-cap">Your Caption. Goes Here.</h1>
<div class="col-12 col-md-6 d-block d-sm-block d-md-none" style='border:1px solid pink'>
<img src="https://www.akberiqbal.com/Jumbo.jpg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
<div class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in nisl tempor, porttitor quam eu, lacinia nibh. Etiam interdum est magna, vel ullamcorper arcu dignissim sit amet. Nullam commodo elementum felis, id congue dui facilisis sit amet.
</div>
<button type="button" class="learn-more btn btn-primary ">
Learn more
<i class="material-icons arrow-right">keyboard_arrow_right</i>
</button>
</div>
<div class="col-12 col-md-6 d-none d-sm-none d-md-block" style='border:1px solid red'>
<img src="https://www.akberiqbal.com/Jumbo.jpg" class="img-fluid graphic-50px" alt="Engineering Graphic">
</div>
</div>
</div>
I have a carousel created using Bootstrap. But when I resize the window (decrease size), everything works responsive (header text, description and button of carousel) but its height is not changing (where I need to decrease height when I'm reducing the browser window).
I need to reduce the carousel height GRADUALLY and PERFECTLY (maybe giving height as a percentage?) when I'm reducing the browser window. Not like suddenly reducing throughout the given breaking points (577px to 1024px), but reducing height smoothly.
This is the html code for carousel
<!--Carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="images/A.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-left">
<h1>Example headline.</h1>
<p id="carousel-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a id="carousel-btn" class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="images/B.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a id="carousel-btn" class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="images/C.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a id="carousel-btn" class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="images/D.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-left">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a id="carousel-btn" class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="images/E.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a id="carousel-btn" class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="images/F.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a id="carousel-btn" class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="images/G.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-left">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a id="carousel-btn" class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon fa fa-chevron-left fa-2x" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon fa fa-chevron-right fa-2x" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--End of carousel-->
This is the css I'm using for media queries:
#media only screen and (max-width: 1024px) and (min-width: 577px) {
.carousel-inner, #myCarousel {
height: 50% !important;
}
}
So I don't know what the best practice would be to solve my problem. I'm making a webpage with a large edge-to edge carousel that sits below the navbar and looks great on desktops with a 1:3 ratio image size. On mobile, it looks too small and thin so I made a new set of images with a 2:3 ratio size I want to display on smaller screens in my carousel.
How should I go about doing this? Javascript to change the images on different sizes? Hidden columns for the carousel on different port sizes with one for mobile and one for desktop? I just need to know the way that makes most sense/best practices to solve this problem.
My carousel HTML for point of reference:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<!--<li data-target="#myCarousel" data-slide-to="3"></li> optional -->
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="img/carousel/carousel1.jpg" alt="First slide">
</div>
<div class="item">
<img class="second-slide" src="img/carousel/carousel2.jpg" alt="Second slide">
</div>
<div class="item">
<img class="third-slide" src="img/carousel/carousel3.jpg" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Here's a possible solution using #MediaQueries.
You create two different carousels in the HTML and define which one to display using media queries. You can customize the CSS for each carousel individually to get the sizing correct.
Bootply Example - Change the width of the window to below / above 1000px to see it update.
HTML
<div class="container">
<div class="span8">
<div id="myCarousel" class="carousel slide wide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item active">
<img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<div id="myCarouselNarrow" class="carousel slide narrow">
<ol class="carousel-indicators">
<li data-target="#myCarouselNarrow" data-slide-to="0" class=""></li>
<li data-target="#myCarouselNarrow" data-slide-to="1" class="active"></li>
<li data-target="#myCarouselNarrow" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item active">
<img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarouselNarrow" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarouselNarrow" data-slide="next">›</a>
</div>
</div>
</div>
CSS
.wide {
width: 600px;
}
.narrow {
width: 480px;
display: none;
}
#media (max-width: 1200px) {
.wide {
display: none;
}
.narrow {
display: block;
}
}
I just add navbar and then at the bottom of this add carousel like this in the screen:
http://imageshack.us/photo/my-images/833/zrzutekranu2h.png/
In twitter bootstrap css I nothing changed. How I can delete this space?
this is my index.html code
<!-- NavBar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/examples/slide-01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
<div class="item">
<img src="assets/img/examples/slide-02.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="assets/img/examples/slide-03.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<div class="container">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
<!-- Le javascript
By default the navbar would fall over the content of the page because of navbar-fixed-top. You're actually setting a padding-top for the body to prevent this. That padding needs to be set to 40px. It's probably set to more than that now.
Again, this padding is set in your CSS or HTML, not in bootstrap itself.