I have 2 buttons:
<div class="row pt-20">
<div class="col-xs-12 col-sm-6 text-right pr-20">
<a href="{!! URL::action('TournamentController#create') !!}" type="button"
class="btn border-primary btn-flat text-primary disabled text-uppercase p-10 ">{{ trans('core.see_open_tournaments') }}
{{--( {{trans('core.soon')}} )--}}
</a>
</div>
<div class="col-xs-12 col-sm-6 text-left pl-20">
<a href="{!! URL::action('TournamentController#create') !!}" type="button"
class="btn btn-primary text-uppercase p-10">{{ trans('core.create_new_tournament') }}
</a>
</div>
</div>
What I would like to achieve is align right/left when resolution > xs, and align center when res = xs.
What is the best way to achieve it???
I was thinking remove text-right in div, and use media queries to do it in css, but I think there is more elegant way to do it, isn't it????
Tx!
Create a class called text-center-xs and add the appropriate styles to your custom stylesheet:
#media (max-width: 767px) {
.text-center-xs {
text-align: center;
}
}
Related
I'm developing an app with angular 9.
In my view I added magin in order to reduce the size of the form
<div class="row">
<div class="col-12 mb-4" *ngIf="!displayListCompanies; else companiesList">
<div class="card" style="min-height: 579px; margin-right: 200px; margin-left: 200px">
<div class="card-body justify-content-between align-items-center">
<div class=" company-welcome-logo">
</div>
<p class=" text-justify text-center font-weight-bold font-size-xlarge"><b>{{'company.welcome-abord' | translate}} {{ displayName }} !</b></p>
<p class=" text-justify text-center">{{'company.welcome-text1' | translate}} <br/> {{'company.welcome-text2' | translate}} </p>
<button class="btn btn-primary btn-lg btn-shadow align-items-center align-content" (click)="createCompany()">
{{ "company.create" | translate }}
</button>
</div>
</div>
</div>
<ng-template #companiesList>
Another magic element!
</ng-template>
</div>
<simple-notifications></simple-notifications>
On medium screen I want to keep the margin, but remove it on small device.
I tried to use bootstrap to achieve this without success
How could I do this ? Thanks in advance.
Use CSS media queries. Put the extra margins only in the min-width: XXXX section.
Like so...
<style>
#media only screen and (min-width: 1000px) {
/* For large screens: */
.card {margin-right: 200px; margin-left: 200px}
}
</style>
Though you may want to give the card an ID so that if you have multiple divs of class card, it will only apply to the one you need. Then in the media query, instead of .card, you'd have #formcard or whatever.
I have implemented a container in such a way that on extra small screen they should have assigned width.
<div class="container w-60 border border-secondary">
<h1 class="text-black-50 text-center mb-5 bg bg-light">Warenkorb</h1>
<hr/>
<div class="row mt-5">
<div class="col-xs-1">
<span>1x</span>
</div>
<div class="col-xs-6">
<small class="text-muted description">Some description</small>
</div>
<div class="col-xs-2">
<div class="btn-group" role="group" aria-label="quantity">
<button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="decreaseTheQuantity(item)"><span class="vertical-align: baseline;">-</span></button>
<button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="increaseTheQuantity(item)"><span class="vertical-align: baseline;">+</span></button>
</div>
</div>
<div class="col-xs-1 float-right">
40€
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default btn-sm float-right" (click)="deleteTheItem(i)">
<span class="glyphicon glyphicon-trash border border-success btn-sm align-top float-right btntrash"></span>
</button>
</div>
</div>
It looks okay on most of the screens
but on s5 it looks bit distorted.
I want trash button to be in a same row like in first picture.
I am using bootstrap and using class="col-xs-X" to split the columns on small screens.
Why its not working for s5 device ?
Second problem is:
<div class="col-xs-1 float-right">
40€
</div>
my css
.glyphicon.glyphicon-trash{
font-size: 10px;
top: -6px;
}
.btntrash{
height:20px;
top: -6px;
}
for above column i am using float-right and expect a very little space between price and trash button. I am not able to achieve that either.
Could you please give me some pointers ?
https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap 4 do not have xs grid. You should change col-xs-6 to col-6, but if you want to have different grid on desktop or tablet versions, you can use lg and md size.
A little late to the party, but I would suggest is using col-auto and col to adjust your layout for the small screen. I find that there's some situations where specifying a total of 12 columns reacts in weird ways when the content of the column doesn't fit it's width (like you have done).
And also make use of the breakpoints available in bootstrap to change your column sizing for different screens.
<div class="row mt-5">
<div class="col-auto col-sm-1">
<!-- Quantity -->
</div>
<div class="col col-sm-6">
<!-- Description -->
</div>
<div class="col-auto col-sm-2">
<!-- Plus/Minus buttons -->
</div>
<div class="col-auto col-sm-1 float-right">
<!-- Price -->
</div>
<div class="col-auto col-sm-2">
<!-- Delete Button -->
</div>
</div>
col-auto is used to size the column based on it's content.
col is used to fill up any left over space in the row.
I'm using Bootstrap 4 with React. I'm trying to center a h4 and right align couple of buttons all in one row. I could get it done but the h4 text is not centered to the entire width. It is centered only to the space that is remaining after buttons are placed.
I would like to center the h4 element to the entire width while placing the buttons to the right all in one row.
May I know how to achieve this?
<div>
<div className="float-right">
<EditButton /> <DeleteButton />
</div>
<h4 style={{ textAlign: "center" }}>Application Name</h4>
</div>
I'm understanding you want something similar to this, you would have to first set a display: inline property to the h4 so the buttons (which are inline by default) follow the heading, and then a text-center class will center everything; but I think you also want the heading itself to be at the center of the screen and the buttons at the right of it, correct?
.buttons {
top: 0px;
right: 0px;
}
h4{
right: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<h4 class="text-center">H4 Title</h4>
<div class="text-center">
<h4 class="d-inline">H4 Title</h4>
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
<div class="text-center mt-5 position-relative">
<h4 class="w-100 text-center">
H4 Title
</h4>
<div class="position-absolute buttons">
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
</div>
You can center text by using class text-center and right align button by using class text-right
where container-fluid is use for full width and m-0 p-0 is margin: 0; & padding: 0 for remove corner space.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid p-0 m-0">
<div class="text-center">
<h4 class="d-inline">i am H4</h4>
<button class="d-inline float-right btn btn-info">Demo</button>
</div>
</div>
I am working on removing the space between Front End Developer and About Me modal. It doesn't seem to to work when I used classes such as no gutter and removing the paddings.
Reference image
Does anyone have any ideas?
<header>
<div class="row no-gutters">
<div class="col-md-4 col-sm-12">
<img class="title-logo" src="./resources/images/logo.jpeg">
</div>
<div class="title-super col-md-4 col-sm-12 offset-md-4 text-uppercase text-right">
<h1>Terence Fan</h1>
<h4>Front-End Developer</h4>
<button type="button" class="btn btn-outline-dark button-style" data-toggle='modal' data-target="#AboutMe">About Me</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
</header>
I have the full Github source code here
Thanks in advance!
Try adding this code to your CSS.
.title-super .btn {
vertical-align: top;
}
set vertical-align: top to button-style
.button-style {
vertical-align: top;
}
working fiddle here
You can use .align-top bootstrap css class for vertical align element.
<button type="button" class="btn btn-outline-dark button-style align-top" data-toggle='modal' data-target="#AboutMe">About Me</button>
I want to have 3 buttons across a row in Bootstrap 3, but when it changes to the xs grid, stack them vertically. I'd like to introduce some spacing (margin) between the buttons - but only when the buttons are stacked vertically. Can I do this in LESS?
<div class="row">
<div class="col-sm-4 btn-vert-block">
<span>
<button type="button" class="btn btn-primary btn-block">Go Back</button>
</span>
</div>
<div class="col-sm-4 btn-vert-block">
<span>
<button type="button" class="btn btn-primary btn-block center-block">Preview</button>
</span>
</div>
<div class="col-sm-4 btn-vert-block">
<span class="">
<button type="button" class="btn btn-success pull-right btn-block">Go Next</button>
</span>
</div>
</div>
It is not neccessary to involve LESS.
You can use this code, for applying margins to .btn-vert-block below 767px width (or any other):
#media (max-width: 767px) {
.btn-vert-block + .btn-vert-block {
margin-top: 10px;
}
}
Demo Fiddle