I got my bootstrap grid to work. But I'm having trouble trying to figure out how to get it to collapse at 750px.
This is what it's suppose to look like this when larger than 750px:
Full-Size
and this is what it's suppose to look like when between 550px-750px:
Mid-Size
anything smaller than 550 the Aside and Section parts disappear (which I was able to do using #media in my CSS file)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="mystyle-A.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="header">Header</div>
</div>
<div class="row">
<div class="navigation-bar">Nav</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm mbody">
<div class="article">Article</div>
</div>
<div class="col-sm mbody">
<div class="row">
<div class="aside">Aside</div>
</div>
<div class="row">
<div class="section">Section</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: black;
font-size: 2em;
text-align: center;
}
.mbody {
margin: 0;
padding: 0;
}
.header {
background-color: cornflowerblue;
height: 60px;
text-align: center;
width: 100%;
}
.navigation-bar {
background-color: khaki;
height: 50px;
text-align: center;
width: 100%;
}
.article {
background-color: darkseagreen;
height: 180px;
text-align: center;
width: 100%;
}
.aside {
background-color: goldenrod;
height: 90px;
text-align: center;
width: 100%;
}
.section {
background-color: lightsteelblue;
height: 90px;
text-align: center;
width: 100%;
}
.footer {
background-color: lemonchiffon;
height: 40px;
text-align: center;
width: 100%;
}
#media only screen and (max-width: 550px) {
.aside {
display: none;
}
.section {
display: none;
}
}
It was easy to figure out the 550 using '#media' since I just have to not display it, but how could I use #media only screen and (max-width: 750px)to collapse it like the second picture?
550 and 750 isn't one of the standard breakpoint sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
the following would be similar to what you are looking for, but would break between the full view at smaller than 768, and then would hide the aside and section at under 576
<div class="row">
<div class="col-12">Header</div>
</div>
<div class="row">
<div class="col-12">Nav</div>
</div>
<div class="row">
<div class="col-12 col-md-9">Article</div>
<div class="col-12 col-md-3">
<div class="row">
<div class="d-none d-sm-block col-12">Aside</div>
<div class="d-none d-sm-block col-12">Section</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">footer</div>
</div>
If you really want to break at 750, and 550, you can override the breakpoints. See How to extend/modify (customize) Bootstrap 4 with SASS
Related
I'm trying to build a regular calculator but the layout doesn't behave. The "div.row div" css selector is being overlapped by its containing content to the right side. I tried checking chrome dev tools, but margin, padding and border are set to 0, so it doesn't give me a reason why it's happening.
Any help will be greatly appreciated!
body {
font-family: sans-serif;
width: 40%;
height: 1000px;
max-width: 1000px;
min-width: 250px;
margin: 0 auto;
}
main {
padding: 3%;
background-color: #753471;
}
div.row div {
display: inline-block;
width: 16.25%;
height: 30px;
padding: 2%;
background-color: #f2d8f0;
text-align: center;
margin: 0.3%;
font-size: 85%;
}
div.row {
display: inline-block;
width: 100%;
margin: 0%;
padding: 0;
}
div#output {
display: block;
width: 100%;
}
<!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">
<link rel="stylesheet" href="styles.css">
<title>Calculator</title>
</head>
<body>
<header></header>
<main>
<!-- output -->
<div id="output"></div>
<div class="row">
<div id="clear">C</div>
<div id="mudulu">%</div>
<div id="division">÷</div>
<div id="times">x</div>
</div>
<div class="row">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="minus">-</div>
</div>
<div class="row">
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="plus">+</div>
</div>
<div class="row">
<div id="seven">7</div>
<div id="eight">8</div>
<div id="nine">9</div>
<div id="equals">=</div>
</div>
<div class="row">
<div id="decimal">.</div>
<div id="zero">0</div>
<div id="delete">backspace</div>
</div>
</main>
</body>
</html>
I am searching to split the screen into 3 sections
On a wide screen:
On small screen:
Any ideas to how to achieves this?
I guess there is a combination of flexbox and the grid system but i am not able to figure it out.
Edit: I just did a tentative using just the row and col but i am not sure that is the ideal solution
#left {
height: 600px;
}
#righttop {
height: 300px;
}
#rightbottom {
height: 300px;
}
<!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" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 bg-success" id="left">
left part
</div>
<div class="col-md-6">
<div class="row bg-primary" id="righttop">first part right</div>
<div class="row bg-warning" id="rightbottom">first part left</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>
Three Image Combinations,
html,
body {
height: 100%;
width: 100%;
}
h1 {
margin: 0;
padding: 0;
text-align: center;
color: #fff;
font-family: sans-serif;
}
.img_container {
width: 70vw;
height: 80vh;
margin: 20px auto;
display: flex;
}
.main-img {
width: 50%;
height: 100%;
margin-right: 10px;
background-color: orange;
}
#media (max-width: 991px) {
.main-img {
width: 100%;
height: 100%;
}
}
.stacked-div {
width: 50%;
height: 100%;
}
#media (max-width: 991px) {
.stacked-div {
width: 100%;
height: 100%;
}
}
.overlay {
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
opacity: 0;
transition: all .4s;
display: flex;
justify-content: center;
align-items: center;
}
.main-img:hover .overlay,
.top-img:hover .overlay,
.bottom-img:hover .overlay {
opacity: 1;
}
.top-img,
.bottom-img {
width: 100%;
height: calc(50% - 5px);
background-color: orangered;
}
.top-img {
margin-bottom: 10px;
}
<div class="img_container">
<!-- top level image container START-->
<div class="main-img">
<!--Main image -->
<div class="overlay">
<!--overlay div -->
<h1>Hello!</h1>
</div>
</div>
<div class="stacked-div">
<!--stacked img container -->
<div class="top-img">
<!--top image -->
<div class="overlay">
<h1>hello!</h1>
</div>
<!--overlay -->
</div>
<div class="bottom-img">
<!--bottom image -->
<div class="overlay">
<h1>hello!</h1>
</div>
<!--overlay -->
</div>
</div>
The Bootstrap 4 way would be to use the flexbox utility classes...
<div class="container">
<div class="row">
<div class="col-md-6 bg-success min-vh-100" id="left">
left part
</div>
<div class="col-md-6 d-flex flex-column">
<div class="row flex-grow-1">
<div class="col-md-12 bg-primary min-vh-100 min-vh-md-50" id="righttop">first part right</div>
<div class="col-md-12 bg-warning min-vh-100 min-vh-md-50" id="rightbottom">first part left</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/vbWvESRSXP
Then you just need a little additional CSS to make the right columns 1/2 height on md and wider..
#media (min-width: 768px) {
.min-vh-md-50 {
min-height: 50% !important;
}
}
You’re right, you have to use Grid System with breakpoints, rows and cols, read the official documentation.
If you still looking for an answer, see this.
<div class="row">
<div class="col-md">First col md</div>
<div class="col-md">
<div class="row">
<div class="col-12">Second col xs</div>
<div class="col-12">Third col xs</div>
</div>
</div>
Follow this link.
the layout I'm trying to make
Can anyone help me how to put the div below the carousel? I'm kinda new to this
Give the carrousel a z-index: 5; and position: relative; and give the div you want under it a position: relative; and top: -value where value is the pixels you want it to go up.
Instead of the <div class="carousel"> use your own carrousel div. and same with the header.
For more info on how z-index works visit https://www.w3schools.com/cssref/pr_pos_z-index.asp
header {
height: 80px;
width: 100vw;
background-color: yellow;
position: relative;
}
nav {
height: 40px;
width: 100vw;
background-color: pink;
position: absolute;
bottom: 0;
}
.carousel {
width: 100vw;
height: 100px;
background-color: RGBA(0,255,0,0.4);
z-index: 5;
position: relative;
}
.classname {
width: 80vw;
height: 200px;
background-color: lightblue;
display: block;
margin: 0 auto;
position: relative;
top: -40px;
}
header,
nav{
text-align: center;
line-height: 40px;
}
.carousel{
text-align: center;
line-height: 100px;
}
.classname{
text-align: center;
line-height: 200px;
}
<header>
Header
<nav>
Nav
</nav>
</header>
<div class="carousel">
Carousel
</div>
<div class="classname"> DIV below carousel</div>
You can try this solution. Using margin top.
JSFiddel Link: https://jsfiddle.net/VrtuosArs/9h8djmy2/1/
body {
color: #000;
}
header {
background: yellow;
padding: 0.1rem;
}
.headertext {
text-align: center;
color: #000;
}
nav {
background: #FF9EC5;
padding: 0.1rem;
}
#carousel {
background: #9BFF00;
padding: 1rem;
}
#bcarousel {
background: #95D6ED;
}
.dac {
height: 240px;
margin-top: -2rem;
}
footer {
background: #C2C2C2;
}
<!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>Div carousel</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.0.0/cerulean/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Header</h1>
</div>
</div>
</div>
</header>
<nav>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Navbar</h1>
</div>
</div>
</div>
</nav>
<div class="container-fluid" id="carousel">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Carousel</h1>
</div>
</div>
</div>
<div class="container" id="bcarousel">
<div class="row dac">
<div class="col-6 offset-md-3 mx-auto">
<h3 class="text-center headertext">Div below carousel</h3>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Footer</h1>
</div>
</div>
</div>
</footer>
</body>
</html>
The Code
.inner-image:nth-child(2) {
background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}
is not recognized and i do not know why. I took a look with Firebug and the second child is not even listed. I simply want to set the background to the image provided in the Link you see above.
Here is the complete sourcecode.
CSS
.inner {
background-color: #000;
height: 100%;
padding: 35px;
text-align: justify;
width: 100%;
color: #fff;
}
.inner-video,
.inner-image {
padding: 0px;
}
.inner-image {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.inner-image:nth-child(2) {
background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="inner">
This is a Test!
</div>
</div>
<div class="col-md-4">
<div class="inner inner-image">
</div>
</div>
<div class="col-md-4">
<div class="inner inner-image">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="inner inner-video">
<iframe src="https://www.youtube.com/embed/c80yIJQJO8s" frameborder="0" allowfullscreen style="width: 100%; height: 100%; min-height: 360px;"></iframe>
</div>
</div>
<div class="col-md-6">
<div class="inner">
This is a Test!
</div>
</div>
</div>
</div>
</body>
</html>
You're selecting the wrong class. :nth-child(2) will not be selected for .inner-image because it is always the only child. You should select the .image-container. :nth-child refers to itself and not its children.
.image-container:nth-child(2) .inner-image {
/* styles here */
}
The reason it is not working is because there are no siblings of .inner-image; it is contained in its own div. A solution could be:
<div class="image-container col-md-4">
<div class="inner inner-image">
</div>
</div>
<div class="image-container col-md-4">
<div class="inner inner-image">
</div>
</div>
CSS:
.image-container:nth-child(2) .inner-image{...}
I'm trying to develop a pretty simple site using twitter bootstrap. When adding content I noticed that all of the content with the container class was being shifted a bit to the left with the addition of a child div of the row class with image content. The padding/margin/width of the container div doesn't seem to be changing so I'm really not sure what's affecting this change.
The HTML and CSS is below and the issue can be seen if you comment out the divs with classes .row1 and .row2. Doing so returns the content of the container class to its regular location.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Header -->
<div id="header">
<div class="container">
<div id="leftHeader">
<h1>Title</h1>
<h1 class="subtitle"><small>Subtitle</small></h1>
</div>
<div id="rightHeader">
<h3>Declaration</h3>
</div>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Navbar Header -->
<div class="navbar-header">
<a class="navbar-brand" href="index.htm">Company Name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Services</li>
<li>Pricing</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<!-- Content -->
<div class="container">
<div class="row row1">
<div class="col-md-12">
<div id="countercont">
<div id="counter"><div>0</div></div><div id="introRest">Counter text</div>
<div id="edge">Other side</div>
</div>
</div>
</div>
<div class="row row2">
<div class="col-md-4 img1">
<img src="computer.jpg" />
</div>
<div class="col-md-4 img2">
<img src="lightbulb.jpg" />
</div>
<div class="col-md-4 img3">
<img src="dome.jpg" />
</div>
</div>
<div class="row row3">
<div class="col-md-6">
<h1>Title</h1>
<p>Text</p>
</div>
<div class="col-md-6">
<h1>Title 2</h1>
<p>Other Text</p>
</div>
</div>
</div>
</body>
</html>
CSS
.subtitle {
margin-top: -15px;
}
#leftHeader {
float: left;
}
#rightHeader {
float: right;
}
#rightHeader h3 {
font-size: 28px;
padding-top: 40px;
}
#counter {
border-style: solid;
border-width: 1px;
width: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}
#counter div {
font-size: 50px;
width: 82px;
margin: 0 auto;
}
#introRest, #edge{
font-size: 30px;
display: none;
}
#edge {
float: right;
font-style: italic;
}
#countercont {
height: 80px;
}
.img1, .img2, .img3 {
text-align: center;
}
.img1 img, .img2 img, .img3 img {
border: 2px solid black;
height: 240px;
width: 240px;
}
.row2 {
padding-top: 10px;
padding-bottom: 30px;
}
.row3 ul {
padding-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.row3 li {
font-size: 13px;
}
Did you try adding a max-width to your images?
.img1 img, .img2 img, .img3 img {
border: 2px solid black;
height: 240px;
width: 240px;
max-width:100%; /* Added these */
max-height:100%; /* Added these */
}
Example on Bootply