Forgive my simple questions but im rather new to coding and im having trouble making my columns side by side, i was able to link images and external websites the way i wanted to but now have no idea how to get these two to be side by side. hopefully soon enough ill actually take the time and finally learn HTML but for now, im just shooting from the hip!
<div align="center">
<div style="width: 25%;">
<div class="section group">
<div class="col-sm- span_1_of_2">
<div class="container">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsup-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;"/>
</div>
</div>
<div class="col-sm- span_1_of_2">
<div class="container2">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsdown-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;"/>
</div>
</div>
</div> <!-- end width 25% div -->
</div> <!-- end master centering div -->
<br /><br />
</div>
The code you have provided is rather confusing. If I understand your question, you are trying to place the two images next to each other. Since you are using bootstrap, I would suggest:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsup-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;" />
</div>
<div class="col-sm-6">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsdown-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;" />
</div>
</div>
</div>
This is what I would do in your situation. I do not understand the code you have provided though, but this should work.
Related
On trying to implement the Grid Layout, when i provide cell span values specific to device such as "mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-6-desktop". The layout remains the same across desktop as well as mobile device. However according to the documentations of MDC , the cell should have updated as per the device on which the content is viewed.
You can see the below mentioned code in working condition at bodana.napcraft.in
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<!-- Newsletter Section Begins-->
<section id="sixthSection">
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12-phone mdc-layout-grid__cell--span-6-desktop">
<img src="/resources/images/newsletter.png" style="width: 100%" />
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-12-phone" style="padding-top: 5vh; background: #E3C5B8;">
<center>
<span class="secondaryTitle">THE DEW'S NEWSLETTER</span><br/><br/>
<span class="largeText">To receive more freebies, latest news and so much more!</span></center><br/>
<div class="mdc-layout-grid__inner">
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
<div class="mdc-text-field" style="width: 100%">
<input class="mdc-text-field__input" id="text-field-hero-input">
<div class="mdc-line-ripple"></div>
<label for="text-field-hero-input" class="mdc-floating-label">Name</label>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
<!-- Row Ends -->
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
<div class="mdc-text-field" style="width: 100%">
<input class="mdc-text-field__input" id="text-field-hero-input">
<div class="mdc-line-ripple"></div>
<label for="text-field-hero-input" class="mdc-floating-label">Email</label>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
<!-- Row Ends -->
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
<center><button class="mdc-button mdc-button--outlined subscribeButton">SUBSCRIBE</button></center>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
<!-- Row Ends -->
</center>
</div>
<!-- Row Ends -->
</div>
</div>
</section>
I would like to understand as to why my grid isn't updating as per device.
For the grid layout to work correctly, the following meta tag needs to be inserted in the tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm trying to create a virtual roulette wheel. Right now my concerns are strictly aesthetic. In the text-well on the right, the number in the #chipsInv won't center, except when I put an html "center" tag, and then for some reason it creates a huge amount of empty space at the bottom.
Here is my code, I've left out the Javascript since I assume it's irrelevant:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#ball {
position: absolute;
left: 208px;
top: 40px;
z-index: 1;
width: 20px;
height: 20px;
transition: top 1s;
}
#wheel {}
form {}
.row {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5">
<img id="ball" src="ball.png" onclick="spin()"></img>
<img id="wheel" src="Rwheelbg.png" onclick="spin()"></img>
</div>
<div class="col-lg-1">
<button id="reset" onclick="reset()">Reset</button>
</div>
<div class="col-lg-6">
<div class="well well-lg">
<span><center>Chips</center></span>
<br>
<span style="font-size: 180px; text-align: center;" id="chipsInv">10</span>
<!-- Why won't this center!? -->
<br>
<span style="float:right;" id="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></span>
</div>
</div>
<!-- Row ends here -->
</div>
<p>Bet on:</p>
<form action="">
<input type="checkbox" name="21" value="310" id="310"> 21
<br>
<input type="checkbox" name="9" value="100" id="100"> 9
<br>
<input type="checkbox" name="14" value="120" id="120"> 14
<br>
<input type="checkbox" name="13" value="240" id="240"> 13
</form>
<p>Bet on up to four numbers. However, be warned, the more numbers you bet on, the lower your chip return will be.</p>
<!-- container ends here -->
</div>
</body>
</html>
In Bootstrap, as best you can / where you can, use the Bootstrap classes to provide the styling you're looking for, as the Bootstrap classes are designed to be compatible with one another.
<div class="col-lg-6">
<div class="well well-lg">
<div class="text-center">Chips</div>
<div class="text-center" style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
If you want to text center everything in your example you can simply add the text-center class next to your well well-lg classes, as follows :
<div class="col-lg-6">
<div class="well well-lg text-center">
<div>Chips</div>
<div style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
Additionally;
with Bootstrap, they recommend you use div's where possible, and then
you can specify different behaviour by modifying the classes of those
divs, such as "d-inline", or "d-block". That was the reason I changed
your spans to divs.
Ensure your col-lg-6 div is contained within a div with class "row", and that according to the docs, these divs specifying col div when added together do not exceed 12. Bootstrap Grid Docs
I'm trying to get three images to cumulatively take up an entire bootstrap row (effectively each taking up a column that spans 4). However, my code right now has them leaving gaps in between, and on either side. I've attached a screenshot of the problem, with the ideal solution to have the images take up the entire space without leaving any gaps. Below is the relevant html:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%">
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%">
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%">
</div>
</div>
</div>
</body>
Screenshot of Issue
Bootstrap columns have default right and left padding of 15px. Inspect the columns in devtools and you will see it. You need to over ride it with your own custom css.
Here you go with a solution https://jsfiddle.net/hhzbxrbf/
.col-md-4 {
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%" />
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%" />
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%" />
</div>
</div>
</div>
</body>
I'm trying to implement a mobile view where the first column of the row goes on top of the second column.
Here's the code:
<div class="container-fluid">
<div class="row">
<div class="col-md-4"><div class="loginpart"><img id ="icon" src="../images/athletics-logo.png"/><h2>Athletes Profiling </h2>
<input type="button" class="login" name="login" value="Log In"/></div></div>
<div class="col-md-8" style="padding: 0"><img id ="header"/><div class="mantra"><h2>Go Wolves!</h2></div></div>
</div>
</div>
Now the thing is, I want the loginpart class to go on top of the col-md-8 when on mobile. I tried searching for answers but ended with nothing. I don't want it to stack on top of each other.
A | B = A goes on top of B
If the implementation or my understanding is faulty, please do educate me. Thanks!
Edit: I tried the push-pull bootstrap function, but all it does is put the second column under the first column (which isn't what I was hoping for), but instead overlap both columns when switched to mobile view, not stacked on top of each other.
Try position absolute with push. You can use Z-index to get the correct column on top.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="position: absolute; z-index: 1;">
<div class="loginpart">
<img id ="icon" src="" />
<h2 style="color: grey;">Athletes Profiling </h2>
<input type="button" class="login" name="login" value="Log In"/>
</div>
</div>
<div class="col-md-8 col-md-push-4">
<img id="header" src="" />
<div class="mantra">
<h2 style="color: blue;">Go Wolves!</h2>
</div>
</div>
</div>
</div>
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">