I can use some help as I am new to html coding. anyway,
I've made a carousel with bootstrap. The carousel itself works fine. But after placing a button in the carousel, (using top: (px) and right: (px) as I don't know how to place it where I want otherwise)it still works fine. Until I start resizing the window. The background becomes smaller, but the button kind of stays the same size. So it starts moving around and what once were 2 buttons next to eachother, are now 2 buttons with alot of space between them. Here, have a look at my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Galaxy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
</head>
<body>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="galaxy3.jpg">
<div class="slide1"></div>
<div class="carousel-caption">
<div class="bannertext">
<h1>Santorodesign</h1>
<p>A website made by Michael</p>
<div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
<div class="mobileHide"> <button id="headerbutton-english">English</button></div>
</div>
</div>
</div>
<div class="item">
<div class="slide2"></div>
<img src="galaxy2.jpg">
<div class="carousel-caption">
<div class="bannertext2">
<h1>Explore the galaxy<h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div id="firstrow">
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img id="mercury" src="mercury.png"> <br>
(text) <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img id="earth" src="earth.png"> <br>
(text)<br>
<button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img id="venus" src="venus.png"> <br>
(text) <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Venus</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
.carousel-control.left, .carousel-control.right {
background-image: none
}
#firstrow {
font-size: 2em;
padding: 100px 0 0 0;
width: 100%;
height: 550px;
text-align: center;
color: black;
background: #DCDCDC;
position: relative;
}
#media all and (max-width: 900px) {
#headerbutton-nederlands { display: none; }
#headerbutton-english { display: none; }
}
.planet {
margin-bottom: 30px;
position: relative;
}
.planet img {
height: 300px;
max-width: none;
}
.bannertext {
font-size: 1.3em;
line-height: 15px;
}
.bannertext h1 {
font-size: 2em;
}
.bannertext2 {
font-size: 2em;
}
.mobileShow { display: none;}
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (max-device-width : 480px){
.mobileShow { display: inline;}
.mobileHide { display: none;}
.planet img{
height: 200px;
}
}
#headerbutton-nederlands {
position: absolute;
font-weight: bold;
bottom: 35px;
right: -90px;
-webkit-border-radius: 5px;
line-height: 50px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
#headerbutton-english {
position: absolute;
font-weight: bold;
bottom: 35px;
right: 100px;
-webkit-border-radius: 5px;
line-height: 50px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
basically what I want is that the buttons + the text inside of the buttons also resize when the window becomes smaller. As if the buttons are a part of the image.
Thank you for your time.
-Michael
If you want the buttons to scale relative to the size of the screen, you need to style them with relative units instead of pixels. You can use, % to size them relative to their parent element, em or rem to size them relative to the size of the font, or --most likely for your needs-- vh or vw to scale them relative to the height and width of the viewport, respectively.
Assuming your initial styles work on a viewport 1140px wide (just an arbitrary starting point), the following CSS may get you headed in the right direction:
#headerbutton-nederlands {
position: absolute;
font-weight: bold;
bottom: 3vw;
right: -8vw;
-webkit-border-radius: .5vw;
line-height: 4.3vw;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
You need to add position: relative; property to the .bannertext element. What this does is when a child element is absolutely positioned inside a relatively positioned parent, it makes sure the child element stays relative from the bounds of the parent. So change .bannertext in your CSS to the following and it should work.
.bannertext {
font-size: 1.3em;
line-height: 15px;
position: relative;
}
You may need to update the top and right properties though so it's back in the right place you wanted again.
Related
Whenever i Resize my website it keeps getting messed up, and I have tried everything to fix it but i cant figure it out. I tried bootstrap, but didn't quit understand the meaning of it. I am new so advice is appreciated and Thanks for helping
Regard Hussein M.
body {
color: white;
font-family: sans-serif;
background-repeat: round;
background-image: url(Gaming.jpg);
background-position: -430px -100px;
}
h1 {
font-family: sans-serif;
width: 100%;
height: 100%;
margin: 10px;
padding: 0px;
}
ul {
}
table {
padding-left: 50px;
}
body {
min-width: 800px;
position: relative;
font-family: sans-serif;
}
img {
margin: 0;
position: absolute;
top: 500%;
left: 50%;
margin-right: -50%;
border-color: red;
border-width: medium;
}
#menu1 {
float: left;
padding-left: 25px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
font-size: 17px;
font-family: inherit;
position: relative;
top: -9px;
padding: 9px 0px 50px 0px;
margin-bottom: 0px;
}
.nav ul,li,a{
display: inline;
padding-left: 10px;
text-decoration: none;
color: rgb(22, 239, 239);
}
.main {
position: absolute;
top: 150px;
left: 5px;
}
.h1z1 {
border-radius: 5px;
border: 1px solid #fff;
margin: 1 auto;
padding: 0px ;
margin-top: 60px;
width: 20%;
text-align: left;
}
.h1z1-img {
border-radius: 5px;
display: inline-block;
}
.h1z1-description {
display: inline-block;
margin-left: -25px;
top: px;
}
.Buy {
text-decoration: underline;
margin-left: -8px;
}
.H1Z1head {
margin: -10px;
margin-left: 40px;
}
.go {
color:aqua;
position: fixed;
top: 190px;
left: 380px;
}
.go {
text-decoration: underline;
font-size: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4aNAebvVIseGLS8uJOO3z9Bsrlfecjl7";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
<title>Gaming Library</title>
<link rel="stylesheet" type="text/css"
href="Stylesheet.css" />
</head>
<body>
<div class="nav">
<ul id="menu1">
<li>Homes</li>
<li>About</li>
<li>Affliates</li>
<li>Donate</li>
</ul>
<ul id="menu2">
<li>Old web</li>
<li>Sign Up</li>
<li>Login</li>
<li>Contact Support</li>
</ul>
</div>
<div class="go">
<h1>Go to feautered games</h1>
</div>
<!-- Næste side
<div class="h1z1">
<div>
<ul>
<h2 class="H1Z1head">H1Z1</h2>
</ul>
<img class="h1z1-img" src="KOTK.jpg" width="250" height="180">
</div>
<div class="h1z1-description">
<ul>
<li>
<p>H1Z1: King of the Kill is a fast-paced shooter in which players compete in large-scale chaotic PvP spectacles of skill, wit and a little luck, where everyone must fight to the death to stand alone at the top of the podium.</p>
<h3 class="Buy">Buy Now only $20.99 </h3>
</li>
</ul>
</div>
</div>
-->
</body>
</html>
Here is a simple example how to get your content responsive with Bootstrap, that you didn't understand. https://jsfiddle.net/qaxhxcb3/1/ (Here u can resize and such)
body {
font-family: 'Montserrat', sans-serif !important;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 14px;
}
.navbar-nav li a:hover {
color: green !important;
}
section h1 {
color: white;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.pink {
background-color: pink;
}
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Gaming Library</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Homes</li>
<li>About</li>
<li>Donate</li>
<li>Affliates</li>
<li>Support</li>
</ul>
</div>
</div>
</nav>
<!-- First section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-4 green">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 red">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 blue">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
<!-- Second section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-12 pink">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
</body>
</html>
As can you see, you put your content inside the class "container", then "row" after than u choose how you will display your content with the grid system. The Bootstrap grid system allows up to 12 columns across the page.
and the grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
and there is also different columns that decide how it will be displayed on the screen. In the example i got three col-sm-4 and it must always add up to 12 for each row class. In the second section i created there is col-sm-12, and that fill up the whole grid. Hope this helps a litte bit.
But, i suggest you read some Bootstrap tutorials from w3school to get a hang of it.
I have the mobile version of a static page looking good (although I am not sure if the HTML setup is ideal). I took the button out of the the .product-info class so I could use flexbox's order property and move it to below the product image on mobile. However, this leaves me unsure of how to go about styling the desktop version. I'm trying to get .product-info (blue), the 'get' button, and .store-info (green) each on their own separate lines. What is the best way to structure and style for the desktop version using flexbox without affecting the mobile layout? Thanks!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snapshelf</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="product-page.css" type="text/css">
</head>
<body>
<!-- Navigation -->
<nav class="header navbar navbar-light bg-faded">
<div class="nav navbar-nav container">
<a class="nav-item nav-link active" href="#">Snapshelf <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#" style="float: right">Store Account</a>
</div>
</nav>
<!-- Holds product image and information -->
<div class="product container">
<!-- Displays front or back of product -->
<div class="product-image">
<img src="front.jpg" class="main-image img-fluid" alt="" />
<img src="back.jpg" class="secondary-image" alt=""/>
</div>
<!-- Displays product information -->
<div class="product-info">
<p class="brand-name"><b>Brand Name</b></p>
<p class="product-desc">Product Name</p>
<p class="price">$100</p>
</div>
<!-- Get button -->
<div>
<button class="get-button btn btn-default btn-lg">Get</button>
</div>
<!-- Store information -->
<div class="store-info">
<div>
<b>From</b><br>
Store Name
</div>
<div style="margin-top: 10px">
<b>Where</b><br>
Store Location<br>
www.storeurl.com
</div>
</div>
</div>
</body>
</html>
CSS
/* Large screens */
#media only screen and (min-width: 768px) {
.body {
font-family: 'Roboto', sans-serif;
}
.header {
margin-bottom: 40px;
border: 1px solid green;
}
.product {
display: flex;
border: 1px solid red;
}
.product-info {
border: 1px solid blue;
}
.get-button {
margin-top: 20px;
border-radius: 2px;
}
.product-image {
display: flex;
flex-direction: column;
}
.main-image {
height: 500px;
width: 500px;
margin-right: 20px;
}
.secondary-image {
height: 150px;
width: 150px;
margin-top: 20px;
}
.price {
margin-top: 10px
}
.store-info {
border: 1px solid green;
border-radius: 2px;
padding: 10px;
margin-top: 40px;
text-align: center
}
}
Just set your flexbox container to flex-direction: column in your desktop media query.
#media only screen and (min-width: 768px) {
.product {
display: flex;
flex-direction: column;
border: 1px solid red;
}
}
I cannot center my bootstrap thumbnail images no matter what I try on tablet size and smaller. Once thumbnails reach thoses sizes they no longer scroll to stay center of screen. I have tried everything I can think of from adding center block to both my thumbnail class's and my img responsive class's HTML to text-algin center and margin auto 0. Nothing changes.
Here is my html
<div class="portfolio">
<div class="container">
<a name="porty"></a>
<h1 class="text-center" id = "port">My Work</h1>
<div class="row">
<div class="col-md-4">
<div class="thumbnail ">
<div class="caption">
<h4 class="text-center">A Berine Sanders Tribute page made with HTML,CSS, and Bootstrap</h4> <i class="fa fa-codepen fa-5x fa-fw" id="first"></i>
</div>
<img src="http://goodedevelopment.com/images/Bernie.PNG" class="img-responsive center-block" alt="tribute">
</div>
<legend>Tribute page</legend>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h4 class="text-center">Google mockup page made with HTML,CSS,and Bootstrap</h4>
<i class="fa fa-codepen fa-5x fa-fw" id ="second"></i>
</div>
<img src="http://goodedevelopment.com/images/google.png" class="img-resposive center-block" alt="google">
</div>
<legend>Google homepage</legend>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h4 class="text-center">A cannon game made with HTML,CSS, and Javascript</h4>
<i class="fa fa-codepen fa-5x fa-fw" id ="icon"></i>
</div>
<img src="http://goodedevelopment.com/images/cannon.png" class="img-responsive center-block" alt="cannon">
</div>
<legend>Cannon game</legend>
</div>
</div>
Here is my CSS
/*Portfolio*/
.portfolio {
background-color:#706C61;
padding-top: 50px;
padding-bottom: 100px;
display: inline-block;
width: 100%;
height: 800px;
position:relative;
}
.portfolio h1 {
font-size: 65px;
font-family: "Roboto",serif !important;
color: #0d0d0d !important;
}
.row {
padding-top: 100px;
}
.thumbnail {
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border: 1px solid black !important;
border-radius: 5px !important;
}
.caption img {
flex-shrink: 0;
max-width 100%;
max-height: 100%;
}
.caption {
position: absolute;
top: 0;
right: 0;
background: rgba(128, 128, 128, 0.75);
width: 100%;
height: 100%;
padding: 2%;
display: none;
text-align: center;
color: #fff !important;
z-index: 2;
font-family: "Montserrat",serif !important;
}
.caption a {
text-decoration: none;
color: white;
}
.caption h4 {
position: relative;
left: 5px;
bottom: 10px;
font-size: 25px;
}
.caption i:hover {
color: orange !important;
}
legend {
font-family: "Roboto",serif !important;
border-bottom: none !important;
color: #0d0d0d !important;
font-size:22px; !important;
height:200px;
}
#first {
position: relative !important;
bottom: -35px !important;
}
#second {
position: relative !important;
bottom: -35px !important;
}
#icon {
position: relative;
top: 30px;
}
#media screen and (min-width:767px) and (max-width:1199px) {
#first {
position: relative;
bottom: 20px;
}
#icon {
top: 50px !important;
}
.caption h4 {
font-size: 20px;
}
}
#media screen and (min-width:767px) and (max-width:991px) {
#first {
position: relative;
top: 50px;
}
.caption h4 {
font-size: 30px;
}
.caption {
font-size: 15px;
}
.caption i {
position: relative;
top: 50px;
}
#icon {
position: relative;
top: 65px !important;
}
.caption .fa {
font-size: 50px;
}
}
#media screen and (max-width: 1200px) {
.portfolio h1 {
font-size: 55px;
}
}
#media screen and (max-width: 991px){
.thumbnail {
height: 369px;
width: 440px;
position: relative;
right: -142px;
bottom: 48px;
}
.portfolio{
height: 2650px;
}
#profile li {
position: relative;
left: 60px;
}
.caption h4 {
font-size: px !important;
}
.caption .fa {
font-size: 80px !important;
}
legend {
height: 80px;
position: relative;
left: 139px;
bottom: 53px;
}
}
#media screen and (max-width: 965px) {
.portfolio {
margin-top: -150px !important;
}
}
#media screen and (max-width:767px) {
#first {
position: relative;
top: 25px;
}
.caption h4 {
font-size: 30px;
}
.caption {
font-size: 15px;
}
#port{
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: -1285px;
left: 0;
bottom: 0;
right: 0;
}
.thumbnail {
position: relative;
bottom: 0px;
}
legend
{
position: relative;
bottom: 13px;
}
}
#media screen and (max-width: 454px){
.caption h4{
font-size:25px;
}
#first{
top:15px;
}
#second{
top:15px;
}
}
#media screen and (max-width:400px) {
#icon {
position: relative;
bottom: 20px;
}
}
#media screen and (max-width:397px) {
#icon {
position: relative;
top: 0px;
}
}
#media screen and (max-width:390px) {
#first{
top:5px;
}
}
#media screen and (max-width:325px) {
.caption .fa {
font-size:60px;
}
}
#media screen and (max-width:307px) {
#first{
top:-5px;
}
}
/*End Portfolio*/
Here is the website
And finally here is a screenshot of what I am experiencing any help would be greatly appreciated thanks!
Instead of just using class="col-md-4" you should include "instructions" for Bootstrap at different screen sizes. Using multiple classes like class="col-xs-12 col-sm-6 col-md-4" would adjust the number of columns at the various screen sizes, making it easy to center the contents of each column, and just use the "img-responsive" class on the images so they will always fit in the column they are in. Then when the screen size is smaller, fewer columns will be displayed but the content of the column remains the same and stays centered in the column. If you want to center the column on the screen without filling the width of the screen (like to use col-xs-10 so it doesn't fill the width of 12 col's) then use the col-x-offset-x class to create a "blank" column to the left of where your div will display. You can use combinations of screen sizes and offsets as needed. The grid makes it really easy to get the alignment you want at different sizes without having to use CSS to define exact pixels for margins and whatnot. Once you start overwriting the CSS with "other instructions" as far as height/width go, things can get goofy...
Your fixed-navbar are with a width bigger than lower resolutions, theres alot of blank space on the right when you drop the resolution. I recommend you start developing your website following this basic bootstrap responsible template.
<!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" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Bare - Start Bootstrap Template</title>
<!-- Custom CSS -->
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.7</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</body>
</html>
Rebase your website inside the .container and link your style and keep going.. I hope it helps you to understand better the concepts of bootstrap, i cannot do the whole job for you after all you are a full stack developer.
I have been struggling to make right alignment and responsive. i want to add some of the test on top of the image. i have try changing values in css but it doesnt work out. i want to make as it below:
codepen: codepen link
Please advise. i am new to bootstrap.
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background: white;">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent" >
<div class="circle">1</div>
<div class="expenseItems">Mobile</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent" >
<div class="circle">2</div>
<div class="expenseItems">Select a Product Category</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" >
<img src="http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png" class="tabimg" alt="">
<div class="circle tag" style="background-color:darkblue">3</div>
<div class="expenseItems">Find the latest software, firmware, and drivers<font color="darkblue"></font></div>
</div>
</div>
<div class="col-sm-2">
<div class="parent" >
<div class="circle">4</div>
<div class="expenseItems">Tablet Use</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
.parent {
border: 1px;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: gray;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: gray;
font-size: 24px;
}
.hr {
background: gray;
height: 2px;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 15px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
.tabimg {
padding : 0px 0px 0px 0px;
height: 30px;
width: 100px;
margin-top: 0px;
}
The easiest approach to this would be just setting a background image to the div
in question.
I've added an ID to the div you're trying to add the image to, and I added the following code for that div.
#box-with-image {
background: url(http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png);
background-size: contain;
background-repeat: no-repeat;
/*
OTHER OPTION:
background-size: cover;
*/
}
Full Codepen Link
For sizing, contain will position the image top left, and fill whichever dimension is smallest. cover will fit whichever dimension is largest.
Or in other words, in a non-square shaped div, contain will leave whitespace, while cover will cut some of the image off.
Another approach to this would be using the following CSS on the image
img {
position: relative;
top: 0;
left: 0;
width: 100%;
}
I just put Bootstrap on to my website, and I have been testing it out. I have been trying to use there grid system, and I have run in to a mini problem. So on my website I have a Header, and it looks like this "Buttons 1-6 | Logo | Login". Now when my website retracts to the size of 767 pixels and smaller it still displays as above, but they each have there own row. So it looks like this "Buttons 1-6 (Top Row) | Logo (Second Row) | Login (Third Row)". Now whenever I try to do push and pull on the things, it still does not fix it. Eventually I would like it to display like this "Logo (Top Row) | Buttons 1-6 (Second Row) | Login (Third Row)" on a screen below 767 pixels. This is my HTML file:
<div id="wrapper" class="container">
<div id="header" class="row">
<div id="headerleftside" class="col-lg-4 col-md-4 col-sm-4">
<div class="row">
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 1 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 2 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 3 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 4 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 5 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 6 </h1>
</div>
</a>
</div>
</div>
<div id="headertitle" class="col-lg-4 col-md-4 col-sm-4">
</div>
<div id="headerrightside" class="col-lg-4 col-md-4 col-sm-4">
<form action="action.php" method="post">
<button id="headersubmit" input type="submit"> Login </button>
<p class="logininputboxs"> <input type="text" name="username" placeholder="Userame" required/> </p>
<p class="logininputboxs"> <input type="password" name="password" placeholder="Password" required/> </p>
</form>
</div>
</div>
</div>
Also please note, the above code does not have , , and other tags because this file is being used as a include() from PHP. Then the CSS file is below:
/*
Used Colors:
• Black - Black
• Orange - Orange
• Light Blue - #4DB8FF
• Normal Blue - #296ACC
• Normal Blue (Darker) - #2156A6
• Gray - #292D30
*/
/*-------------------------------------------------------*/
#wrapper {
width: 100%;
height: 750px;
position: absolute;
}
/*-------------------------------------------------------*/
#header {
height: 15%;
background-color: #292D30;
position: static;
border-bottom: 5px solid #296ACC;
z-index: 5;
}
/*-------------------------------------------------------*/
#headerleftside {
background-color: #292D30;
}
.headerbuttons {
background-color: black;
font-size: 65%;
text-align: center;
margin-left: auto;
margin-right: auto;
line-height: 0%;
font-color: #4DB8FF; /*The color is defined in the <head>, as well as the hover.*/
border: 1px solid white;
border-radius: 5px;
}
/*-------------------------------------------------------*/
#headertitle {
height: 120%;
background-color: black;
border-bottom: 5px solid #2156A6;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 10;
background: black url("http://localhost/postin'/title.png") no-repeat center center;
}
#headertitle:hover {
box-shadow: 0px 0px 5px 5px #2156A6;
z-index: 10;
background: black url("http://localhost/postin'/title_with_logo.png") no-repeat center center;
}
/*-------------------------------------------------------*/
#headerrightside {
background-color: #292D30;
}
.logininputboxs {
margin-left: 5%;
margin-top: 0%
}
input[type=text] {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid #4DB8FF;
border-radius: 3px;
}
input[type=password] {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid #4DB8FF;
border-radius: 3px;
}
.input_error_required {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid red;
border-radius: 3px;
}
.input_error_unique {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid red;
border-radius: 3px;
}
#headersubmit {
width: 15%;
height: 10%;
font-size: 100%;
border: 1px solid white;
border-radius: 3px;
text-align: center;
color: #4DB8FF;
background-color: black;
margin-left: 45%;
}
/*-------------------------------------------------------*/
#sidebar {
height: 84%;
width: 20%;
background-color: red;
position: static;
z-index: 1;
}
.sidebarbuttons {
width: 80%;
height: 12%;
margin-left: auto;
margin-right: auto;
background-color: white;
border-radius: 5px;
position: relative;
text-align: center;
font-size: 80%;
line-height: 500%;
top: 5%;
}
/*-------------------------------------------------------*/
a, u {
text-decoration: none; !important
}
Then finally the actual file is also done by Include() below by PHP:
<html lang="en-US">
<link rel="icon" type="image/png" href="http://localhost/postin'/favicon.ico?v=2">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.1-dist/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
<style type="text/css">
a:link {color: #4DB8FF;} /* unvisited link */
a:visited {color: #4DB8FF;} /* visited link */
a:hover {color: orange;} /* mouse over link */
a:active {color: orange;} /* selected link */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-push-4">
LOGO
</div><!-- /.col-sm-4 -->
<div class="col-sm-4 col-sm-pull-4">
BUTTONS
</div><!-- /.col-sm-4 -->
<div class="col-sm-4">
OTHER STUFF
</div><!-- /.col-sm-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
DEMO: https://jsbin.com/mutoju/1/edit
Order the html as it is on small viewports
Push and pull at the min-width
.col-sm-4 is the same as .col-md-4 and .col-lg-4. It's 33.3333% of the parent. From the .col-sm- min-width (768px by default) till whenever, that will be the size. So you don't need to use .col-md-4 or .col-lg-4, it's redundant.