I am using bootstrap 4 and trying to make a component. The component has two tiles. Each tile consists of an icon image on left and on the right, there is a hyperlink. The desktop should show the tiles horizontally and vertically centered. As soon as the desktop changes to mobile, the image icon should stack over the link and vertically centered.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Service Header Example</title>
<style type="text/css">
.service-header-tile{
max-width: 397px;
height:60px;
}
.leftContent{
float: left;
width: 20%;
clear:both;
}
.rightContent{
float: left;width: 61%;height: auto;
}
#media only screen and (max-width: 767px){
.leftContent{
width:100%;
height:auto;
float:none;
clear: both;
text-align: center;
}
.rightContent{
clear:both;
width:auto;
height:auto;
}
}
</style>
</head>
<body>
<div class="container" style="background-color:#41173F">
<div class="row">
<div class="col-4 col-md-4">
<div class="service-header-tile containeer">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
<img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit "/>
</picture>
</div>
<div class="rightContent">
Play Virtual Applications
</div>
</div>
</div>
<div class="col-4 col-md-4">
<div class="service-header-tile container">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
<img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit "/>
</picture>
</div>
<div class="rightContent">
Play Virtual Applications
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Though I am finding the following issues
I am not sure, how to vertically center the image on the text in mobile mode?
service-header-tile, is not acting as a parent of leFtContent and rightContent. When inspect the element, this div does not seem to have any width or height. What am I doing wrong?
Suggestions to improve the code
Thanks,
Bee
I am not sure, how to vertically center the image on the text in
mobile mode?
you probably want center the image horizontally over the text. Use .text-center class on the parent element of the image or use flexbox utility classes provided by bootstrap such as .justify-content-center
service-header-tile, is not acting as a parent of leFtContent and
rightContent. When inspect the element, this div does not seem to have
any width or height. What am I doing wrong?
It is a parent element and it has fixed height of 60px that you have defined in the internal css. You need to remove that otherwise child elements will overflow the .service-header-tile element.
Suggestions to improve the code
remove internal css, use external css file if you want to override the styles provided by bootstrap.
remove all the css you have written because its not needed for what you are trying to achieve. Bootstrap has all the classes you need to achieve the desired layout.
use flexbox utility classes provided by bootstrap to align items properly. You can find these classes here
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background: #41173F;">
<div class="row">
<div class="col-4 col-md-4">
<div class="service-header-tile text-center d-flex flex-column flex-md-row align-items-center">
<div class="leftContent mr-md-3">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
<img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit " />
</picture>
</div>
<div class="rightContent pb-2">
Play Virtual Applications
</div>
</div>
</div>
<div class="col-4 col-md-4">
<div class="service-header-tile text-center d-flex flex-column flex-md-row align-items-center">
<div class="leftContent mr-md-3">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
<img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit " />
</picture>
</div>
<div class="rightContent pb-2">
Play Virtual Applications
</div>
</div>
</div>
</div>
</div>
I suggest you use flex, which was introduced in CSS 3.
I have made a quick fiddle here: https://jsfiddle.net/hkx2od3z/
You can put in a media query to change flex-direction between column and row.
You can play around with other properties here: https://yoksel.github.io/flex-cheatsheet/
You can try bootstrap 4 "d-flex", "align-items-center" and "justify-content-center" classes.
Bootstrap 4 d-flex
Related
Somehow i cant figure that out.
Hello everyone.
Ive got a simple frontend with a navbar and 2 Cols underneath.
left col got fixed size of 80px, and the right one got an image inside (so this image is fluid / responsive).
To add an input field over the image isnt the problem at all, but here comes my blockade.
I cant get the inputfield to be responsive to the size of the image.
So my thoughts was, to get the scale of the image and downscale the input.
something like this in JS
$(window).resize(function() {
// 1192 is the original imagewidth
let scale = $(".step:visible").width() / 1192;
let inputposition = document.getElementById(testid);
inputposition .css('transform', 'scale(' + scale + ')');
inputposition .css('transform-origin', 'top left');
});
now i thought about transform: scale(scale); on but this downscales the image too.
maybe someone of you can give me some food for thoughts.
So my goal is, that the inputfield minimizes as well reposition if the window resizes.
heres the sample code im workin with:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
<script src="assets/js/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg bg-danger clean-navbar">
<div class="container"><a class="navbar-brand logo" >Test</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
</ul>
</div>
</div>
</nav>
<main class="page landing-page">
<section class="clean-block clean-info dark" style="padding: 0px;">
<div class="container" style="">
<div class="row align-items-start" style="">
<div id="sidebar" class="col-1 d-md-flex flex-grow-0 flex-shrink-0 bg-danger active" style="max-width: 80px;min-width: 80px;height: 100%;padding:0px">
<ul class="list-unstyled components" style="padding:0px">
<li class="active" id="page1_li" style="position: relative; padding: 10px;">
<a onclick="function(this);" id="page1">
<img src="thumb_page1.jpg" class="img-fluid" alt="Responsive image" style="width:100%">
<div class="overlay">
<i id="overlay_page<?= $i ?>" class=""></i>
</div>
</a>
</li>
</ul>
</div>
<div class="col text-center bg-primary" style="padding: 0px;">
<form class="form-horizontal form" action="submit.php" method="post">
<div class="step " id="page1">
<div class="fullpage" style="" data-fullpage="fullpage">
<img class="img-thumbnail align-items-center" src="page1.jpg" alt="" draggable="false" contenteditable="false">
<!-- input that needs to be scaled -->
<input type="textarea" id="testid" name="testid" value="" style="position:absolute;left:100px;top:150px;width:300px;height:100px">
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
With best regards.
This is really simple. Don't add position:absolute to <input> but use <div> for that.
You need a <div> with position:relative as container. Add image with classes w-100 d-block to make it responsive. Create a <div> overlay and place content inside. <input> and <textarea> with class .form-control will have width:100% by default.
/*DEMO*/body{padding:3rem}
#overlay{
position:absolute;
top:50%;
right:3rem;
left:3rem;
transform:translateY(-50%);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="position-relative">
<img class="w-100 d-block" src="https://via.placeholder.com/400x300/007bff/ffffff" alt="">
<div id="overlay">
<input class="form-control" placeholder="Lorem Ipsum">
<hr>
<textarea class="form-control" placeholder="Lorem Ipsum"></textarea>
</div>
</div>
Here is a the jsFiddle link to my SSCCE, but the gist of my code is below. I'm using Twitter Bootstrap 4.0 to make a simple page:
<!DOCTYPE HTML>
<html>
<head>
<title>FooBar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<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/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
<div class="col-lg-12 col-sm-12 well-lg">
<img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
</div>
<div class="col-lg-12 col-sm-12 well-lg">
<h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
</div>
<div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
<strong>Oops!</strong> Something went wrong!
</div>
<div class="col-lg-12 col-sm-12 well-lg">
<button type="button" class="btn btn-primary btn-lg">Sign In</button>
</div>
<div class="col-lg-12 col-sm-12 well-lg"> </div>
</div>
</body>
</html>
As you can see in the jsFiddle, there are several glaring issues:
The image is way too big; and
The h1 title under the image is way too small; and
Both the image + title aren't horizontally centered on a large screen/viewport
I'm trying to tune either the bootstrap classes or the CSS stylings directly so that:
The image and title are always perfectly centered
On a larger screen (desktop/laptop browser), the image only takes up maybe 20% height + width of the screen
On a smaller screen (mobile), the image takes up most of the width of the screen, maybe with a few % of padding on both sides
In all cases, the h1 title does its best to resize the text so that its width is more or less the same width of the image
Can anyone see where I'm going awry?
Here is an example of what you might do. Obviously the details of the styles are up to you to match your exact preference.
.well-lg img{
width:20%;
}
body{
display:flex;
justify-content:center;
}
#media screen and (max-width:468px){
.well-lg img{
width:80%;
}
.well-lg h1{
font-size:4em !important;
}
}
<!DOCTYPE HTML>
<html>
<head>
<title>FooBar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<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/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
<div class="col-lg-12 col-sm-12 well-lg">
<img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
</div>
<div class="col-lg-12 col-sm-12 well-lg">
<h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
</div>
<div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
<strong>Oops!</strong> Something went wrong!
</div>
<div class="col-lg-12 col-sm-12 well-lg">
<button type="button" class="btn btn-primary btn-lg">Sign In</button>
</div>
<div class="col-lg-12 col-sm-12 well-lg"> </div>
</div>
</body>
</html>
Me and my friend are building a website to show menus of certain restaurants around our campus. We're trying to make a one page website. There are two main divs on the page. One of them show the restaurants list and the other one is supposed to show the menu of the selected restaurant from the restaurants list.
There are too many questions about this on the web and we've tried countless of fiddles but we couldn't manage to get them working. Last 2 fiddles we've tried are the following:
> https://jsfiddle.net/VpkKn/387/
> https://jsfiddle.net/n53qg/
Our page is: http://178.62.254.14/test/
Can you guide us how to correctly use these fiddles? We've imported the jquery library and tried to put these scripts on different positions on the page including the head tag of the page.
Edit: Code of the page may look a little bit messy because we're also learning the html at the same time. We're sorry for that :)
Summary for the code of the page is as following:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"
type="text/css">
<link href="css/w3.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<title>Kalkanlı Keyif</title>
</head>
<body>
<header>
<div class="w3-container">
<div id="logocontainer" class="w3-col" style="width: 20%">
<img src="images/logo.png"> </div>
<div id="blankcol" class="w3-col" style="width: 5%">
</div>
<div id="linkcontainer" class="w3-col" style="width: 75%">
<div class="w3-col links" style="width: 20%">
Link 1</div>
<div class="w3-col links" style="width: 20%">
Link 2</div>
<div class="w3-col links" style="width: 20%">
Link 3</div>
<div class="w3-col links" style="width: 20%">
Link 4</div>
<div class="w3-col links" style="width: 20%">
Link 5</div>
</div>
</div>
</header>
<video id="bgvid" autoplay="" controls=""
loop="" muted="" poster="images/background.jpg">
<source src="http://testweb.creatink.org/video/1.MP4" type="video/mp4">
</video>
<div class="w3-container">
<div id="restlist" class="w3-col" style="width: 20%">
<button id="abarButton" class="restaurantButton" type="button">
A Bar</button>
<button id="artolyeButton" class="restaurantButton" type="button">
A®tölye</button>
<button id="burgercityButton" class="restaurantButton"type="button">
Burger City</button>
<button id="cafedaysButton" class="restaurantButton"type="button">
Cafe Days</button>
..... //Buttons continue
</div>
<div id="blankcol" class="w3-col" style="width: 5%">
</div>
<div id="menu" class="w3-col" style="width: 75%">
<div class="donatello">
<p class="restName">Donatello Pizza</p>
<table class="w3-table">
<?php
/*PHP code for showing the menu of a restaurant
?>
......................
</table>
</div>
</div>
</div>
</body>
</html>
It's called a SPA (Single Page Application).
So here is a jfiddle that displays what your site currently does. Are you wanting help with the functionality as well?
All you do is add all the resources (js/css files etc) one at a time and then add your html (everything in the tag).
You guys should use AngularJS to do this site. It's made for these sort of apps.
http://jsfiddle.net/jz3pLL22/
$('a').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show().siblings("div").hide();
});
I am a newbie making a website. The website shows perfect on big screens but its layout gets jumbled up on smaller screens. Can someone please help me out with what I'm doing wrong? How can I fix it?
Thank you so much.
Here is My Code and Link to my website.
Link:
https://luckdrum.herokuapp.com/index.html
Code
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>LuckDrum</title>
<link rel="shortcut icon" href="img/fav.ico" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css"href="css/bootstrap.css" >
<!-- Custom styles for this template -->
<link rel="stylesheet"type="text/css" href="jumbotron.css">
</head>
<body>
<!--Heading Formation-->
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h5 align="left">PEOPE SEARCH</h5>
<!---->
<h6 class="text-center">PEOPLE-THINGS RECOMENDATION</h6>
<h6 id="h12">Actors/movies</h6>
<h6 id="h13" class="text-center">Authors</h6>
<h6 id="h14"class="text-center">Chefs</h6>
<h6 id="h15"class="text-right">Designers</h6>
<h6 id="h16"class="text-center">Handcrafters</h6>
<h6 id="h17">Jewelers</h6>
<h6 id="h18">Musicans</h6>
<h6 id="h19">Painters</h6>
<h6 id="h20">Singers</h6>
<h6 id="h21">Winemaker</h6>
<h6 id="h22">Architect</h6>
<h6 id="h23">bloggers</h6>
<h6 id="h24">Hosts</h6>
<h6 id="h25">Infographers</h6>
</div>
</div>
</div></body>
Bootstrap works on a col-* grid system with designated breakpoints that depend on the viewport size. The col-* sizes are set to break at specific widths on that viewport.
Here are the standard Bootstrap v3.3.5 media queries that corresponds with the documentation that outlines the responsive classes that are available.
/* Extra Small Devices, .visible-xs-* */
#media (max-width: 767px) {}
/* Small Devices, .visible-sm-* */
#media (min-width: 768px) and (max-width: 991px) {}
/* Medium Devices, .visible-md-* */
#media (min-width: 992px) and (max-width: 1199px) {}
/* Large Devices, .visible-lg-* */
#media (min-width: 1200px) {}
http://getbootstrap.com/css/#responsive-utilities
Below is an example of an acceptable bootstrap layout, note it looks nothing like yours currently,
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
CODEPEN DEMO
I am creating a site using this bootstrap template: http://getbootstrap.com/examples/cover/
I have filled the 'carousel' with images but when I view on mobile the images become squashed and poor quality. I have tried to change the image using javascript based on the screen size but it has had no effect.
Is there another way I can change the image seen on mobile?
Here is the HTML:
<div class="carousel-inner" role="listbox">
<div class="item active">
<img id="banner" class="first-slide" src="graphics/banner1.gif" alt="First slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
Here is the JS:
<script type="text/javascript">
if ((screen.width<=800) && (screen.height<=600)) {
// Make sure banner is ready in the DOM
document.getElementById('banner').src="graphics/banner2.gif"; }
</script>
Thanks!
You should use CSS instead of making JS work more than it should:
CSS:
#media screen and (max-width: 800px) , screen and (max-height: 600px){
.myclass{
width:500px;
height:300px;
background-image: #ffffff url("banner1.gif") no-repeat left top;
}
}
And then the HTML:
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="banner" class="first-slide myclass" />
<div class="container">
<div class="carousel-caption" />
</div>
</div>
</div>