I have the following part of the form:
<div class="d-grid mb-3">
<button class="btn btn-primary mb-3" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
Button rstpss is conditional and appears only in case user has entered wrong login or wrong password at the same time.
Both buttons currently use 100% of div's width and placed strictly one below another.
But I want the rstpss button to be placed below the userlogin one only in case there is no available predefined div's width to place them one next to another keeping in mind they both will take all available div's width, be the same width and contain the same space between them as their bottom margins (the same margin is used with the input above the buttons).
When only userlogin button is shown it must take 100% div's width.
I suppose it shouldn't be very difficult and must be clearly described at the Bootstripe's documentation, but I've started using Bootstrap just yesterday and just don't know what to look for. Any example I have found doesn't answer my question.
A clear example will help me greatly to understand how to deal with such cases in the future. And what to search at the Bootstrap's documentation, too.
Here is an example of what I am trying to achieve:
Try this:
<div class="d-flex mb-3">
<button class="btn btn-primary mb-3 flex-fill" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3 flex-fill" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
This should expand the first button to a 100% if the second one doesn't exist, and keep both buttons on same line with equal width if both exist.
I have made the following pile of tags. It does the job while it seems to be not the most elegant one.
<div class="row" style="--bs-gutter-x: 1rem">
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" type="submit" name="userlogin">Click or tap here to login</button>
</div>
</div>
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" formaction="/reset.php" name="rstpss">Click or tap here to recover your password</button>
</div>
</div>
</div>
The default value of the row class is 1.5rem. I have not found how to set the row class' size through predefined classes so I've made it 1rem with inline style to make the horizontal space between two buttons equal to vertical space between the form's elements with mb-3 class applied.
There is also inline style white-space: nowrap for the button tag to prevent its height growing instead of putting the long texted button to the next line.
I've used the first example from the Bootstrap's Grid system except the outer div with the container class as it prevents achieving my goal.
My code still appear to me as an overproduced and incorrect one so I can't accept this answer as the answer.
The correct solution is still highly appreciated.
Related
img of what is actually happening
Basically, there is a div which its text is exceeding its maximum width. Ive already tried to set max-width:100% (to see if it sets the maximum width to parent's full width) in more or less 10 parent divs but the problem is still happening. Also, ive already looked for some similar posts in here and most of them tell me to use white-space:normal but it actually breaks a new line for every word.
In the example below, you can find 3 fields, the first one is the "normal" one, and the others are with white-space:normal.
The source code doesn't seem to have any problems with it:
<fieldset data-type="horizontal" *ngIf="poll.type == 'Opção'">
<label translate>Escolher Opção:</label>
<div class="row">
<div class="btn-group form-vote" data-toggle="buttons">
<div class="btn btn-block" *ngFor="let option of poll.options" [ngClass]="{'active': isChosenOption(poll.pollId, option.optionId)}">
<div class="btn-circle btn-success" (click)="registerOptionVote(poll.pollId, option.optionId)">
<i class="fa" [ngClass]="{'fa-check': isChosenOption(poll.pollId, option.optionId)}"></i>
<div style="white-space: normal;"> {{option.description}} </div>
</div>
</div>
</div>
</div>
</fieldset>
JSFiddle: https://jsfiddle.net/cadorealves/9yhLxmz6/
Problem the second div get witdh of btn-cirlce.
You should move out the div
<div style="white-space: normal;"> {{option.description}} </div>
of <div class="btn-circle btn-success"
Set .btn-circle and .description as inline-block
Demo https://jsfiddle.net/viethien/z87ar50e/5/
I have a Bootstrap 3.0 application and inside a form I have the following code:
<div class="panel-body">
<div class="row">
<h5>Keywords</h5>
<div class="form-control" style="padding-bottom:40px;">
<div class="col-md-10">
<label>Declaratively walpurgisnacht station wellesley unsmudged cystomatous transfuse pecos nonconservative cocainise seaway unblasted gainsaid prewhipped. Adenomatous tzarevna fustily opelika counterblow balaamitical frogmouth damaskeening orthopneic carriable palaeontology postmyxedemic grandsire retouchtracing. Floor saturnalia bagwork semiacid drawl unregal cartouch predestinating curses traymobile quixotism antithesis fourpenny reshine. Gleamingly mongoloid ectrodactylous endostosis chromophil presagefully titillate cruise proairplane curaao montanan untappable flavius unintercepting. Gotha sarape halfpaced winnipegosis aphasia parotidean hydrate hatchetlike nonignitable shockingly changeable animi feces coerce</label>
</div>
<div class="col-md-2">
<button class="btn btn-primary waves-effect waves-light" style="display: inline-block; width:80px" data-step="1">
Edit
</button>
</div>
</div>
</div>
</div>
The result is the following image.
Here is the form-control style:
If you see my <label> has a lot of words and the problem I have is that the round background rectangle is not growing with the Word Wrap.
I marked with red the round background rectangle that Im talking about.
How can I make that background to grow in the same ratio?
Thanks
You are not using the bootstrap classes in their intended way
.form-control has a fixed height. You could either change .form-control to not have a fixed height or add a custom class to change the height of the element. I recommend looking into the intended use of this and other bootstrap classes here:
https://v4-alpha.getbootstrap.com/components/forms/
You have to edit the .form-control class so that it doesn't have a fixed height. Here's a demo, where I added height:auto to the .form-control class.
https://jsfiddle.net/wc3f1h0m/
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="btn-block">
<input style="max-width:170px;" type="submit" class="appBtn btn btn-primary" value="App Button One"
/>
<input style="max-width:170px;" type="submit" class="appBtn btn btn-primary"
value="App Button Two"
/>
</div>
</div>
</div>
I have two button underneath a form in a btn-block. While the form is wide enough, I would like the buttons side by side (stacked horizontally), and roughly centered under the form.
When the screen width shrinks, eventually the buttons will stack vertically (due to btn-block), but at this point I would like to align them left, rather than their initial center position.
Currently I am just offsetting them using another column, so I would like that left column to dissapear when they stack vertically, or some other way of achieving this. I was thinking of having another with a certain width but zero height, but when I tried that the div always stays to the left of the first button, it does not get stacked vertically alongside the others.
How can I center the buttons when they are stacked horizonally, but left align them when they switch vertically?
More generally, how can I apply rules based on this "switch" - do the elements get a different class when they switch to stacking vertically I can apply more rules on?
TIA
I don't know that you can make them automatically align left once they no longer fit side by side but you can if you define a particular media query break point for them to do that at. So because you've got a max-width on the buttons of 170px each, i've applied the media query to keep them left aligned up until 320px. Seems to hit the mark pretty well.
https://jsfiddle.net/wc3f1h0m/15/
key changes are:
1) get rid of the col-xs-1 div as the buttons are centered now anyway so its not doing anything.
2) adding a new class "btn-alignment" to the "btn-block" so that we can apply our own custom css to it.
.btn-block.btn-alignment {
text-align:left;
}
#media(min-width:320px) {
.btn-block.btn-alignment {
text-align:center;
}
}
Also changed your h5's to labels which is what you should use to define inputs on forms.
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-12">
<input class="btn btn-primary btn-block" value="Button One">
</div>
<div class="col-xs-6 col-sm-6 col-md-12">
<input class="btn btn-primary btn-block" value="Button Two">
</div>
</div>
Or this inverse:
<div class="row">
<div class="col-md-6">
<input class="btn btn-primary btn-block" value="Button One">
</div>
<div class="col-md-6">
<input class="btn btn-primary btn-block" value="Button Two">
</div>
</div>
Is this the sort of thing you are looking for? Was kind of confused how the whole form was wrapped in a col-md-4 as to get the behaviour you were looking for. Hopefully one of these
'<style type="text/css">
/*Use the following code*/
#media(max-width:320px) {
.btn-block .appBtn{
display:block;
margin:10px auto;
}
}
/*-----or---------*/
#media(max-width:480px) {
.btn-block .appBtn{
display:block;
margin:10px auto;
}
}
</style>'
I am trying to take the Bootstrap justified grouped buttons style and create divs that will appear like grouped buttons will be just result in non-link divs. I am using it as a "steps" representation, so button one would be highlighted with text symbolizing that we're on step 1, or button two would highlight when you're on step 2. Please see my attached image here for an example.
The buttons I screenshotted work wonderfully as stage indicators, but I don't want users to be confused and think they should be linking to something. I've tried replacing the button input with spans as follows:
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<span class="btn btn-default">Q&A</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-info">Proposal Submissions</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-default">Best & Final Offers</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-default">Final Selection</span>
</div>
</div>
I don't know if this is even the way I should be going about this, or if there's a standard way to do this with divs. I also tried using divs with the btn classes instead of buttons or spans, same result, it still becomes a link. I am happy to keep using the button classes so long as I can remove the link effect when a cursor is hovered over it.
Thanks for your help.
I would suggest you to see if bootstrap has a component like breadcrumb, because that makes more sense for your use case. But if you want to hack something quickly, you can override btn classes. You could give the parent a class like c-steps and then override the styles for the btn groups:
html
<div class="btn-group btn-group-justified c-steps" role="group">...
css
.c-steps .btn-group,
.c-steps .btn.btn {
text-decoration: none;
/* other override styles */
}
I've tried everything I can think of and I cannot reproduce this form in this way:
I want to make it to look exactly like in the picture but I have the following problems:
The buttons and the last text input are not staying inline.No ideea how to fix this and possibly resize the other ones so they look like in the picture.
I cannot use specific fonts already imported into html(I've tried adding them in css with the !important function, still doesen't work)
Problems with the button color.
I really have no more ideeas left.I am very new to all this.
Can someone help me make the modifications necessary to reproduce the form in the picture?
Here is what I have now:
http://www.bootply.com/x59KVak
Wrap the two elements in a div and float them left and right: BOOTPLY
<div>
<input style="float:left">
<button style="float:right"></button>
</div>
Just add div parent for input and button and make float left,right...here is fixed, if i understand good.
http://www.bootply.com/TGuWOd5ZET
User this for your last line button and text, tested it and found working
<div class="form-group row">
<div class="col-lg-12">
<label for="Camera2">Camera dorita</label>
</div>
<div class="col-lg-6">
<input class="form-control" id="camera" type="text">
</div>
<div class="col-lg-6">
<button type="submit" class="btn btn-warning">Cauta</button>
</div>
</div>