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>
Related
I want to place the picture neatly in the middle and to the left of the of the box and the font in the middle of it. However, when I mess around with the margins and padding, it doesn't work out the way I want it to.
Here is my CSS and HTML for it.
CSS
.wrap {
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
margin: auto;
}
.make-center {
text-align: center;
}
.media-content {
font-size: 100px;
}
.card {
margin-bottom: 15px;
margin: 150px auto auto auto;
width: 2000px;
border-color: #1abc9c;
}
.card-content {
width: 3000px;
height: 200px;
}
.wrapper {
/* border-bottom: 10px solid #1abc9c; */
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0px 10px 20px -6px #1abc9c;
border-radius: 100px;
margin: 200px auto;
background: white;
width: 50%;
height: 150px;
padding: 40px 20px;
}
.celeb-name {
padding: 5px 10px 10px 5px;
}
The .celeb-name does not place the celebrity's name in the middle when I include the picture and the picture becomes deformed when I use the 'padding' feature in CSS.
HTML
<div class="star-list" id="star-box">
<div class="star-list" id="star-box">
<div class="card" data-name="${name}\">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="https://api.buzzanglemusic.com/images/artists/1374"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<p>1. DRAKE</p>
</div>
</div>
</div>
</div>
</div>
</div>
I would utilize CSS Flexbox.
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid green;
border-radius: 500px;
width: 200px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 6px 1px rgba(109, 103, 104, 0.88);
}
.celeb-img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-left: 5px;
}
.celeb-name {
margin-left: auto;
margin-right: auto;
font-size: 1rem;
text-transform: uppercase;
}
<div class="container">
<img class="celeb-img" src="https://api.buzzanglemusic.com/images/artists/1374" alt="Placeholder image" />
<p class="celeb-name">1. Drake</p>
</div>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
margin-top: 25%;
box-size: border-box;
}
.star-list {
display: flex;
align-items: center;
padding: 5px;
width: 200px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0px 10px 20px -6px #1abc9c;
background-color: #fff;
border-radius: 100px;
height: 40px;
}
.star-list > img {
height: 40px;
border-radius: 50%;
}
.star-list > .media-content {
width: 100%;
display: flex;
justify-content: center;
font-weight: 600;
font-size: 20px;
}
<div class="star-list" id="star-box">
<img src="https://api.buzzanglemusic.com/images/artists/1374" alt="Placeholder image" />
<span class="media-content">
1. DRAKE
</span>
</div>
use flex-box to align the items center
code :
display : flex;
align-items : center;
And you don't have to use that much of divs, try to make it cleaner
Above is the improved code, if you want
You can achieve this using CSS flexbox, try making div media as flexbox and then aligning its inner content as you want like,
.media{
display:flex;
align-items:center; /* will make the inner divs align vertically centered */
}
.media-left{
width:40%; /* or as required */
}
.media-content{
width:60%; /* or as required */
font-size: 100px;
}
You can get the desired output by using CSS Flexbox.
In your case, add flex to the container(media) which is wrapping both image and name.
.media{
display:flex;
justify-content:space-between;
align-items:center;
}
If you're willing to use Bootstrap, then you could utilize some of the many powerful classes within the framework.
For instance, you could make use of the flexbox classes and the grid system, as well as the responsive image classes.
HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap-rounded d-flex">
<div class="d-flex flex-row align-self-center justify-content-start">
<div class="col-6 d-flex align-self-center">
<img src="https://api.buzzanglemusic.com/images/artists/1374" class="img-responsive rounded-circle col-7 col-md-4 col-sm-5 col-xs-12" alt="placeholder image" />
</div>
<div class="col-md-12 d-flex justify-content-end align-self-center text-right card-text">
1. Drake
</div>
</div>
</div>
CSS:
.wrap-rounded {
width: 100%;
height: 115px;
border: 2px solid #7FFFD4;
border-radius: 40px;
-webkit-box-shadow: 12px 10px 10px 0px rgba(127, 255, 212, 1);
-moz-box-shadow: 12px 20px 01px 0px rgba(127, 255, 212, 1);
box-shadow: 12px 10px 20px 0px rgba(127, 255, 212, 1);
}
.card-text {
padding-right: 10%;
font-size: 2em;
font-weight: bold;
font-style: italic;
}
Codepen Example here.
Snippet:
.wrap-rounded {
width: 100%;
height: 115px;
border: 2px solid #7FFFD4;
border-radius: 40px;
-webkit-box-shadow: 12px 10px 10px 0px rgba(127, 255, 212, 1);
-moz-box-shadow: 12px 20px 01px 0px rgba(127, 255, 212, 1);
box-shadow: 12px 10px 20px 0px rgba(127, 255, 212, 1);
}
.card-text {
padding-right: 10%;
font-size: 2em;
font-weight: bold;
font-style: italic;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap-rounded d-flex">
<div class="d-flex flex-row align-self-center justify-content-start">
<div class="col-6 d-flex align-self-center">
<img src="https://api.buzzanglemusic.com/images/artists/1374" class="img-responsive rounded-circle col-7 col-md-4 col-sm-5 col-xs-12" alt="placeholder image" />
</div>
<div class="col-md-12 d-flex justify-content-end align-self-center text-right card-text">
1. Drake
</div>
</div>
</div>
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">
I've made 2 boxes that are blue and have a white text color, and when you hover over them, the text color changes from white to blue and the box color changes from blue to white. That part works. But when I hover below the text from the box, the text color changes back to blue even though I'm still with my mouse on the box 'href'.
Have a look at my code:
body {
background: #DCDCDC
}
a {
text-decoration: none;
}
#galaxy {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
#galaxy:hover {
background-repeat: no-repeat;
background-color: #FFF;
}
#test {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
#test:hover {
background-repeat: no-repeat;
background-color: #F00;
}
.button-title-text {
text-align: center;
color: #FFF;
font-size: 16px;
padding-top: 100px;
}
.button-title-text:hover {
text-align: center;
color: rgb(37, 100, 165);
font-size: 16px;
padding-top: 100px;
}
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="galaxy">
<div class="button-title-text">
<h1>Galaxy</h1>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="test">
<div class="button-title-text">
<h1>test</h1>
</div>
</div>
</a>
</div>
Any help would be appreciated. Thanks in advance.
Consolidated your code and fixed the issue.
You had identical styles for your #galaxy and #test boxes (until they're hovered). I added a class called .box to both of them and moved the styles to that selector.
The issue in your post was occurring because you had a :hover rule on the box itself and the text inside. The hover on the text was behaving as written - it was only activating when you hovered directly over the text.
To fix this, I removed the color: attribute from your .button-title-text element, allowing it to inherit the color from the .box.
Then I added a .box:hover rule that changes the text color, which takes effect when either box is hovered.
Hope this helps!
body {
background: #DCDCDC
}
a {
text-decoration: none;
}
.box {
width: 400px;
height: 300px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin: 0 auto;
margin-top: 100px;
color: white;
font-size: 30px;
border-radius: 10px;
}
.button-title-text {
text-align: center;
font-size: 16px;
padding-top: 100px;
}
.box:hover {
background-color: #FFF;
color: rgb(37, 100, 165);
}
#test:hover {
background-color: #F00;
}
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="galaxy" class="box">
<div class="button-title-text">
<h1>Galaxy</h1>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="#">
<div id="test" class="box">
<div class="button-title-text">
<h1>test</h1>
</div>
</div>
</a>
</div>
My problem is simple, my Bootstrap cols are not lining up in the middle of the div.
Have a look at my code:
<!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">
<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="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css"></style>
</head>
<body>
<div id="boxes">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box1">
Hello
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box2">
World
</div>
</div>
</div>
</body>
</html>
#boxes {
margin: 0 auto;
width: 100%;
max-width: 1000px;
height: 600px;
background-color: rgba(79, 27, 184, 0.29);
}
#box1 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
#box2 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
I've put col-lg on 6, which should be 50% of the div per box. But the boxes are clearly not in the center of their cols. Any help with this would be appreciated. Thanks.
If you change your margin in your box2 like this, is it what you're looking for ?
#box2 {
margin: 50px auto 0 auto;
}
if your are working with bootstrap 4 wrap your code with .row fiddle
#boxes {
margin: 0 auto;
width: 100%;
max-width: 1000px;
height: 600px;
background-color: rgba(79, 27, 184, 0.29);
}
#box1 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
#box2 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="boxes" class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box1">
Hello
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box2">
World
</div>
</div>
</div>
</body>
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 -->