Bootstrap pull-right only working at small width - html

I'm using Bootstrap to get some text and a button to appear on the same line on opposite sides of the screen. I'm using pull-right to bring the button to the right side of the screen, but it only works when the screen width is narrow. If I make it wider, the button moves next to the text. Here's a JSFiddle example and the relevant code:
<body>
<div class='container-fluid'>
<form class="form-inline">
<div class="form-group ">
<label>Some Text</label>
<button type="button" class="btn btn-primary pull-right">Some Button</button>
</div>
</form>
<div><p>The button only appears on the right side of the window when the width is fairly narrow, even though it has the Bootstrap 'pull-right' class.</p></div>
</div>
</body>
Is there a way to get the button to the right at all widths? Apologies, I'm not great with Bootstrap and CSS, so I'm sure this is an easy thing that I'm missing. Also, for what it's worth, this is for an Electron app, so it only needs to work in Chrome.
Thanks.

That's because it's wrapped in a form group div, which is only the full width on smaller viewports. You could get rid of the form group and just make the div width:100% in css.

Related

Bootstrap fixed navbar is wider then html and causes x-overflow

On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.

Bootstrap "close" Class: Button Sometimes Pushed out of Alert by Text

I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within.
Most of the time, it appears fine like so:
But at certain screen widths, just before the text in the alert wraps, the close button no longer has enough room at the end of the alert. In this image, I reduced the screen width by a few pixels compared to the previous image:
Here is my code snippet (edited to replace ASP.NET controls and code render blocks):
<div class="mt-0 mb-3 alert alert-primary">
<span class="text-here">foo</span>
<a class="close">
<span>×</span>
</a>
</div>
Good observation
The green div with display:inline-block; & width to 100% should resolve this...
working snippet below:
.fixedAlert {
display: inline-block;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="mt-0 mb-3 alert alert-success fixedAlert">
<span class="text-here"> FIXED ALERT... I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within</span>
<button type="button" class="close">
<span>×</span>
</button>
</div>
<div class="mt-0 mb-3 alert alert-primary ">
<span class="text-here"> ORIGINAL ALERT... I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within</span>
<button type="button" class="close">
<span>×</span>
</button>
</div>
</div>
Updated: in light of questioner's comment below
It turns out I'd simply removed one class too many while removing client-side dismiss functionality in favour of an ASP.NET click event postback.
The class in question, alert-dismissible, which is supposed to go alongside the alert class when a close button is present. It adds a larger amount of padding to the right side of the alert div, such that the floating close button/anchor always has enough room to sit at the top right. It also gives the close button some styling, including padding, such that it is nicely centered in that vertical space.
That also explains why my close button was at the bottom right instead. A comment on the main question that got deleted by its OP did point out that the close button looked like it was in a weird position.
Here is my new working code, without any additional custom classes needed:
<div class="mt-0 mb-3 alert alert-dismissable alert-primary">
<span class="text-here">foo</span>
<a class="close">
<span>×</span>
</a>
</div>

Div and Button element collision when floating

I have the following code
<div class="site-branding">
<h1 class="site-title">Test</h1>
</div>
<button class="menu-toggle" aria-controls="primary-navigation" aria-expanded="false">Navigation</button>
On my CSS, I put site-branding to float left and then menu-toggle to float right. On normal resolutions, the display is good. The brand is at the left side of the header and the menu-toggle is at the right but when the screen gets smaller, I want the menu toggle button to be below the site-branding div but the behavior that I got is that the menu-toggle is colliding with the site-branding div. Any ideas how to resolve this? thank you.
Float will ignore the element's collision box. You will have to use media queries to apply new CSS to your header when the screen is too small.
For example, if your branding is 300px wide and your toggle is 60px wide, you should use a media query of max-width: 360px, target another CSS file that will place the toggle below your branding image.
Here is an example of what does happens if you float these elements:
.headline {
float: right;
}
.btn {
float: left;
}
<div>
<h1 class="headline">Some link to your homepage</h1>
</div>
<button class="btn">some button</button>
(press fullscreen and resize your browser window)
The button element floats below the headline.
Now can you add the css classes for the button and site-title?
You will get the answer as you like if it rewrite it as follows. You just adjust the width of the div as you like.
Css
.FloatClass{float:left;}
Html
<div class="FloatClass">
<h1 class="headline">Some link to your homepage</h1>
</div>
<div class="FloatClass">
<button class="btn">some button</button>
</div>
All the best

How to have a button between a hr line - which then collapses elegantly

I would like a button between two hr elements with a bit of spacing wither side of the button and for this to remain the same when collapsing. I am using the Bootstrap framework.
I have got the current effect using the second answer from this question:
Add centered text to the middle of a <hr/>-like line
Therefore, my code is the same as what the answer provided. The first answer doesn't provide the spacing either side of the button.
Using media queries I am able to maintain the desired effect until I reach the 768px width break. Where this happens:
I can't continue to use media queries as I would have to apply them per pixel!
There must be an elegant solution to this? I'm assuming better use of columns and width percentages ?
Any help would be appreciated.
Using Bootstrap this solution should work fiddle:
<div class="container-fluid">
<div class="row">
<div class="col-xs-5">
<hr>
</div>
<div class="col-xs-2">
<a class="btn btn-md btn-primary">Add</a>
</div>
<div class="col-xs-5">
<hr>
</div>
</div>
</div>
You can use image for these lines by simply adding img tag:
CSS
img{
width:200px;
border:0;
height:10px;
background:url(http://goo.gl/bPZONP);
}
HTML
<div><img src="http://goo.gl/bPZONP">Button<img src="http://goo.gl/bPZONP"></div>
Demo
http://jsfiddle.net/qW6z9/

input width and button width with bootstrap

I have a form with an input and a button, styled with bootstrap.
I am using grid colums to give the input and the button their own width.
But it seems to change the input's width, I have to assign the col-* class to the div surrounding the input, whereas the button can receive the class on itself.
This ends up with the input not using the width I was hoping to give it.
<div class="container">
<div class="row">
<form name="search" role="search">
<div class="form-group col-sm-10 col-xs-12">
<input type="text" class="form-control input-lg" placeholder="Hey"/>
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg col-sm-2 col-xs-12" type="submit">
Search
</button>
</div>
</form>
</div>
</div>
Here is a jsfiddle where I added a line on the page as a reference to show up to where the input should go on the left. As you make the fiddle window smaller, the button goes under the input and reaches a full lenght, but the input still has a gap on both sides.
It is because the column classes are meant to wrap the elements and give them structure. If you give your button those classes, it will give that element the full width instead of the typical padding.
I moved the column classes onto the form-group instead and made a simple class called .btn-full that sets the width: 100%; and it achieves what you want.
http://jsfiddle.net/SXus5/
If you want the button to be the full width of the container, just add the class 'btn-block' to it. Any inputs inside of a form group will automatically expand to fill their container. Instead of adding the .col classes to the form group, add it to a div the form is contained in.
Here's a modified version of your jsfiddle with the input, button and line all the same width.
<button type="submit" class="btn btn-primary btn-lg btn-block">Search</button>