I know this question has been answered but I am having extreme difficulty using the answers given before and applying them into my code.
I am making an tab-pane with different images. I want to put the image in the lighter orange section on the right with the text on the left. However, this tab is placed onto a wrapper and it's confusing me with the indexes.
In addition, all the solutions that work without considering the wrapper doesn't work when I use XXAMP.
Below is what I have so far and applies to the description :
Here is the code I have so far:
body {
background-color: #FFF;
background-image: url(../media/style/background.jpg);
font-family: helvetica;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
background-attachment: fixed;
}
#wrapper img {
width: 80%;
height: 60%;
}
#wrapper {
width: 900px;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
margin-top: 20;
margin-right: auto;
margin-bottom: 20;
margin-left: auto;
height: auto;
border: medium none #9C0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.images {
position: relative;
text-align: center;
}
.tab-content {
width: 825px;
border-bottom: 2px solid white;
border-right: 2px solid white;
border-left: 2px solid white;
border-top: 2px solid white;
padding: 13px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: right;
}
.nav-tabs {
margin-bottom: 0;
width: 805px;
}
.tab-content {
display: block;
background-color: rgba(245, 172, 64, 0.9);
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 50%, #F4B350 50%);
min-height: 300px;
z-index: -1;
}
.tab-content img {
position: relative;
width: 58vw;
height: 42vw;
}
.container a {
background-color: rgba(245, 172, 64, 0.9);
color: black;
}
.tab-content p {
font-size: 15px;
}
.tab-content h3 {
font-size: 28px;
}
#tab1 h3 p {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="UTF-8" />
<title>Hanler Products - Home</title>
</head>
<body>
<!-- TAB -->
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Upright Towbar Caddy</a></li>
<li><a data-toggle="tab" href="#tab2">Upright Trailer lid Caddy</a></li>
<li><a data-toggle="tab" href="#tab3">Park Stand</a></li>
<li><a data-toggle="tab" href="#tab4">Gates / Burglar Bars / Security Gates</a></li>
<li><a data-toggle="tab" href="#tab5">Fences</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div class="box">
<h3>Upright Towbar Caddy</h3>
<p>Ideal for short trips to school and back.</p>
</div>
<img src="media/style/slider/UTC.jpg" alt="Upright Towbar Caddy">
</div>
<div id="tab2" class="tab-pane fade">
<h3>Upright Trailer lid Caddy</h3>
<p>Now, taking your cycles on holiday, is a breeze.</p>
<img src="media/style/UTC.jpg" alt="Upright Trailer lid Caddy" />
</div>
<div id="tab3" class="tab-pane fade">
<h3>Park Stand</h3>
<p>Ideal for parking bikes at shops, schools and at shopping malls.<br/>The parkstand could prevent damage to vehicles <br/> in parking areas.<br/>The bike could also be chained to be stand <br/> to protect it from being stolen.</p>
</div>
<div id="tab4" class="tab-pane fade">
<h3>Gates / Burglar Bars / Security Gates</h3>
<p>Custom security bars to keep you and your belongings safe.</p>
</div>
<div id="tab5" class="tab-pane fade">
<h3>Fences</h3>
<p>Custom fencing for your home and/or business.</p>
</div>
</div>
</div>
</body>
</html>
Try pulling the text to the left, like this;
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div class="box pull-left">
Related
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
::selection{
background-color: #333;
color: rgb(255, 230, 0);
}
::-moz-selection{
background-color: #333;
color: rgb(255, 255, 255);
}
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-thumb{
background-color: rgb(255, 198, 198);
-webkit-border-radius: 10px;
}
::-webkit-scrollbar-track{
background-color: #f8f8f8;
}
header{
width: 100%;
z-index: 100;
}
.nav-list, #left-navbar, #right-navbar{
display: flex;
}
.img-logo{
width: 200px;
transform: translateX(-20px);
}
#right-navbar{
transform: translateX(300px);
}
.nav-list{
position: fixed;
width: 1152px;
top: 0;
left: 110px;
background-color: rgb(255, 255, 255);
list-style-type: none;
padding: 20px;
box-shadow: 0px 0px 9.5px 0px black;
}
.n{
text-decoration: none;
color: black;
font-size: 14px;
font-weight: 700;
}
.nav-link{
text-decoration: none;
padding: 10px;
color: black;
font-size: 14px;
font-weight: 700;
}
.nav-link:hover{
border-bottom: 4px solid rgb(255, 0, 0);
transition: all ease-out .5s;
}
.n:hover{
border-bottom: 4px solid rgb(255, 0, 0);
transition: all ease-out .5s;
}
#free-web-hosting{
background-color: #f8f8f8;
height: 100vh;
padding: 230px 100px;
overflow-y: hidden;
background-image: url(https://images2.imgbox.com/d7/c9/XyznzmUz_o.png);
background-repeat: no-repeat;
background-position-x: 600px;
background-position-y: 170px;
}
button{
background-color: #ff5d64;
border-radius: 5px;
box-shadow: .5px .5px 20px .5px rgb(212, 209, 209);
border: none;
padding: 12px;
}
.fwh-img{
transform: translate(470px, -250px);
z-index: 1;
}
.fas, .nav-link{
position: relative;
top: 19px;
}
.bg-red{
border: none;
border-radius: 5px;
background-color: red;
color: white;
margin: 0px 40px;
padding: 10px 25px;
box-shadow: 0px 0px 10px 0px rgb(255, 140, 140);
}
#sponsors{
display: flex;
justify-content: center;
align-items: center;
}
.sponsors-img{
padding: 10px 40px;
margin-top: 30px;
}
#all-starts{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 60px 0px;
}
#pricing-container{
display: flex;
justify-content: center;
align-items: center;
}
.pricing{
width: 280px;
height: 100vh;
box-shadow: 0px 0xp 10px 0px;
border: 1px solid black;
}`enter code here`
.pricing1, .see-more{
display: flex;
flex-direction: column;
}
#media (max-width: 768px) {
#free-web-hosting{
background-image: none;
text-align: center;
line-break: loose;
}
#sponsors{
display: flex;
flex-wrap: wrap;
}
#pricing-container{
display: flex;
flex-wrap: wrap;
}
#all-starts{
text-align: center;
display: flex;
flex-wrap: wrap;
}
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="https://images2.imgbox.com/a5/2f/URZJk3ro_o.png" type="image/x-icon">
<script src="https://kit.fontawesome.com/fa9f85711d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="000web.css">
<title>Free Web Hosting - Host a Website for Free with Cpanel, PHP</title>
</head>
<body>
<header>
<nav id="nav-bar">
<ul class="nav-list">
<div id="left-navbar">
<img class="img-logo" src="https://svgshare.com/i/YPv.svg" alt="logo">
<li><a class="n" href="#"><span class="nn" style="color: rgb(255, 20, 20); font-size: 14px; font-weight: 900; border: none;">SALE</span><br>Cheap Web Hosting</a></li>
<li><a class="nav-link" href="#">Website Builder</a></li>
<li><a class="nav-link" href="#">Forum</a></li>
</div>
<div id="right-navbar">
<span class="fas fa-globe"></span>
<li><a style="color: rgb(255, 25, 25); border: none;" class="nav-link" href="#">SIGN IN</a></li>
<li><a class="nav-link bg-red" href="#">GO PREMIUM</a></li>
</div>
</ul>
</nav>
</header>
<main>
<div id="free-web-hosting">
<div id="con">
<h3 class="h33" style="font-size: 45px; color: #2b464c; font-weight: 700;">Free Web Hosting</h3>
<p style="margin: 30px 0px; line-height: 25px;"><span style="color: rgb(253, 67, 67);">Zero</span> cost website hosting with PHP,<br> MySQL, cPanel & no ads!</p>
<button style="color: rgb(255, 255, 255);">GET STARTED</button><br>
</div>
</div>
<div id="sponsors">
<img class="sponsors-img" src="https://svgshare.com/i/YQe.svg" alt="php logo">
<img class="sponsors-img" src="https://svgshare.com/i/YQp.svg" alt="cloudflare logo">
<img class="sponsors-img" src="https://svgshare.com/i/YR0.svg" alt="nginx logo">
<img class="sponsors-img" src="https://svgshare.com/i/YNt.svg" alt="cloudlinux logo">
<img class="sponsors-img" src="https://svgshare.com/i/YNu.svg" alt="intel logo">
<img class="sponsors-img" src="https://svgshare.com/i/YR1.svg" alt="wordpress logo">
<img class="sponsors-img" src="https://svgshare.com/i/YNM.svg" alt="mysql logo">
</div>
<div id="all-starts">
<h1>It All Starts Here</h1>
<p>Choose one of the premium plans and enjoy all the greatest features, industry leading performance and top of<br>the class 24/7 live support on the market. Unlimited hardware resources, free domain, SSL & SSH also included!</p>
</div>
<div id="pricing-container">
<div class="pricing pricing1">
<h4>$000/mo</h4>
<li class="fas fa-check">1 Website</li>
<li class="fas fa-check">300 MB Disk Space</li>
<li class="fas fa-check">Limited Bandwidth (3 GB)</li>
<li class="fas fas fa-times">No Email Account</li>
<li class="fas fas fa-times">24/7/365</li><br>
<div class="see-more">
<span>See all features</span>
<li>FREE SIGN UP</li>
</div>
</div>
<div class="pricing"></div>
<div class="pricing"></div>
<div class="pricing"></div>
</div>
</main>
</body>
</html>
I completed responsive web design last 3 weeks on freecodecamp, and I have been building pages looking at other websites to improve my portfolio, but this web page I'm building is very difficult, can you please into the code and tell me where I went wrong. I thought that I was overusing the <li> that is why it is behaving this wa
y.
See here
enter image description here
Wrap Your list elements in a ul tag and give it a negative z-index styling
<ul style="z-index: -1000 !important;">
<li class="fas fa-check">1 Website</li>
<li class="fas fa-check">300 MB Disk Space</li>
<li class="fas fa-check">Limited Bandwidth (3 GB)</li>
<li class="fas fas fa-times">No Email Account</li>
<li class="fas fas fa-times">24/7/365</li>
</ul><br />
This Works
PRO TIP:
Always make sure to put your <li> </li> elements in an immediate container for better and easy styling
You could do something like
<ul><li></li></ul>
If you use position fixed the next element will be positioned at the previous element's position. if you want your navbar to be fixed you have to do something like this:
<div class="relative">
<div class="navbar fixed">
</div>
</div>
<div class="relative">
</div>
Hello i have just started to learn to code today and i decided to start with html and css.
I'm making and website template / layout using html css and bootstrap 4.
But i have run into a problem with my divs being wider than my header and navigation bar when not responsive and can't seem to work out why and was hoping maybe someone could tell me why.
Image of my divs being wider
I'm also trying to float / angle two of the last links in the navigation bar to the right but they don't.
* {
box-sizing: border-box;
}
html {
height: 100%;
font-family: "Hammersmith One", Hammersmith One, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Hammersmith One", Hammersmith One, sans-serif;
}
body {
margin: 1em 10em;
font-size: 0.8750em;
color: rgb(255, 255, 255);
background-color: rgb(255, 255, 222);
}
header {
margin-bottom: 1em;
background-color: rgb(0, 0, 0, 0.4);
border-radius: 5px;
border: 2px solid rgb(0, 0, 0);
}
nav {
margin-bottom: 1em;
overflow: hidden;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0, 0.4);
border-radius: 5px;
border: 2px solid rgb(0, 0, 0);
}
nav a {
float: left;
display: block;
color: rgb(242, 242, 242);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
background-color: rgb(71, 149, 13);
color: rgb(242, 242, 242);
;
}
.card {
margin-bottom: 1em;
background-color: rgb(0, 0, 0, 0.4);
border-radius: 5px;
border: 2px solid rgb(0, 0, 0);
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
footer {
font-size: 16px;
color: rgb(255, 255, 255, 0.4);
text-shadow: 0 1px 3px rgb(0, 0, 0, 0.2);
}
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Hammersmith One" rel="stylesheet" />
</head>
<body>
<header class="container-fluid text-center">
<h1>My Header</h1>
<p>Text Here</p>
</header>
<nav class="navbar navbar-expand-sm" id="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item" style="float:right">
<a class="nav-link" href="#">Link 4</a>
</li>
<li class="nav-item" style="float:right">
<a class="nav-link" href="#">Link 5</a>
</li>
</ul>
</nav>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h5 class="card-header bg-dark text-center">Card Header</h5>
<div class="card-body text-center">Card Body Content</div>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h5 class="card-header bg-dark text-center">Card Header</h5>
<div class="card-body text-center">Card Body Content</div>
</div>
<div class="card">
<h5 class="card-header bg-dark text-center">Card Header</h5>
<div class="card-body text-center">Card Body Content</div>
</div>
<div class="card">
<h5 class="card-header bg-dark text-center">Card Header</h5>
<div class="card-body text-center">Card Body Content</div>
</div>
</div>
</div>
<footer class="container-fluid text-center fixed-bottom">
<p><b>Footer Text</b></p>
</footer>
</body>
</html>
I have a series of photos displayed in a bootstraps card class. The images need to have white text on top of them, so I have added a dark filter to the photos filter: brightness(60%); so the text is clear to read.
See how the image currently looks https://i.ibb.co/TTTdrDP/card-image.jpg
The white text is only positioned at the bottom of the photos so I'd like to only apply the filter: brightness(60%); to the bottom of the image only and fade into the normal brightness.
I've tried many forms of gradient but all that does is apply a hard colour over the photo (removing the photo completely), rather than a transparent (gradient) filter on top of the image?
My CSS
<style>
.card {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 100%;
}
.card:hover {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
/* Card image dark filter */
.card-img-top {
width: 100%;
height: 220px;
object-fit: cover;
filter: brightness(60%);
}
/* Align heading text to bottom of photo */
.bottom {
position: absolute;
right: 0;
left: 0;
padding: 10px;
bottom: 0px;
padding-bottom: 40px;
}
.card-footer {
font-size: 12px;
font-weight: normal;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: grey;
background-color: #eeeeee !important;
}
</style>
Image card
<div class="card" style="width:100%;">
<img class="card-img-top" src="PHOTO HERE" alt="Card image">
<div class="card-img-overlay">
<div class="bottom text-light">
<h2>Hiking in Eastbourne for all who want to join.</h2>
</div>
</div>
<div class="card-footer p-2">
<div class="d-flex">
<div>
<i class="fa fa-calendar-alt fa-fw"></i><a> </a><a>4th June</a>
</div>
<div class="ml-auto">
<a>3421</a><a> </a><i class="fa fa-user-friends fa-fw"></i>
</div>
</div>
</div>
</div>
[1]: https://i.ibb.co/TTTdrDP/card-image.jpg
Do you mean something like this?
.card {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 100%;
}
.card:hover {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}
/* Card image dark filter */
.card-img-top {
width: 100%;
height: 220px;
object-fit: cover;
filter: brightness(100%);
}
/* Align heading text to bottom of photo */
.bottom {
position: absolute;
right: 0;
left: 0;
bottom: 35px;
padding-top: 90px;
padding-left: 10px;
padding-right: 10px;
height: 150px;
background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.card-footer {
font-size: 12px;
font-weight: normal;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: grey;
background-color: #eeeeee !important;
/*filter: brightness(100%); */
}
<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>
<div class="card" style="width:100%;">
<img class="card-img-top" src="https://media-cdn.tripadvisor.com/media/photo-s/0f/3d/89/4d/foto-com-dome.jpg" alt="Card image">
<div class="card-img-overlay">
<div class="bottom text-light">
<h2>Hiking in Eastbourne for all who want to join.</h2>
</div>
</div>
<div class="card-footer p-2">
<div class="d-flex">
<div>
<i class="fa fa-calendar-alt fa-fw"></i><a> </a><a>4th June</a>
</div>
<div class="ml-auto">
<a>3421</a><a> </a><i class="fa fa-user-friends fa-fw"></i>
</div>
</div>
</div>
</div>
I just started using bootstrap, and I am creating a website using it. But I have been told that I am not using it correctly. Can someone show me how I would properly use bootstrap? Thanks for any help.
body{
overflow: hidden;
background-color: #1C213D;
background-image: url("background.png");
}
.nav{
position: absolute;
width: 250px;
height: 5000px;
background-color: rgba(0, 0, 0, .2);
border: 2px solid rgba(56, 179, 206, .4);
}
.nav-pills li a{
/* 0.5s is the amount of time it take to change colors */
transition: .3s background ease-in-out;
}
ul li{
position: relative;
text-align: center;
list-style: none;
font-family: "Play";
display: block;
color: lightsteelblue;
margin-top: 200px;
font-size: 20px;
padding: 10px;
}
p{
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
font-size: 18px;
color: whitesmoke;
}
.container{
position: absolute;
width: 800px;
height: 450px;
margin-top: 200px;
margin-left: 265px;
background-color: rgba(0, 0, 0, .8);
border-top: 2px solid rgba(56, 179, 206, 1);
border-bottom: 2px solid rgba(56, 179, 206, 1);
border-right: 2px solid rgba(56, 179, 206, 1);
}
.project1{
position: absolute;
width: 400px;
height: 275px;
margin-top: 80px;
margin-left: 800px;
border: 2px solid rgba(56, 179, 206, 1);
background-color: rgba(0, 0, 0, .2);
}
.project2{
position: absolute;
width: 400px;
height: 275px;
margin-top: 80px;
margin-left: 350px;
border: 2px solid rgba(56, 179, 206, 1);
background-color: rgba(0, 0, 0, .2);
}
.project3{
position: absolute;
width: 400px;
height: 275px;
margin-top: 400px;
margin-left: 350px;
border: 2px solid rgba(56, 179, 206, 1);
background-color: rgba(0, 0, 0, .2);
}
.project4{
position: absolute;
width: 400px;
height: 275px;
margin-top: 400px;
margin-left: 800px;
border: 2px solid rgba(56, 179, 206, 1);
background-color: rgba(0, 0, 0, .2);
}
img{
position: absolute;
margin-left: 54px;
margin-top: 25px;
}
i{
margin-top: 675px;
font-size: 40px;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<div class="container-fluid">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-stacked" role="tablist">
<img src="logo.png">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div class="container">
<div class="col-md-7 col-lg-7 col-xs-7 col-sm-7">
<p>This is the home page.</p>
</div>
</div>
</div>
</body>
</html>
Firstly, you do not need to use these two lines the way you did:
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<div class="col-md-7 col-lg-7 col-xs-7 col-sm-7">
These lines are better written like so:
<div class="col-xs-4">
<div class="col-xs-7">
But even this is technically a potential problem because on xtra small screens you want to generally (not always) have the items extend all the way across the screen.
So a better thing to do is to write the media query classes starting at the small or medium screen size and let every screen size underneath use the default 100% width. That would look like so:
<div class="col-md-4">
<div class="col-md-7">
Furthermore, this is not necessarily incorrect but you forgot to add the Bootstrap Javascript to the document. NOTE: You will also need to include jQuery BEFORE the Bootstrap Javascript so that it works. Bootstrap JS is dependent on jQuery.
Lastly, in your css you are styling generic elements. What you want to do is copy and paste the component CSS with all of the default bootstrap classes and then add another custom class to the items you want to edit to look different.
So, this line:
<ul class="nav nav-pills nav-stacked" role="tablist">
Should look like this:
<ul class="nav nav-pills nav-stacked my-awesome-custom-element" role="tablist">
And then you can write CSS for my-awesome-custom-element that will ONLY target your custom element without messing with underlying Bootstrap CSS styles.
You are not including the bootstrap js (or the required jQuery) files. See this link:
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php
Also, this is redundant:
class="col-md-4 col-lg-4 col-sm-4 col-xs-4"
class="col-md-7 col-lg-7 col-xs-7 col-sm-7"
They can be consolidated into:
class="col-md-4"
class="col-md-7"
If you are using different widths for different screen sizes, then this would be appropriate:
class="col-md-3 col-lg-4 col-sm-5 col-xs-8"
class="col-md-4 col-lg-7 col-xs-6 col-sm-5"
Finally, if you are using the bootstrap grid system, then usually you want to make your column width add up to 12:
<div class="col-md-4"></div><div class="col-md-5"></div><div class="col-md-3"></div>
I would recommend reading up on the bootstrap grid system: http://getbootstrap.com/css/
add this in the header
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
I'm developing a tumblr theme with bootstrap, and I'd like a nice big area for the user's profile picture right next to the header. The issue here is, that bootstrap has a very tight grid format and I can't see any room for what I want:
see that red thing? I want to move it where the blue arrow is pointing. I've tried expanding the container, setting the red circle to float left, and giving it margin-bottom:100%, but that shoved everything down off the page.
Here's my css and HTML for reference, the item in question is labeled with the class "talkbubble":
CSS
//Media Queries
#media (min-width: 1200px){
.container {
width: 800px;
}
}
#media (min-width: 992px){
.container {
width: 800px;
}
}
//Header Edits
.jumbotron{
margin-bottom: 0px;
h1{
color: red;
}
}
//upsidedown tab edits
.tab-content{
padding:10px;
border:1px solid #ddd;
border-bottom:0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom:0;
margin-top:-1px;
margin-left: 32px;
width: 71px;
white-space: nowrap;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
background-color: #eee;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #eee;
border: 1px solid #ddd;
border-top-color: transparent;
}
.nav-tabs > li.active > a {
background-color: #eee !important;
}
.arrow {
border-color: #eee transparent transparent #eee;
border-style: solid;
border-width: 17px 17px 17px 17px;
height:0;
width:0;
position:absolute;
bottom:2px;
right:-33px;
}
.arrow2 {
border-color: #eee #eee transparent transparent;
border-style: solid;
border-width: 17px 17px 17px 17px;
height:0;
width:0;
position:absolute;
bottom:2px;
right:67px;
}
//square gallery
.square{
border-radius: 20px;
border-style: solid;
border-width: 2px;
width: 200px;
height: 200px;
margin-top: 60px;
}
//iconbubble
.talkbubble {
width: 120px;
height: 120px;
background: red;
position: absolute;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 50px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
HTML below
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/app.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap/tab.js"></script>
<script src="js/jquery.fakecrop.js"></script>
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-pinterest-extension-installed="cr1.39.1">
<div class="container">
<div class="talkbubble"></div>
<div class="header clearfix">
<!--
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
-->
<h3 class="text-muted">Hi I'm...</h3>
</div>
<div class="jumbotron tab-content">
<div id="home" class="tab-pane fade in active">
<h1>CpBunni</h1>
<p class="lead">...and I'm an artist.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a cosplayer.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a nude model.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
</ul>
<script>
$(document).ready(function () {
// for a filled square thumbnail
$('.square img').fakecrop({fill: true, wrapperWidth: 200, wrapperHeight: 200});
});
</script>
<div class="row marketing">
<div class="col-sm-4">
<div class="square"><img src="resources/testimg.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg2.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg3.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg4.png" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg5.jpg" alt="..."></div>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./Narrow Jumbotron Template for Bootstrap_files/ie10-viewport-bug-workaround.js"></script>
<div id="scrollrail-vertical" class="disabled" style="width: 12px; border-left-width: 1px;"><div id="scrollbar-vertical" style="visibility: hidden; border-radius: 5px 7px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; height: 1015px; top: 2px; opacity: 0;"></div></div><div id="scrollrail-horizontal" class="disabled" style="height: 12px; border-top-width: 1px;"><div id="scrollbar-horizontal" style="visibility: hidden; border-radius: 14px 10px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; width: 1916px; left: 2px; opacity: 0;"></div></div><div id="window-resizer-tooltip"><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div></body>
</html>
See this fiddle
The trick is this:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
...your image markup here...
</div>
<div class="col-md-9">
...
</div>
</div>
I've set it to be like that from md up. You might want to make use of hidden-* for the image column at lower widths as what you're doing from a design point of view would look strange at mobile widths.
The absolute position is a right way for your issue. But you have to use another properties instead of float:
top
bottom
left
right
For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the margin edge of the element and the edge of its containing block.
For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.
You can apply this properties directly to the bubble instead of the before: pseudo-element.
Use /* */ instead of // for comments in CSS. For example:
/* iconbubble */
.talkbubble {
position: absolute;
top: 100px;
left: 20px;
z-index: 20;
}
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Media Queries */
#media (min-width: 1200px) {
.container {
width: 800px;
}
}
#media (min-width: 992px) {
.container {
width: 800px;
}
}
/* Header Edits */
.jumbotron {
margin-bottom: 0px;
h1 {
color: red;
}
}
/* upsidedown tab edits */
.tab-content {
padding: 10px;
border: 1px solid #ddd;
border-bottom: 0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: 0;
margin-top: -1px;
margin-left: 32px;
width: 71px;
white-space: nowrap;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
background-color: #eee;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #eee;
border: 1px solid #ddd;
border-top-color: transparent;
}
.nav-tabs > li.active > a {
background-color: #eee !important;
}
.arrow {
border-color: #eee transparent transparent #eee;
border-style: solid;
border-width: 17px 17px 17px 17px;
height: 0;
width: 0;
position: absolute;
bottom: 2px;
right: -33px;
}
.arrow2 {
border-color: #eee #eee transparent transparent;
border-style: solid;
border-width: 17px 17px 17px 17px;
height: 0;
width: 0;
position: absolute;
bottom: 2px;
right: 67px;
}
/* square gallery */
.square {
border-radius: 20px;
border-style: solid;
border-width: 2px;
width: 200px;
height: 200px;
margin-top: 60px;
}
/* iconbubble */
.talkbubble {
position: absolute;
top: 100px;
left: 20px;
z-index: 20;
width: 120px;
height: 120px;
background: red;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 50px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
<div class="container">
<div class="talkbubble"></div>
<div class="header clearfix">
<!--
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
-->
<h3 class="text-muted">Hi I'm...</h3>
</div>
<div class="jumbotron tab-content">
<div id="home" class="tab-pane fade in active">
<h1>CpBunni</h1>
<p class="lead">...and I'm an artist.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a cosplayer.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a nude model.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
</ul>
<div class="row marketing">
<div class="col-sm-4">
<div class="square"><img src="resources/testimg.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg2.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg3.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg4.png" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg5.jpg" alt="..."></div>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->