I am using Bootstrap and I came across the following error in displaying some buttons:
The HTML code is the following:
<div class="row" style="margin-top: 20px">
<div class="col-lg-6 text-left">
<button class="btn btn-primary profile-button">Save</button>
</div>
<div class="col-lg-6 text-right">
<button class="btn btn-primary profile-button">Reset</button>
</div>
</div>
The CSS for the custom class is:
.profile-button {
min-width: 125px;
}
The error only occurs when I am resizing the browser width. The screenshot attached is when the browser has half the width of the monitor (so 540px, given my resolution). I believe the display error starts at the 768px width value. The resolution I am currently using is 1920x1080.
I've tried wrapping the row inside a container div and also inside of a div that had both container and container-fluid classes.
Just add col-xs-6 class to both div
<div class="row" style="margin-top: 20px">
<div class="col-lg-6 col-xs-6 text-left">
<button class="btn btn-primary profile-button">Save</button>
</div>
<div class="col-lg-6 col-xs-6 text-right">
<button class="btn btn-primary profile-button">Reset</button>
</div>
</div>
DEMO
Bootstrap Grid
Bootstrap puts columns one under the other on smaller devices... It's likely that your columns are becoming full width and stacking, instead of staying at half the size. This is the standard behaviour.
If the buttons must remain side by side, I would recommend using your own classes and floating them, ensuring the max-width is 50%
Related
I'm using Bootstrap for the first time. I'm making my application responsive for normal laptop screen as well as for iPad Mini(768 X 1024) and iPad Air(820 X 1180). Here is my HTML:
<div class="row">
<div class="col-sm-12 col-md-6 text-start">
<span class="col-md-2" *ngFor="let i of data" > <!-- dynamic no. of dropdowns -->
<p-dropdown styleClass="dropdown" [options]="i" optionLabel="name"></p-dropdown>
</span>
</div>
<div class="col-sm-12 col-md-6">
<button pButton label="reset" class="reset-button p-button-outlined"></button>
<button pButton label="apply" class="apply-button" (click)="showDialog()"></button>
</div>
</div>
This is the normal screen:
And this is when I changed device to iPad Air:
The problem is that dropdowns are one below the other and same issue is there with the button. Is it possible to show them in separate rows. I mean All dropdowns in one row and all buttons in the next row. Is it possible? Please help.
its because you using col-md-6 instead col-md-12. In bootstrap col are divided by 12, it means in medium device the size of col is 6/12 or 50%. the children button and dropdowns forced to go down because the width is narrower than the element.
maybe you can try to add some another class to set width in medium device and large device like this.
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6 text-start">
<span class="col-md-2" *ngFor="let i of data" > <!-- dynamic no. of dropdowns -->
<p-dropdown styleClass="dropdown" [options]="i" optionLabel="name"></p-dropdown>
</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<button pButton label="reset" class="reset-button p-button-outlined"></button>
<button pButton label="apply" class="apply-button" (click)="showDialog()"></button>
</div>
</div>
but you still must set the buttons and dropdowns width. if you not set it, it will forced to go down.
you can check the default breakpoints here https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints
In your current situation, you're breaking the row into 2 columns at md or up. You'll probably need to break it at lg for your desired output for iPad.
You also need to add the row class to your inner div for its children to break into columns. Also you don't need to write col-sm-12 to start with. The default is 12.
Something like:
<div class="row">
<div class="col-lg-6 text-start row">
<span class="col-md-2" *ngFor="let i of data" > <!-- dynamic no. of dropdowns -->
<p-dropdown styleClass="dropdown" [options]="i" optionLabel="name"></p-dropdown>
</span>
</div>
<div class="col-lg-6">
<button pButton label="reset" class="reset-button p-button-outlined">
</button>
<button pButton label="apply" class="apply-button" (click)="showDialog()"></button>
</div>
You'd probably need to apply more classes to the button divs to align them properly. I'd recommend adding a JSFiddle so we can debug better.
I have web page where whole page is divided in two parts left and right. The partition is shown below. In the left section, I have two side by side buttons and one of the button having long text string as 'Edit Categories'. This button overflows the text and eventually collapses and stacks on top of another. I am developer but i am not really into designing. Tried using flex but seems not working. The expected behavior for this one is two buttons should be side by side in large screen and stack in medium small and extra small resolution. I also tried putting col-sm, col-md, col-xs on my divs which contains <a> but noluck.
<!-- Start Left Section -->
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 animated fadeInLeft categories-lst">
<div class="row">
<div class="col-lg-6">
<a onclick="toggleLoader('show')" href="/Rec/EditCategories" class="btn btn-default btn-block"><span><i class="fa fa-pencil"></i>Edit Categories</span></a>
</div>
<div class="col-lg-6">
<a onclick="showNewPost();" class="btn btn-default btn-block" id="showNewPost"><span><i class="fa fa-plus"></i> New Post</span> </a>
</div>
</div>
</div>
<!-- Start Right Section-->
<div class="col-lg-9 col-md-8 col-sm-12 col-xs-12 animated fadeInRight">
</div>
To achieve expected result, use below option
a{
white-space:normal !important;
word-wrap: break-word;
}
code sample - https://codepen.io/nagasai/pen/MVRwoN
I can't seem to understand this behavior:
CodePen demo
<div class="container-fluid buy-now">
<div class="row">
<div class="col-sm-offset-3 col-sm-6 text-center">
<button type="button" class="btn btn-primary btn-lg" id="buy-now-button" >BUY NOW FOR $400</button>
<button id="make-an-offer-button" type="button" class="btn btn-lg btn-info">MAKE AN OFFER</button>
</div>
</div>
</div>
Basically, the buttons stay next to each other until I get to about 1244px width when they stack on top of each other. Then, they go BACK to horizontal at about 768px. But then, at about 620px width, they go to stacked again.
Why is there such a "jumpy" behavior at seemingly random screen resolutions? According to the definitions I've set, these buttons should stay next to each other right until 768px (and below), when they go back to stacked mode.
You can replace the sm classes in the third line with xs so that it applies to all sizes:
<div class="col-xs-offset-3 col-xs-6 text-center">
This will result in only one horizontal/vertical break.
Here it is: https://codepen.io/anon/pen/QaMxPY
--
Second solution:
Erase col-xs-offset-3 col-xs-6 from that tag, resulting in
<div class="text-center">
This will center the buttons and only stack them when the screen becomes too narrow to have them side by side.
https://codepen.io/anon/pen/QaMxPY
--
Or use a smaller offset and a wider container class:
<div class="col-xs-offset-1 col-xs-10 text-center">
https://codepen.io/anon/pen/RxZBbx
--
And you can make the buttons smaller, by applying a different class to them (btn-sm instead of btn-lg) and changing their font-sizes:
https://codepen.io/anon/pen/mpMjyx
I am new to web development, particularly CSS and Bootstrap. I am struggling to center the set of 5 items in a Bootstrap row. Here is what I have:
<div class="container-fluid">
<div class="row text-center" style="border:2px solid green">
<div style="display:inline-block;float:none;vertical-align:top;margin-top:8px">My Label</div>
<div class="col-xs-2 col-sm-2 col-md-1"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button1</button>
</div>
<div class="col-xs-3 col-sm-3 col-md-2"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button2</button>
</div>
</div>
</div>
For the most part, it gives me the result I want in Firefox and Chrome. The controls are spaced a little and it is responsive -- the white space shrinks while the controls grow (in % of screen) as the screen gets smaller. Control widths are controlled via Bootstrap col-*-# classes. Though, IE seems to align the buttons at the bottom of the row for some reason. I'm not sure why.
Aside from defining custom CSS classes instead of style attributes, is this the correct/best way to achieve the result that I want? Or, is there a better way to do this in CSS or Bootstrap? It seems hackish to have to use vertical-align and margin to get the label to line up. Also, I started out using form elements and classes. But, that kept making things worse. What is the benefit of using the form element or downside to not using it?
I read numerous similar posts. But they all seemed to have something different enough that the solutions seemed to not fit what I am doing. I have a set of controls that I want centered as a unit. I do not want to simply snap them to the 12-column Bootstrap grid.
JSFiddle
You still can use a custom class when you need it :
.classname {
display: inline-block;
vertical-align: middle;
float: none;
}
I have the next code:
<div class="container-fluid">
<img src="images/w2.png" alt="W logo" class="center-block visible-xs-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
<h2 class="center-block visible-xs-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">This is h2 header</h2>
<div class="hidden-xs visible-sm-inline-block visible-md-inline-block visible-lg-inline-block pull-right">
<div class="row">
<img src="images/user.png" alt="User image" class="col-sm-3 img-circle">
<span class="col-sm-9">Non register user</span>
</div>
<div class="row">
<button type="button" class="btn btn default btn-large col-sm-6">Log in</button>
<button type="button" class="btn btn default btn-large col-sm-6">Register</button>
</div>
</div>
</div>
The above code just show a div which have inside it a image with 50x50px and a h2 and another floated div by the .pull-right class. My problem appear when the viewport size come to set more than extra-small size (xs); the floated div disappear in xs size (at this point everything works well) but later when the viewport come to be small (sm) or higher, the floated div appear in another line: just below from the img and h2.
How can I solve this? thank you.
Edit the question above:
The behavior which I'm looking for is that the div.hidden-xs appear only when the viewport have more size than extra-small size (xs) and also that it appear horizontally aligned to the right (right float) at the same line of img and h2.
Thank you
if <div class="hidden-xs visible-sm-inline-block visible-md-inline-block visible-lg-inline-block pull-right"> is troubling you, that is because you only put class hidden-xs. Because that class means only hidden if viewport is xs. On the other hand, you put visible-sm-inline-block and visible-md-inline-block, so of course that div appear below the img and h2.
reference: bootstrap
Why don't you try
<div class="hidden-xs pull-right">
EDIT:
reference: learnlayout
I think I've got the wrong concept before, sorry. I think your <img> and <h2> not inside the <div> with class visible-*-*.