I'm making a login page with Twitter's Bootstrap, and I have a problem. I can't get a thumbnail to display where I want it to. You can see here: http://metamint.net/login
I want to put a thumbnail in the blank space next to the forms, but it won't work correctly; the forms are pushed down or moved off to the side. How can I do this correctly? Thanks.
Couple of problems.
You put the thumbnail in a row, so it's going to clear all floats.
You put the thumbnail first, which doesn't flow well with how bootstrap is set up.
Try something like this:
<div class="row">
<div class="span4">
.... form content here
</div>
<div class="span4">
.... thumbnail content here
</div>
</div>
Related
I've got a view with Angular (v.5) components, that uses Bootstrap for making the layout in the screen. So I've got various controls, one at the left, which uses most of the space (col-md-8), and two controls which are inline, in the right part (col-md-4).
Even trying col-sm I notice that in little displays (less than 1280px), the two components in the right, get overlapped one over the other. Check:
This is how it looks in big screens, the intended behavior
But one of them "mounts" over the other like this, when you make the window a little smaller
It even reaches this point...
But when you make the window really really small, it looks like this, which is fine in my opinion.
I want to do that one of these components, actually just puts in top or bottom side of the other, or simple get advantage of all the free space, instead of getting overlapped by the other like it currently does.
This is the current code of this header of my template, give it a look:
<div class="row">
<div class="col-md-8">
<segments [config]="config"></segments>
</div>
<div class="col-md-4 date-positioning">
<div class="row">
<div class="col-md-4 col-sm-4">
<granularity [config]="config" ></granularity>
</div>
<div class="col-md-8 col-sm-8">
<date-picker-wrapper [config]="config" [dateranges]="dateranges" [doubleDateRange]="true" ></date-picker-wrapper>
</div>
</div>
</div>
</div>
What you see are the granularity and daterangepicker components, the segments one is the component you see in the final image, which occupies most of the left side of the screen (but there's a reason for that)
So, any ideas on how to style this properly with Bootstrap, so this weird behavior doesn't happen?
So I have a parallax scrolling web page you can see it here I would like to be able to have a link my blog which obviously is not on the same page because its not a regular style web page. I have gotten the ribbon/banner to show up on a page that is not like my web page, you can see it here. I'm simply using a div to show it.
<div class="wrapper">
<div class="ribbonw"><div class="ribbon"><a href="google.com">Visit my blog </div>
</div>
</div>
How would I add it to the web page with out screwing up the page. I have done some research on how to make the banner, but I'm not sure how to add it to the page because when ever I do it just either doesn't show up on the page or is just a long white strip on the page.
So to summerize up what I'm asking is how do I add a banner like the one on the second link to my page I would like it to look something like the banner on this page.
To answer the question for future users what I had to do was add the code above into the actual first "slide" or first div. What I mean by that is that in a parallax scrolling page you have your pages split up into divs. So i just had to add my banner into the first div. It looks something like this:
<!-- begin slide 1 -->
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div class="wrapperr">
<div class="ribbonw">
<div class="ribbon">
Visit my blog
</div>
</div>
</div>
more content here
</div>
<!-- end slide 1 -->
as you can see I just had to add the content into the slide. I had it outside before therefore creating another slide.
I'm a newbie using bootstrap 3 for my website.
I'm trying to place an image next to some text, such that for large browser windows they sit horizontally side by side, but as the browser window is resized smaller, eventually they are stacked vertically (the image first, then the text below it).
Is this possible using HTML & CSS somehow?
You'll want to wrap them in a row and then col-spans. It should look something like this.
<div class="row">
<div class="col-md-6">
<img src="">
</div>
<div class="col-md-6">
<p>This is the text you want.</p>
</div>
</div>
Assuming you're referencing your stylesheets correctly, this should do the trick. You will find this pretty well documented: http://getbootstrap.com/css/#grid-example-basic
I am using Twitter bootstrap for my portfolio site. The fluid layout seems to work up to a certain point, but there are a few issues with the home page.
Once I go smaller than about 997px, the nav menu disappears entirely. It almost looks like it drops down below the header bar and is hidden, but I can't seem to get it to show. It should actually switch to the mobile menu and remain in the upper right corner.
Also once you get down to smaller screen sizes, the "About Me" and "Contact" sections of the index page overlap each other. I'm sure this has to do with my structure somehow, but cannot find the problem.
Any bootstrap experts know what might be causing these issues?
Here is a link to the test version of the site. http://theiamzone.com/kyle_hagler/portfolio-site
From the source code I view from the site,
I Found out that you lacked of jquery file.
<script src="//code.jquery.com/jquery-1.10.1.min.js">
Put it and see if the dropdown work.
And for the About Us and Contact Us part.
A method you can try is put container to wrap them all, read from here for more information.
http://twitter.github.io/bootstrap/scaffolding.html#layouts
From my point of view in about us section, try no to wrap the 2 span 6 column,
Use the following code instead.
<div class="row-fluid">
<div class="span12">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
Same situation happen on the contact us section,
the css class aren't assigned for them to work.
I am working on converting a twitter bootstrap theme into a wordpress theme and adding onto it.
I am having issues adding full width items into the theme. I have tried adding a slider plugin that is set to full width. Although when it is added it goes to a fixed width, the same happens if I add an image aswell. It seems all of the content in my page does this except for my header and footer.
Also it seems every time I add in anything to the page the page/footer gets messed up. I am still learning css though.
I am posting a link to the site to see if anyone can take a look and give me a hand.
http://goo.gl/8JUDA
It looks like you contained the element that you want to stretch the size of the window within a .container div.
.container is used in bootstrap for fixed layouts. Instead try using the .container-fluid class.
For example:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
Read more: http://twitter.github.io/bootstrap/scaffolding.html#layouts