I want to achieve this :
I want to place the icons in this order, but I don't know how, I tried with padding but it doesn't work, could you help me please?
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="res/css/style.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,400,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<title>Loopie's Workshop</title>
</head>
<body>
<div class="content">
<h1>Loopie's workshop</h1>
</div>
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="#">
<img src="images/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="images/img_2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="images/img_3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="images/img_4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="images/img_5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>
<h1 style="font-size:30px"; align="center">Game and web developer</h1>
</body>
</html>
html:
<img src="facebook.png" class="imgclass">
<img src="gplus.png" class="imgclass">
<img src="twitter.png" class="imgclass">
css:
.imgclass {
float: left
}
this should do it
Something along those lines should work:
<div style="text-align: center; margin: 20px;">
<img src="YouTube.png" class="Icon">
<img src="Steam.png" class="Icon">
<img src="FaceBook.png" class="Icon">
</div>
.Icon
{
display: inline-block;
vertical-align: top;
/* Add here padding and other styling */
}
Edited to add div container
Related
I'm working with HTML, CSS and Bootstrap4. I need a navbar that should be fixed when I scroll. I did everything but after a little scroll, the navbar again won't fixed. I wonder if there is any way to solve this problem with bootstrap but if you can't, just tell me what to do with Css. Thanks
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand"/>
<meta name="description" content="H&M clothing shop"/>
<meta name="author" content="Ali Bolouki"/>
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg"/>
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital#1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app"/>
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app"/>
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo"/>
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon"/>
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon"/>
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-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 mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon"/>
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
</main>
<!--Bootstrap4-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
Please run my code and scroll down to see what I'm trying to say.
The body and html height shouldn't be 100%. It looks like that is issue causing the sticky nav to only stick for part of the page. I added a border and some extra space to demonstrate how your sticky div alternates between position: relative and position: fixed depending on the scroll position in the body:
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
border: 2px solid red;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
<meta name="description" content="H&M clothing shop" />
<meta name="author" content="Ali Bolouki" />
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg" />
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital#1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-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 mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</main>
<!--Bootstrap4-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
To solve this, simply remove the height value:
body, html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
}
According to w3schools, sticky is defined as:
The element is positioned based on the user's scroll position A sticky
element toggles between relative and fixed, depending on the scroll
position. It is positioned relative until a given offset position is
met in the viewport - then it "sticks" in place (like position:fixed).
Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from
version 6.1 with a -webkit- prefix.
CSS Position Property
Full code snippet with the border and extra space to demonstrate the result:
body,
html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
border: 2px solid red;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
<meta name="description" content="H&M clothing shop" />
<meta name="author" content="Ali Bolouki" />
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg" />
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital#1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-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 mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</main>
<!--Bootstrap4-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
I just started learning Bootstrap. Now I'm trying to replicate an old design which I've made using tables. Below the design I want to get
But unfortunately my Bootstrap skill kills me at this
The D rows [D1, D2] are not aligned, which I want. Below the code I've used [taken from examples of Bootstrap]
<!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="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Jumbotron Template ยท Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.2/examples/jumbotron/jumbotron.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/sticky-footer-navbar.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</li>
</ul>
<div class="alert alert-success">
<strong>A</strong>
</div>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">B</h1>
<p>This is a template </p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-4"> <div class="alert alert-success"> C</div>
</div>
<div class="col-md-8">
<div class="alert alert-warning"> D1</div>
</div>
<div class="col-md-8">
<div class="alert alert-warning"> D2</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">E</span>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"><\/script>')</script><script src="https://getbootstrap.com/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
</html>
This...
<div class="row mb-2">
<div class="col-md-4">
<div class="alert alert-success"> C</div>
</div>
<div class="col-md-8">
<div class="alert alert-warning"> D1</div>
</div>
<div class="col-md-8">
<div class="alert alert-warning"> D2</div>
</div>
</div>
...has to be:
<div class="row mb-2">
<div class="col-md-4">
<div class="alert alert-success"> C</div>
</div>
<div class="col-md-8">
<div class="row mb-2">
<div class="col-12">
<div class="alert alert-warning"> D1</div>
</div>
</div>
<div class="row mb-2">
<div class="col-12">
<div class="alert alert-warning"> D2</div>
</div>
</div>
<div class="row mb-2">
<div class="col-12">
<div class="alert alert-warning"> etc...</div>
</div>
</div>
</div>
</div>
The correct layout is:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<section class="jumbotron">
<div class="container">
jumbotron
</div>
</section>
<div class="container">
<div class="row">
<div class="col-md-4">
left column
</div>
<div class="col-md-8">
<div class="row">
<div class="col-12">content 1</div>
<div class="col-12">content 2</div>
</div>
<div class="row">
<div class="col-6">content 3.1</div>
<div class="col-6">content 3.2</div>
</div>
<div class="row">
<div class="col-md-4">content 4.1</div>
<div class="col-md-8">content 4.2 (5 below md)</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="row">
<div class="col-12">
footer content...
</div>
</div>
</div>
</footer>
<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.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>
I'd like to achieve the following result:
Requirements:
Image should be responsive
Fixed-top navbar has to stay
No vertical scrolling
Footer has to stay, too (preferably on the bottom)
I spent the whole day trying to figure out it without results.
I tried this approach:
https://codepen.io/Codewife_101/pen/rpvdPq
but 'align-self-center' caused the vertical scrolling in my website.
It doesn't look good, in particular on mobile devices.
I VERSION:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Red Logo Website</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<!--Material Design Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!--adding Roboto different styles-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<div class="container">
<img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="">Brand Name</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 1. JUMBOTRON -->
<section id="showcase">
<div class="container h-100">
<div class="row h-100 justify-content-center align-self-center">
<img src="img/red_logo.svg" class="img-fluid" alt="Red logo">
</div>
</div>
</section>
<!--FOOTER-->
<footer id="main-footer" class="text-center">
<div class="container">
<div class="row">
<div class="col">
<p class="text-muted">Copyright © 2017 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"> RedDesign LLC</p>
</div>
</div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I also tried this approach:
https://codepen.io/Codewife_101/pen/eyVxre
II VERSION:
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<div class="container">
<img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="">Brand Name</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 1. JUMBOTRON -->
<section id="showcase">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<img src="https://s3-us-west-1.amazonaws.com/all-images-public/red_logo.svg" class="img-fluid" alt="Red logo">
</div>
</div>
</section>
<!--FOOTER-->
<footer id="main-footer" class="text-center">
<div class="container">
<div class="row">
<div class="col">
<p class="text-muted">Copyright © 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"> RedDesign LLC</p>
</div>
</div>
</footer>
It doesn't center vertically. I'm open to any suggestions/solutions.
Anyone? I would be very grateful for any tips.
At first glance, my question looks like a duplicate, but when you look deeper, you'll see my situation varies. Besides, my reputation is too low to write comments on somebody else's question.
use CSS
css property position:fixed then
your header
div id = "NAVBAR"
and your footer too
div id = "FOOTER"
In your css:
#NAVBAR{
bottom:0
}
#FOOTER{
top:0
}
you must set the height off the body accoding to you screen resolution for you to not have an scrolling effect.
Please try this, it revolves around dynamic height thanks to calc and vh(viewport height)
nav, footer{
max-height: 50px;
}
body,html, section{
height: 100%;
}
section{
display: flex !important;
justify-content: center;
align-items: center;
}
section img{
object-fit: contain;
height: calc(100vh - 150px) !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav nav">
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
</ul>
</nav>
<section>
<img src="http://www.tandemconstruction.com/sites/default/files/styles/project_slider_main/public/images/project-images/IMG-Residence-1_0.jpg" alt="" class="img-fluid">
</section>
<footer class="navbar navbar-default navbar-fixed-bottom text-center">
<p class="text-muted navbar-brand">Copyright © 2018 RedDesign LLC</p>
</footer>
I fixed your code. Below is the working version.
The problem was a simple beginner mistake: You had the image in a row but not in a column. Bootstrap rows and columns are designed to work together. So, whenever you create a .row you must create at least one .col inside that row. That usually fixes all of the problems.
Here's the working version of your code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<div class="container">
<img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="">Brand Name</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 1. JUMBOTRON -->
<section id="showcase">
<div class="container" style="height: 100vh;">
<div class="row h-100">
<div class="col align-self-center">
<img src="https://picsum.photos/440/" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer id="main-footer" class="text-center fixed-bottom">
<div class="container">
<div class="row">
<div class="col">
<p class="text-muted">Copyright © 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="logo"> RedDesign LLC</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
I have some experience with bootstrap and I want to create image slider by using:
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
https://startbootstrap.com/template-overviews/business-casual/
Everything is fine with the examples. The problem arise if I want to use different sized images:
width is OK
height is changing depending to the image.
I found many similar topics but none of them worked for me.
Is it possible to have fixed ratio - nevertheless of the photo size? Image streching or even "croping" the image only by using css?
Code
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<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>
</div>
</body>
</html>
For some websites I had to make a trick for this kind of issue.
I just remove the img tags, and set it to the item background.
Bootply : http://www.bootply.com/AVNXeL4Jtw
HTML:
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url(//placehold.it/1024x700) ">
</div>
<div class="item" style="background-image: url(//placehold.it/100x100) ">
</div>
<div class="item" style="background-image: url(//placehold.it/1024x700) ">
</div>
<div class="item" style="background-image: url(//placehold.it/200x200) ">
</div>
</div>
CSS:
.carousel-inner .item{
height:500px;
background-size:cover;
background-position: center center;
}
Why span5 not going to the right position? Span5 is go to under Span6.I'm linked to bootstrap
My code:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
Use display: inline-block.
.span6, .span5 {
display: inline-block;
vertical-align: top;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="http://dummyimage.com/40/" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
From your snippet, it's hard to advise you're best option. Although one 'simple' styling would be to add float:right to your css like so:
.span5{
float:right;
}
The Demo below shows this in action:
.span5{
float:right;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
you could also use the display options, like below (aligning logo next to links):
div{
display:inline-block;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>