helllo evryone.
i have 4 divs that i want to be in one line in bootstrap but i have some problems with alignement, this picture shows the result:
It is looking like this now
the image is not in one line as other element and the text x cm is not in the center of its div
this my code
.flt{
float: left
}
.info-ingr{
background-color: #5bc0de;
margin-left: 40px;
height: 34px;
color: white;
}
.alginement{
height: 100px;
width: 100%;
background-color: #faa;
display: inline-block;
vertical-align: middle;
}
<div id="painchamp0" class="collapse">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-2 ">
<img src="https://thumbs.dreamstime.com/x/long-loaf-bread-22826883.jpg" class="img-responsive"><!--"img/pain-sandwich"-->
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<select class="ste form-control" id="painList0">
<option>Select type de pain :</option>
<option>Pain complet</option>
<option>Pain aux céréales</option>
<option>Pain au seigle</option>
<option>Pain au levain</option>
<option>Pain aux épices</option>
<option>Pain aux figues</option>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-1 col-lg-1" >
<input type="number" step="8" value="0" min="0" max="64" placeholder="largeur de pain :" id="painQuantite0" class="form-control flt">
</div >
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 align-lg-middle alginement" >
x cm
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button id="painBTN0" type="button" class="btn btn-info btn-md flt">
ok
</button>
</div>
</div>
</div>
thank you
By default, text content having padding(10px) property..Just scrolldown to find that corresponding property line while you inspect it in the browser
Related
I am trying to display the cards as input type is a checkbox, on selecting the cards I am able to fetch the details what are cards selected by the user, and my requirement is I required to highlight the card which is selected by the user.
for example, I need to highlight the card whose checkbox is checked, and if the checkbox is unchecked I need to show as the card.
lable+input[type=checkbox]:checked {
//some css code
}
<form [fromGropu]="form1">
<label for="{{i}}" *ngFor="let item of items" ;let i=index ">
<input type="checkbox " id="{{i}} " [value]="item " (change)="onchange() "/>
<div class="card rounded-0 ">
<div class="card-header ">{{item.header}}</div>
<diva class="card-body>{{item.desc}}</div>
<div class="card-footer">{{item.footer}}</div>
</div>
</div>
</label
</form>
but above CSS is not working, could anyone help on this
After input checked, the div.card following input should apply the css.
Your css should be like this
input[type=checkbox]:checked + div.card{
color: red;
}
Demo https://stackblitz.com/edit/angular-checked-input?file=src/app/app.component.css
Why not just highlight using a class which is toggled using ngClass? please try this change.
<form>
<label for="{{i}}" *ngFor="let item of items;let i =index" (click)="item.active = !item.active;"
[ngClass]="item.active ? 'active' : ''" style="display:block;">
<div class="card rounded-0">
<div class="card-header">{{item.header}}</div>
<div class="card-body">{{item.desc}}</div>
<div class="card-footer">{{item.footer}}</div>
</div>
</label>
</form>
Note: please delete this active property for the array used if you are sending the data to any API. Below is a working example!
Stack Blitz Demo
.services input[type="checkbox"] {
display: none;
}
.services label {
height: 100%;
padding: 10px;
margin: 0px;
border-radius: 0.55rem;
}
.services input[type="checkbox"]:checked + label {
background: #20df80;
}
.services input[type="checkbox"]:checked + label::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
border: 2px solid #1dc973;
content: "\f00c";
font-size: 24px;
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
background: white;
}
.services img{
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container mt-5'>
<div class="row services">
<div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
<div class="card shadow-soft text-center" style="width: 100%;">
<input class="" type="checkbox" id="24 Horas" name="type[]" value="5" checked>
<label for="24 Horas">
<br>
<h5 class="card-title"><strong>24 Horas</strong></h5>
<img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
</label>
</div>
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
<div class="card shadow-soft text-center" style="width: 100%;">
<input class="" type="checkbox" id="Aire acondicionado" name="type[]" value="4">
<label for="Aire acondicionado">
<br>
<h5 class="card-title"><strong>Aire acondicionado</strong></h5>
<img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
</label>
</div>
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
<div class="card shadow-soft text-center" style="width: 100%;">
<input class="" type="checkbox" id="Bar" name="type[]" value="8">
<label for="Bar">
<br>
<h5 class="card-title"><strong>Bar</strong></h5>
<img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
</label>
</div>
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
<div class="card shadow-soft text-center" style="width: 100%;">
<input class="" type="checkbox" id="Buffet" name="type[]" value="3" checked>
<label for="Buffet">
<br>
<h5 class="card-title"><strong>Buffet</strong></h5>
<img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
</label>
</div>
</div>
</div>
</div>
I am showing radio buttons dynamically in two columns. As you can see in picture
It looks fine in few conditions but sometimes when text is large it looks off. How can I resolve this issue
Here is some code:
.radiobox-padding-top{
padding-top:15px;
}
input[type=radio] {
float: left;
display: block;
margin-top: 4px;
}
label {
margin-left: 15px;
display: block;
}
here is html code (I am using angular)
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face">
<div class="col-12" >
<p class="grey-text inlineBlock question-padding">{{data.help_text}}</p>
</div>
<div class="row" style="margin: 0px">
<div class="col-12 radiobox-padding-top">
<div class="form-group">
<span *ngFor="let entry of options; index as i">
<div class="col-5 inlineBlock">
<div class="radio">
<input type="radio" name="{{data.slug}}" checked value="{{options[i]}}">
<label>
{{options[i]}}
</label>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
I have created a running stackblitz.
Modify your code like this:
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face">
<div class="col-12" >
<p class="grey-text inlineBlock question-padding">{{data.help_text}}</p>
</div>
<div class="row" style="margin: 0px">
<div class="col-12 radiobox-padding-top">
<div class="form-group">
<div class="row">
<div class="col-6" *ngFor="let entry of options; index as i">
<div class="inlineBlock">
<div class="radio">
<input type="radio" name="{{data.slug}}" checked value="{{options[i]}}">
<label>
{{options[i]}}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Additionally change your CSS like this:
.radiobox-padding-top{
padding-top:15px;
}
input[type=radio] {
float: left;
margin-top: 4px;
}
label {
padding-left: 5px;
margin-left: 15px;
display: block;
}
For more informations about bootstrap breakpoints have a look here.
I'm using Bootstrap's grid system. I have 3 divs inside a "row", and inside each of those divs are nested controls.
When I horizontally decrease the browser size, the 2nd and 3rd div in the row are overlapping the 1st div. I want them to wrap, not overlap.
How can I achieve this?
Here is my code:
<!-- SEARCH CONTROLS -->
<div class="row">
<!-- Left side search boxes and search button -->
<div class="col-xs-5">
<div class="article" id="SAorPIList">
<select style="min-width: 215px; max-width: 300px;" class="col-xs-4 form-control" data-bind="value: selectedSAPIValue, options: saorpi, optionsText: 'Name', optionsValue: 'CmeTypeId', optionsCaption: 'Select SA or PI'"></select>
</div>
<div class="col-xs-5" style="padding-top: 20px;">
<select style="max-width: 300px;" class="specialties-class form-control" name="Name" id="SpecialtyId"></select>
</div>
<div class="col-xs-5" style="max-width: 150px; padding-top: 20px; padding-left: 175px;">
<button id="btnDropDownsSearch" class="btn btn-search collapsed" type="button">
<i class="icon-search"></i>
</button>
</div>
</div>
<!-- The world "OR" in the center of the page -->
<div class="col-xs-2" style=" padding-left: 75px; padding-top:50px;">
<strong style="display:inline;">OR</strong>
</div>
<!-- Right side search box -->
<div class="col-xs-5 pull-left" style="padding-bottom: 50px; min-width:400px;">
<span><strong style="text-align:left;">Activity Search</strong></span>
<div class="col-xs-4 input-group pull-left input-group-lg" style="padding-top:50px;">
<input id="txtFreeformSearch" class="form-control" type="search" style="min-width:175px;" />
<div class="input-group-btn">
<button id="btnFreeformSearch" class="btn btn-search collapsed" type="button">
<i class="icon-search"></i>
</button>
</div>
</div>
</div>
</div>
When you say, you nesting controls to div; Do you mean somethink like this?
.row > div {
background: lightgrey;
border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
</div>
I solved this by defining min-width inside a good number of the tags.
This allowed the DIVs to wrap in PC, tablet, and mobile formats.
I would post the resulting HTML, but I think it would affect too few readers to make it worthwhile. I say this because there is a knockout control and select2 control within the HTML, and some of their UI properties are defined in javascript.
I'm beginner in css and bootstrap,and have document whit this instruction:
Throughout the enitre website a 12 column grid is used. This allows for maximum flexibility and to serve all devices available. Within the 12 columns grid
The content is placed within the 12 column grid (1). The grid is scaled between two fixed margins (2). Grid and margins fill the entire screen width minus the width of the main navigation (3).
for that purpose write this:
<div class="row">
<div class="col-md-1 col-sm-1 col-lg-1">A</div>
<div class="col-md-1 col-sm-1 col-lg-1">B</div>
<div class="col-md-1 col-sm-1 col-lg-1">C</div>
<div class="col-md-1 col-sm-1 col-lg-1">D</div>
<div class="col-md-1 col-sm-1 col-lg-1">E</div>
<div class="col-md-1 col-sm-1 col-lg-1">F</div>
<div class="col-md-1 col-sm-1 col-lg-1">G</div>
<div class="col-md-1 col-sm-1 col-lg-1">H</div>
<div class="col-md-1 col-sm-1 col-lg-1">I</div>
<div class="col-md-1 col-sm-1 col-lg-1">J</div>
<div class="col-md-1 col-sm-1 col-lg-1">K</div>
<div class="col-md-1 col-sm-1 col-lg-1">L</div>
</div>
now want put image tag into A div:
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg"/>
but now page not responsive,want that image show center of <div class="row">,how can i solve that?thanks all.
Well, your question is not really clear. Please have a look at this Fiddle and elaborate more on that what you exactly want to do or send us a design or any visual things can help.
Cheers
img {
display: block;
margin-left: auto;
margin-right: auto
}
<div class="row">
<div class="col-sm-1">A</div>
<div class="col-sm-12">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS2Xjhc-NPN5UAWzKdY3Kpl29Tyt-zCC8aOd3Gez8i2zrF3BS9bSQ" />
</div>
<div class="col-sm-1">B</div>
<div class="col-sm-1">C</div>
<div class="col-sm-1">D</div>
<div class="col-sm-1">E</div>
<div class="col-sm-1">F</div>
<div class="col-sm-1">G</div>
<div class="col-sm-1">H</div>
<div class="col-sm-1">I</div>
<div class="col-sm-1">J</div>
<div class="col-sm-1">K</div>
<div class="col-sm-1">L</div>
</div>
Please have a look at the new example, I really have no idea what you want to do but you can play a lot with the cols and usually there is no need to add any margins! But if because of any reasons you want to add margins you can define a class (you can call it what ever you want) and then you can define the amount of margins :
In this example I called it "asset" : you can write it either on this way :
.asset {
margin-right: 20px;
margin-left: 20px;
}
or on this way:
.asset {
margin: 0 10px 20px 30px;
}
0 ===> shows margin-top(for zero there is no need to add "px")
10px ===> shows margin-right
20px ===> shows margin-bottom
30px ===> shows margin-left
now you can write :
.asset {
margin : 0 20px 0 20px;
}
img {
display: block;
margin-left: auto;
margin-right: auto
}
<div class="row">
<div class="col-sm-1">A</div>
<div class="col-sm-12">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS2Xjhc-NPN5UAWzKdY3Kpl29Tyt-zCC8aOd3Gez8i2zrF3BS9bSQ" />
</div>
<div class="col-sm-1">B</div>
<div class="col-sm-1">C</div>
<div class="col-sm-1">D</div>
<div class="col-sm-1">E</div>
<div class="col-sm-1">F</div>
<div class="col-sm-1">G</div>
<div class="col-sm-1">H</div>
<div class="col-sm-1">I</div>
<div class="col-sm-1">J</div>
<div class="col-sm-1">K</div>
<div class="col-sm-1">L</div>
</div>
img {
display: block;
margin-left: auto;
margin-right: auto
}
.asset {
margin-right: 50px;
margin-left: 50px;
}
<div class="row asset">
<div class="">A</div>
<div class="col-xs-12">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS2Xjhc-NPN5UAWzKdY3Kpl29Tyt-zCC8aOd3Gez8i2zrF3BS9bSQ" />
</div>
<div class="col-md-1 col-sm-1 col-lg-1">B</div>
<div class="col-md-1 col-sm-1 col-lg-1">C</div>
<div class="col-md-1 col-sm-1 col-lg-1">D</div>
<div class="col-md-1 col-sm-1 col-lg-1">E</div>
<div class="col-md-1 col-sm-1 col-lg-1">F</div>
<div class="col-md-1 col-sm-1 col-lg-1">G</div>
<div class="col-md-1 col-sm-1 col-lg-1">H</div>
<div class="col-md-1 col-sm-1 col-lg-1">I</div>
<div class="col-md-1 col-sm-1 col-lg-1">J</div>
<div class="col-md-1 col-sm-1 col-lg-1">K</div>
<div class="col-md-1 col-sm-1 col-lg-1">L</div>
</div>
If you want your image to stay inside a bootstrap column, you would need an extra css:
img {
max-width: 100%;
max-height: 100%;
}
Your html will look like this if you want to have the image inside the A div (it will be on the left of the screen):
<div class="row">
<div class="col-sm-1">
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="">
</div>
<div class=" col-sm-1 ">B</div>
<div class=" col-sm-1 ">C</div>
<div class=" col-sm-1 ">D</div>
<div class=" col-sm-1 ">E</div>
<div class=" col-sm-1 ">F</div>
<div class=" col-sm-1 ">G</div>
<div class=" col-sm-1 ">H</div>
<div class=" col-sm-1 ">I</div>
<div class=" col-sm-1 ">J</div>
<div class=" col-sm-1 ">K</div>
<div class=" col-sm-1 ">L</div>
</div>
You do not need to use col-sm, col-md and col-lg together. If you are using just the col-sm it does the same effect of the others to large and medium screens.
If you want the image at the center always, you will need to use offset. Offset is just a blank column that goes on the left of your columns. Depending on the size you want, if you do like above, your image will always be at the center:
<div class="row">
<div class="col-sm-2 col-sm-offset-5">
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="">
</div>
</div>
Just remember that a row can only have 12 columns. The way above I placed 5 blank columns to the left of the image, that takes 2 columns and then there are more 5 five columns to the right to complete the 12 columns.
what you can do is add a class in div tag and set image using css
.image1 {
background-image : url('../img/sample.jpg');
}
and ten in html
<div class="col-md-1 col-sm-1 col-lg-1 image1">A</div>
try, this may help
I'm trying to center some inputs inside a table and set a size to this td using bootstrap (on angularjs) but I can't make it work !
What I have now:
<div class="container">
<form class="form" data-ng-submit="salvarPartida()">
<table class="table table-bordered" align="center">
<tr data-ng-repeat="partida in partidas | filter : {fase : fase}">
<td style="height: 30px; text-align: right; font-size: 10pt;">{{partida.time1.nome}}
<img data-ng-src="/images/bandeiras/{{partida.time1.imgNumber}}.png" style="vertical-align: middle;">
</td>
<td class="col-sm-6">
<div class="col-xs-3" >
<input type="text" class="form-control">
</div>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
</td>
<br>
<td style="height: 30px; text-align: left; font-size: 10pt;"><img src="/images/bandeiras/{{partida.time2.imgNumber}}.png" title="{{partida.time2.nome}}"
style="vertical-align: middle;"> {{partida.time2.nome}}</td></tr>
</table>
<button class="btn btn-primary btn-block" type="submit">Salvar</button>
<br>
<br>
</form>
</div>
Which looks like:
But my expectations are :
Nevermind the color styles, I'd like just to proper align all fields !
I've tried using align="center" on the , class="text-align" inside the td class, also tried creating a nested into this using the previous text-center class but no luck !
My jsfiddle: fiddle
Thanks so much.
Centering <td> using bootstrap is simple:
horizontally:
<td class="text-center">
vertically:
<td class="align-middle">
Can you try this:
HTML
<div class="container m-con">
<form class="form" data-ng-submit="salvarPartida()">
<table class="table table-bordered">
<tr data-ng-repeat="partida in partidas | filter : {fase : fase}">
<td class="col-sm-4 col-xs-4">
<div class="row m-row">
<div class="col-xs-12 col-sm-4 col-lg-4 col-sm-push-8 text-right">
<img src="http://placehold.it/50x50" alt="" height="50" width="50" />
</div>
<div class="col-xs-12 col-sm-8 col-lg-8 col-sm-pull-4 m-text text-right">
Brazil
</div>
</div>
</td>
<td class="col-sm-4 col-xs-4">
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6">
<input type="text" class="form-control" />
</div>
<div class="col-xs-6 col-sm-6 col-lg-6">
<input type="text" class="form-control" />
</div>
</div>
</td>
<td class="col-sm-4 col-xs-4">
<div class="row m-row">
<div class="col-xs-12 col-sm-4 col-lg-4 text-right">
<img src="http://placehold.it/50x50" alt="" height="50" width="50" />
</div>
<div class="col-xs-12 col-sm-8 col-lg-8 m-text text-left">
Brazil
</div>
</div>
</td>
</tr>
</table>
<button class="btn btn-primary btn-block" type="submit">Salvar</button>
</form>
</div>
CSS
.m-con {
margin: 20px;
}
.m-text {
font-size: 16px;
padding-top:15px;
font-weight:bold;
}
.m-con td {
vertical-align:middle !important;
}
#media screen and (max-width:765px) {
.m-row > div {
text-align:center;
}
}
http://jsfiddle.net/vea5G/2/
//use td is padding
td{
vertical-align:middle;
padding:10px 20px;
width:1000px;
}
Try adding up custom CSS:
HTML
<div class="col-xs-3 max-center" >
<input type="text" class="form-control">
</div>
<div class="col-xs-3 max-center">
<input type="text" class="form-control">
</div>
CSS
.max-center {
text-align:center;
}
You can also try adding additional padding to the cells on the sides, but I'm not sure how much because I don't have the images. Just be careful, it can mess up the layout.