Alignment using bootstrap - html

I use AngularJs, Bootstrap, NodeWebkit.
I'm trying to create my pages' header like this :
So here is my code :
<div class="row">
<img class="col-md-offset-1 col-xs-1 col-sm-1 col-md-1 col-lg-1 img-rounded image-module-pd " src="{{titreImage}}"></img>
<h3 class="col-xs-5 col-sm-5 col-md-5 col-lg-5 text-left titre-module">{{ titreLocalization | translate }}</h3>
<div class="input-group text-right">
<span id="basic-addon1" class="input-group-addon glyphicon glyphicon-search" ></span>
<input class="form-control" ng-model="recherche_texte" Name="recherche_input" placeholder="{{ 'RECHERCHE_TITRE' | translate }}" type="text" style="width:250px;"/>
</div>
</div>
This is what I get :
There are a few issues : My glyphicon is not fully vertically alignated with the input, why ? I've just pasted the example from bootstrap's documentation.
My input + glyphicon are not on the right
My input + glyphicon are not vertically alignated with my title.
I hope my images are big enough so you can understand my problems.
Thank you

There are minor mistakes against important Bootstrap 3 rules:
First:
Content should be placed within columns, and only columns may be immediate children of rows
Second:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Third:
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>
So, place your image, title and search components into separate div with col classes and use offset where needed, but be sure that your column count doesn't add up over 12, otherwise these contents will wrap onto the next line.
This following is a working example, available at Bootply to play around with the code:
<div class="row">
<div class="col-xs-offset-1 col-xs-1">
<img class="img-rounded image-module-pd" src="http://placehold.it/100x60">
</div>
<div class="col-xs-5">
<h3 class="text-left titre-module">Title</h3>
</div>
<div class="col-xs-offset-2 col-xs-2">
<div class="input-group text-right">
<span id="basic-addon1" class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input class="form-control" ng-model="recherche_texte" name="recherche_input" placeholder="Search" type="text">
</div>
</div>
</div>
Note that you may omit col-sm, col-md and col-lg classes if a col-xs class is present and you don't need other breakpoints on larger screen widths:
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
To solve your problem to vertically align the search component read on this other posts that cover this issue:
vertical-align with bootstrap 3
How to center align vertically the container in bootstrap

Related

Bootstrap4 columns containing absolutely positioned elements

I have been working on a game and, for certain things, I used absolute positioning. In particular, I need it for some moving animations where I have to slide elements around and overlap them to create an effect.
I'm trying to work on making the game good-looking on mobile, and I've been running into some problems caused by Bootstrap columns that contain those absolutely positioned elements.
This is the look I'm trying to get (aside from the badly aligned number), notice the red squared row in the middle:
The whole center part of the screen (the row with buttons, emojis, and the centered card icon underneath) is a row containing cols. This is some of its markup
<div class="col order-1 order-xl-1 col-4 col-xl-2">
<div style="display:inline-block">
<p class="backgrounded-text" style="white-space: nowrap; text-overflow: ellipsis;"><span id="turn_elem">...</span></span></p>
<p class="backgrounded-text">Carta attuale: <span id="curr_card"><img class="card_icon" /></span></p>
</div>
</div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">
<span style="padding-left:5px!important;padding-right:5px!important" class="reaction_title">Reazioni:</span>
<table>
<!-- emojis ... -->
</table>
</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">
<span>...</span><br />
<span id="hidden_card">
<img class="card_placeholder" src="..." />
</span>
<span id="card_stack" class="slide_to_right">
<img class="card_placeholder" src="..." />
</span>
<div id="stacked_card">
<img id="stacked_front" class="card_placeholder" src="..." />
</div>
<div id="hidden_uncovered_card_div">
<img id="hidden_uncovered_card" class="card_placeholder" src="..." />
</div>
</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">
<button style="width: 49%" class="btn btn-lg btn-dark" id="doubt" #click="doubt()" :disabled="playing_animation">Dubito!</button>
<button style="width: 49%" class="btn btn-lg btn-dark">
Metti giĆ¹
</button>
</div>
</div>
The img that has id hidden_card is a card to the left of the red one that is made visible and slides to the right to cover that (it uses jQuery animate to manipulate the position). On top of stacked_card, which is the main red card that's displayed in the screenshots, there's another copy of it, that is flipped with jQuery and moved to the right to overlap hidden_uncovered_card. This is pretty much how the animations work. They all depend on using position: absolute and manipulating the positioning.
For some reason, the actual look I'm getting with the above code is this:
There is some space in between the three columns on the top and the one containing the red card back, and I don't understand where it is coming from.
Removing all the position: absolute seems to fix this, but of course, then all the animations that depend on it stop working.
Is there any way to fix this positioning without removing the position: absolute? It'd be a pain to have to rewrite the code for all the animations, as it's working perfectly on desktop.
Here's a static webpage that contains the markup. You can turn it to mobile view (the screenshots were taken as iPhone 6/7/8 mode) and see for yourself.
click
The actual app (a beta version, that is) can be found here, in case you wanted to see how the animations work. If you need any additional information, just let me know.
Bootstrap is using a 12 colums grid.
Check how you use them.
You have:
<div class="col order-1 order-xl-1 col-4 col-xl-2">The two button on the left<div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">the emojis</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">the red cards</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">the three button on the right</div>
You should clean that!!!
Example:
col followed by col-4 is the same as just col-4 where col-4 overrides col.
order-1 and order-xl-1 is redondant if there is no order-md-3 (for example)
Just order-1 is enought here.
For these 4 divs, make sure you use the 12 grid spaces correctly.
So about the col and col-* usage, for mobile size, you actually have 24 spaces used out of 12.
4 spaces
4 spaces
12 spaces
4 spaces
And whent the col-xl-* applies, you have 10 spaces used out of 12. Is that on purpose?
2 spaces
2 spaces
3 spaces
3 spaces
So here is what I suggest for a start:
<div class="col-3 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-2 col-xl-3 order-3">the red cards</div>
<div class="col-3 order-4">the three button on the right</div>
which doesn't change the xl size at all, but produces this (iphone 6/7/8 mode):
That's a start.
So the trick is to have the classe in order... All the col-* from default to the bigger specific size... And then the order-* in order too. That make the markup readable.
;)
EDIT
To have the red cards looking like on another row :
<div class="col-4 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-10 col-xl-3 order-4 order-xl-3 sm-translateUp">the red cards</div>
<div class="col-4 order-3 order-xl-4">the three button on the right</div>
Notice the order changed and that there is an additional .sm-translateUp class which would be:
#media screen and (max-width: 576px){
.sm-translateUp{
transform: translateY(-85px);
}
}
That makes:
Now that really looks like a hack... (LOL) But since that col is trapped inside its parent .row, that is all I think of for the moment.
So have that class defined inside all necessary #media rules for each bootstrap break points:
sm: >= 576px
md: >= 768px
lg: >= 992px
xl: >= 1200px

How can I position an arrow image next to dropdown Bootstrap

I am trying to position an image of arrow pointing downwards next to a dropdown select box. I am using Bootstrap 3.0 css.
With the following markup I am able to achieve what I am after but is not responsive (i.e. when I see it on chrome with mobile mode) the image is shoved below the dropdown.
My markup is below:
<div class="form-group">
<label class="col-md-4 control-label">Package</label>
<div class="col-md-3">
<select class="form-control" id="selPackage" ng-model="package"
ng-options="package.Name for package in packages"
>
<option value=""></option>
</select>
{{package.Description}}
</div>
<div class="col-md-1 pull-left" style="margin-left:-20px;">
<img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
</div>
</div>
But in Mobile mode it looks like this:
Could you please highlight the issue here?
Not sure of the arrow - but the issue you are describing is simply that you have not set any xs or sm classes on the markup and so the bootstrap default is to display the columns as full rows at the smaller viewports (because you have not specified what to display them at).
You will need to experiment to get the right layout for your needs - but it will have to include col-xs-X and col-sm-X classes in there. Also note that you have nested divs in there - so that the inner col-md-3 is actually 3 columns of the parent column.
<div class="form-group">
<label class="col-xs-8 col-sm-10 col-md-4 control-label">Package</label>
<div class="col-xs-8 col-sm-10 col-md-3">
<select class="form-control" id="selPackage" ng-model="package" ng-options="package.Name for package in packages">
<option value=""></option>
</select>
{{package.Description}}
</div>
<div class="col-xs-4 col-sm-2 col-md-1 pull-left" style="margin-left:-20px;">
<img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
</div>
Don't use inline styling, put your CSS into a separate file and then include media queries to change the position at different viewports. That way you can control what different screen sizes will see depending on the size of the page. Bootstrap has a lot of responsive elements built-in too like the grid system.
So in this instance, add a class onto your div around the arrow to target that and the image within it like this to move it around where you like, however you can also make use of the grid system to change the width of the select box and the arrow as well.
<div class="form-group">
<label class="col-md-4 control-label">Package</label>
<div class="col-sm-3 col-md-3">
<select class="form-control" id="selPackage" ng-model="package" ng-options="package.Name for package in packages">
<option value=""></option>
</select>
{{package.Description}}
</div>
<div class="col-sm-1 col-md-1 pull-left select-arrow" style="margin-left:-20px;">
<img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
</div>
</div>
I've added a class of select-arrow to the div around the arrow image and also add the col-sm class to both divs which will alter the width on small devices like mobiles. Take a look at the grid options which explains what class you can use and when.
Image of the Grid Options from the Bootstrap docs.

Bootstrap input group line break formatting

Basically I have a bunch of rows with a check box and a label taking up 2 column spaces. Some of the labels are longer then others so when you resize the browser or are viewing on a mobile device the columns with longer labels will collapse to a second row and the shorter ones stay beside their check box. It looks like crap.
HTML:
<div class = "row">
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
Is there a way to make it so that if one of them collapses then the whole row does?
Even better would be to have a dynamic font that worked like an image and just grew and shrank taking up a maximum of 100% as necessary to not cause a collapse at all. I could just use images but I have a lot of these these labels and it will take forever to make an image for each.
Bootstrap provides four classes for different screen :
xs for extra small
sm for small
md for medium
lg for large screen
In your following code should work, you can customize as per your screen needs :
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
You can add a custom CSS to your bootstrap style and define some simple CSS rules as you would like to force the style to behave...
CSS Example:
.input-group {
display: inline;
}
I think the right HTML element for this is a list..
although, If you are going to edit the CSS... It's good to know that you can add a custom css file to your project and use a CSS class with your bootstrap style like this:
CSS:
.checkbox-inline {
display: inline;
}
HTML:
<div class="input-group checkbox-inline">
<input type="checkbox">
Small Label
</div>
There are many possible answers...
maybe, you will also find this question useful.

Center Set of Controls in Bootstrap 3 Row With Proper Vertical Alignment

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;
}

Bootstrap 3 column sensible stacking plus floated right element

I'm attempting to use Bootstrap 3's col layout in order to have 3 columns of drop-downs that stack sensibly on small screens. However, I'm getting odd results when I attempt this.
What I need to have happen is for all 3 dropdowns (and their labels) to stack under one another in a sensible fashion when the viewport is narrowed.
Here's how I want it to look:
However, as you can see from this fiddle, it doesn't work that way at all:
Either they overlap due to the float:left, or the dropdown and the label break up and wind up on seperate lines.
http://jsfiddle.net/g8u45rmz/1/
The code is very straight-forward:
<div class="col-xs-4">
<span class='select-subfolder-label'>Subfolder:</span>
<select id='test2' class='folder-sel'>
<option>All</option>
</select>
</div>
In addition, I need the glyph icon on the right side to always be floated right, even when the columns are stacked the way I want.
How can I achieve these two objectives? Help is appreciated.
The 'col-xs-4' class basically says, 'even on extra small screens, this takes up 4 of the 12 columns.
Try using col-md-4 or col-sm-4, when the screen enters xs range, it'll switch to full width and stack as expected.
simply adding a form-control class on select will get the desired result.
For stacked select menu on smaller window, adding class col-xs-12 to parent div will work. This will make the div use up all the width available to it on small devices. Also for small and medium sized window I have used col-sm-4 and col-md-4, this will change it so that all divs appear inline.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class='row subnav'>
<div class="col-xs-12 col-sm-4 col-md-4"> <span class='select-folder-label'>Folder:</span>
<select class="form-control" id='test1' class='folder-sel'>
<option>All</option>
</select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4"> <span class='select-subfolder-label'>Subfolder:</span>
<select class="form-control" id='test2' class='folder-sel'>
<option>All</option>
</select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4"> <span class='select-other-label'>Other:</span>
<select class="form-control" id='test2' class='folder-sel'>
<option>All</option>
</select>
</div>
<div id="subnav_gear" class='dropdown nav navbar navbar-nav navbar-right'> <span class='glyphicon glyphicon-cog'></span>
</div>
</div>