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
Related
I'm making a django-based web app that has bootstrap cards with some graphs inside of them. I'm using bootstrap so both the graphs and the cards are responsive; however at some screen sizes, the graphs extend beyond the size of the cards. Is there a way to force everything in a card (or some other container) to say inside the container?
Partial html code. Can post the graph code if helpful - it is written in python + plotly. I'm not sure if the problem is with the graphing or with the html/script.
<div class="container">
<h2 class="pb-2 border-bottom mt-4">Scores for {{ user.username }} </h2>
<div class="row mb-4 mt-4">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-titler">Result</h5>
<p style="color:gray;"> {{last_test_date | safe}}</p>
{{score | safe}}
<!-- <div class="chart" id="bargraph1", style="height: 150px">-->
<div class="chart" id="bargraph1">
<script>
var graphs = {{plot1 | safe}}
</script>
</div>
Learn More
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Results Over Time</h5>
<br>
<!--<div class="chart" id="bargraph2", style="height: 225px">-->
<div class="chart" id="bargraph2">
<script>
var graphs = {{plot2 | safe}}
</script>
</div>
</div>
</div>
</div>
</div>
reference
CSS Units - What is the difference between vh/vw and %?
You can try editing the CSS of bar graph1&2 as out of 100%. the percent at the end can apply to a fixed parent container like card-body
Give 100% width to the graphs.
#bargraph1,#bargraph2{
width:100%;
}
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
So this is what I’m hoping to accomplish.
I currently have a bootstrap grid displaying 1 row and 4 columns.
On desktop devices the 4 columns appears next to each other
On tablets they appear in a 2 x 2 grid and in Mobile devices they appear 4 rows with 1 column.
Is it possible to make it so that when in tablet or mobile to have a carousel that I can slide between the 4 columns? So that when in Tablet there are 2 slides with two of the columns in each slide and when in mobile 4 slides with 1 column in each slide?
Here is my current grid code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="how container">
<div class="title">SUBSCRIBE IN JUST 4 EASY STEPS</div>
<div class="row no-gutters">
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>SIGN UP</span>
</div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>SELECT AGE GROUP</span>
</div>
<div class="w-100 d-block d-lg-none"></div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>CHOOSE A SUBSCRIPTION PLAN</span>
</div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>HAVE FUN</span>
</div>
</div>
<div class="row text-center pt-3">
<div class="col">
<button type="button" class="btn btn-dark btn-lg">GET STARTED</button>
</div>
</div>
</div>
If Bootstrap is the only library you're allowed to use, I would imagine you would have to have duplicate contents and show/hide one of them on different breakpoints for carousels or just regular 4-column content.
If that's not the case, I would highly recommend you to use OwlCarousel! That has everything you're looking for.
HTML
<div class="how container">
<h4 class="title">
SUBSCRIBE IN JUST 4 EASY STEPS
</h4>
<div class="owl-carousel owl-theme">
<div class="item">
<figure class="figure">
<img src="https://loremflickr.com/600/200?random=1"
class="figure-img img-fluid w-100" />
<figcaption class="figure-caption">
SIGN UP
</figcaption>
</figure>
</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
</div>
As you can see, basically you just need a wrapper with a class .owl-theme that wraps a collection of .items. Inside each item, you can have any content you want. Here I just demonstrated to have a <figure /> inside of each item.
JavaScript
Make sure you've loaded jQuery first, then the javascript file of OwlCarousel, and then 2 style files: 1 core css and 1 theme. Installation details are documented here.
$(function() {
$('.owl-carousel').owlCarousel({
loop: false,
margin: 0,
nav: false,
responsive:{
0:{
items:1
},
768:{
items:2
},
992:{
items:4
}
}
});
});
See, in the responsive option, this is where you define how many items you want per break point. More info from their documentation site here!
Result
demo: https://jsfiddle.net/davidliang2008/mvn3k08u/22/
I use bootstrap 4.1 card to display inside categories on right sidebar - Card example image;
On small screens I want to collapse this card, because it is big and goes first - mobile example.
So how can I collapse card on sm and md screens, and not collapse on lg screens? Or I need not to use card?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="card mb-3">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<h5>All</h5>
Categories here
</div>
</div>
</div>
<button class="btn d-lg-none" type="button" data-toggle="collapse" data-target="#example-collapse">
<span class="navbar-light"><span class="navbar-toggler-icon"></span></span>
</button>
<div id="example-collapse" class="collapse d-lg-block">
<!-- your card here -->
</div>
The class d-lg-none hides the button for lg and xl screen sizes and the class d-lg-block shows the div for lg and xl screen sizes. I am using the collapse icon for the navbar-light style, you may need to adjust this to match your navbar.
Can just use the built in Bootstrap classes to hide on smaller screens.
https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
Would look something like this (untested)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container d-none d-lg-block">
<div class="card mb-3">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<h5>All</h5>
Categories here
</div>
</div>
</div>
All it does is check media queries on the screen width and apply display:none if the screen size is lower than the threshold you put.
You could set it up this way :
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-block">
card block
</div>
</div>
</div>
And will do what you're trying to do.
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>