I am looking to align a bandsintown widget and a picture of my band. The widget & picture should resize based on what the browser size is. I have researched and tried different ones, but am unable to get it to work.
Here is the bandsintown widget code:
<div id="wrap" class="section" id="news">
<script src="https://widget.bandsintown.com/main.min.js"></script>
<a class="bit-widget-initializer" data-artist-name="Band Name" data-display-past-dates="true" data-widget-width="50%" data-font='Frente H1'></a>
<img src="/images/pic.jpg">
</div>
All you need to do is float both the .bit-widget-container (generated by the script) and your desired image to the left:
.bit-widget-container, #news > img {
float: left;
}
<div class="section wrap" id="news">
<script src="https://widget.bandsintown.com/main.min.js"></script>
<a class="bit-widget-initializer" data-artist-name="Band Name" data-display-past-dates="true" data-widget-width="50%" data-font='Frente H1'></a>
<img src="http://placehold.it/200">
</div>
Keep in mind that your snippet has duplicate IDs (wrap and news), which is invalid markup. As such, I've changed your wrap ID to a class in the above snippet.
You also used a relative link to an image, which I've replaced with a placeholder so that you can see the image aligns correctly.
Hope this helps! :)
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.
I'm trying to model the following design with Bootstrap.
Currently I've found a method to do this using "carousel-caption" class from bootstrap CSS but it doesn't seem to working as expected.
The html looks like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1000x550" alt="test" class="img-responsive">
<div class="carousel-caption">
<h1>Text word1 word2 superlative.</h1>
</div>
</div>
</div>
</div>
You can see an example of on https://jsfiddle.net/3vf5gog4/2/
This produces a single title but the image doesn't stretch and the title is not vertically centered and I can't figure out how I should be adding another title beneath the current carousel title
This is one of those things with bootstrap that can trip you up. So the .container-fluid class has a padding around it and so to the other grid elements so thats causing the issues with the stretch. Vertically centred elements in CSS can be a pain there is one good method I've seen on it but I typically just eye ball the percent and add some precent
I've edited your fiddle to take out the bootstrap padding and centre that text.
https://jsfiddle.net/3vf5gog4/5/
Try this :
.carousel-caption{
postion:absolute;
top : 20%;
}
I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.
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>
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help