I have a logo image in my header and I have the standard code in there, the browser source code even shows it, but the link isn't going anywhere. Please see below:
<img class="img-responsive hidden-xs" src="img/sitewide-images/logo.png" width="106" height="106" alt=""/>
Here is a link to it live on a testing server: http://wsieworksstaging.com/ptmw/index.html
Bootstrap should be container > row > column
You didn't place those columns within a row, so the row below isn't clearing and is overlaying it. Try this:
<div class="container">
<div class="row"> <!-- wrap with a row to force the content below to clear -->
<div class="col-md-2 col-sm-2">..</div>
<div class="col-md-10 col-sm-10">..</div>
</div>
<div class="row">
<nav class="navbar navbar-default navbar-inner" role="navigation"> .. </nav>
</div>
</div>
From The Documentation
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Because your div with the class row is sitting on top of it and blocking any clicks. Add clear:left to have it get out of the way, and the link will become clickable.
You can also try giving that anchor an absolute position and a z-index value.
a[href="index.html"] {
position: absolute;
z-index: 1;
}
Related
I've created a couple of sample product. Right now I able to display it just fine, but somehow the product is shown vertically. I would like it to appear horizontally once it max out the floating space next thumbnail can move onto the next line.
I've created a floating container and put my *ngfor inside it. Anything that I'm missing?
Here is my html code,
<div class="text-center m-t-lg">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<h1>Public Shared Diary</h1>
<div class="container-fluid">
<div *ngFor="let pub_diary of diaries_temp;let i = index" [attr.data-index]="i">
<div class="container-fluid">
<div class="thumbnail" style="min-height:320px;height:320px;min-width:220px;width:220px;">
<h2>Project title = {{pub_diary.project_name}}</h2>
<img style="min-height:150px;height:150px;" src="{{pub_diary.project_image}}">
</div>
</div>
</div>
</div>
</div>
and here is the current output. The red marking is where I would like the thumbnail to be.
Add
.thumbnail {display: inline-block; vertical-align: middle;}
I've found the answer. I need to create a new div to include a
Issue solved.
See this Fiddle: https://jsfiddle.net/5aw2w9w6/
The code is like this:
<nav class="navbar navbar-default navbar-fixed-top" style="background-color:#FF0000">
<div class="container">
<div class="row" style="width:100%;display:table; table-layout:fixed; vertical-align:middle">
<div class="col-xs-5 col-sm-2"style="display:table-cell; vertical-align:middle">
<!-- content -->
</div>
<div class="col-xs-2 col-sm-8" style="display:table-cell; vertical-align:middle">
<!-- content -->
</div>
<div class="col-xs-5 col-sm-2"style="display:table-cell; vertical-align:middle;text-align:right">
<!-- content -->
</div>
</div>
</div>
</nav>
2 things are broken:
1) The width:100% on the row is not working. If you do an inspect element in the fiddle, you'll see that the navbar and container stretch the full width of the screen, but the row does not. This is also made evident in that the last col-xs-* has a text-align:right. As you can see in the fiddle, there's still a gap between the cart button and the right edge of the screen
2) The vertical-align:middle is not working. If it were, I'd expect the cart button to not touch the top edge of the screen, and instead be aligned middle (vertically) relative to the logo image (white, it's the content in the first section)
The check your container it has a max-width of width: 750px; that's why it doesn't touch the edges of the screen
For the vertical align middle please set height to your table row and the other reason why ain't work is because the
float:left of every column try to remove it and see it will work fine.
https://jsfiddle.net/nzjqua4s/1/
I want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after
I need to divide the browser window into two fluid rows so that regardless of size, they are stretched across the screen. In the first row i need to add different columns which should be centered automatically. Basically it looks like this:
The problem is that I can not center cols in first row and rows are not stretch to the browser height. My code looks like this:
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
</div>
You can use offset to center div
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-3 col-md-3">.col-md-1</div>
<div class="col-md-3">.col-md-1</div>
</div>
</div>
And you can change padding for ajust space between blocs.
See on fiddle http://jsfiddle.net/JtzE6/
Also take a look at the Alignment Classes on twitter bootstrap documentation (Twitter Bootstrap Documentation). You should be able to apply these to any element tag in html. It worked for me.. Hope this helps..
I have a Bootstrap 3 grid.
I need to add a header image that's 960 pixels wide.
However, if I add it to a row, the usual padding of 10px on a column "offsets" my image since it no longer "fits":
I know how to force this to work, but I was wondering if I am missing some modifier class in BS3 to make this work.
And, yes, I know I could use a css background-image but the client wants an image there.
Add a class to your CSS that removes the margin to make full-width image within the column and then add that class after the column.
.bosom-none {
margin-right: -15px; // Removes the right gap
margin-left: -15px; // Removes the left gap
}
<div class="container">
<div class="row">
<div class="colum-md-6 bosom-none">
<img src="your-image.jpg">
</div>
</div>
</div>
You probably have something else messing it up because as you can see, a container, row and then a img gives you no margins.
<div class="container" style="background:green">
<div class="row">
<img src="http://www.placehold.it/150x150">
</div>
</div>
http://jsfiddle.net/dBNwq/1
Here's the whole page
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="background:green;">
<div class="row">
<img src="http://www.placehold.it/960x150">
</div>
<div class="row" style="background:red;">
Some other content
</div>
</div>
</body>
</html>
This is a problem I've encountered many times with Bootstrap. You basically have three options:
If you're placing the image inside a column (e.g. .col-sm-12) which is inside a .row, you'll have to apply a negative margin to the image or a parent container equal to the column's padding: http://codepen.io/anon/pen/xEGkaQ
You could also instead make the image (or a wrapping div) a direct child of the .row but Bootstrap discouraged use to do this.
You can move the image outside the .col/.row all together, give it it's own .container and rid of that container's padding: http://codepen.io/anon/pen/WGvAap.
I usually go for option #1.
Please note that this does not answer your question. It meant to write this for future reference for other people encountering the same problem and do not know how to force this to work.
The actual answer to your question: no, Bootstrap does not offer such a modifier class.
Simply replace div class="container" with div class="container-fluid"
and that's it !
You can also create a class that will cover the container it is in...
.heroLg {
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
}
Then add the class to your image.
put the image into a span12
<div class="row">
<div class="span12">
<img src="image.jpg" />
</div>
</div>