Bootstrap not right-align my DIVs - pull-right not working - html

I am trying to align the two text field, shown in photo, to the right side of the screen.
I have tried all the solutions to similar questions, here on StackO.
I have tried using offset , and pull-right. Neither worked.
Screenshot
Source Code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- Search Filter -->
<div class="row filter-row">
<div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12 .col-md-offset-3">
<div class="form-group form-focus">
<input type="text" class="form-control ">
<label class="focus-label">Module Name</label>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12 .col-md-offset-3">
<div class="form-group form-focus select-focus">
<select class="select ">
<option> -- Select -- </option>
<option> Pending </option>
<option> Approved </option>
<option> Returned </option>
</select>
<label class="focus-label">Status</label>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12 .col-md-offset-3">
Search
</div>
</div>
<!-- /Search Filter -->
as you see, the offset class I added didn't work. Can anyone help me get this stuff over to the right?
Ps. There were initially FOUR input fields, I removed the ones I didn't need. I only need these two...

On your .row or .filter-row class for that specific row add
justify-content: flex-end;
to the class
Then remove the offset and float classes from your columns.

It looks like you're using Bootstrap4, but have applied Bootstrap3 class syntax.
Migration from BS3 to BS4 meant that offset class syntax have changed from:
col-md-offset-3
to
offset-md-3
If you change the syntax on your first column, delete the class reference on subsequent columns (and also delete the float-right class reference which is redundant) then it works - I just edited your live example in the devtools and it works for me.

Related

How to place 2 cols' elements to the right and the 3rd to the left using Bootstrap 4?

I've tried so many, but my lack of HTML and Bootstrap didn't allow for success, so I have to come after you - the experts!
This is how this form looks VS the Expected:
<div id='form-horizontal'>
<div class="row justify-content-around space-evenly" id="selectFieldsDiv">
<div class="col-md-3 form-group">
<label for="agencySelect">Choose</label>
<select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
</select>
</div>
<div class="col-md-3 form-group">
<label for="clientSelect">Choose</label>
<select id="clientSelect" onchange="loadClientTasks(selectedClient())">
</select>
</div>
<div class="row justify-content-end">
<div id="addTaskBtnSpot"></div>
<div id="cancelTaskBtnSpot"></div>
</div>
</div>
</div>
Appreciate your help - as usual!
you can add your columns on your own by dividing the div to 8 by 4.In 8 grid you can add your choose dropdowns by 4 by 4 division and in 4 grid you can add your 2 by 2 division
Let me know if it's work if not ping me up I'll provide you other solution as well

Why is my Bootstrap row adding padding to my element?

I'm trying out bootstrap column system and I'm trying to center a text but it wont work because it has a padding that maybe comes from the bootstrap row class here's my code
<section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}>
<div className="text-a-img row col-12">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
<div className="text-a-img row col-12">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
<div className="text-a-img row col-12">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
</section>
those custom class names did nothing cause my css is still empty it looked like this in action
the only way I can get rid of this padding is to remove the row class and I don't want to do that I've tried inline styles custom class etc, how do I get rid of this padding?
Logically this isn't the way to go with bootstrap grids. The first issue I can see here is that you are directly using row inside a row. Ideally row should be immediately followed by a col. and if you want to introduce new grid rows/cols, you should do in that column. So it would be something like that:
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
and in your case:
<section className="home-main-content row" style={{paddingRight:'0px', marginRight:0}}>
<div className="text-a-img col-12">
<div className="row">
<div className="ti-title col-12 mt-4 text-center row">
<h1>Fast response</h1>
</div>
<div className="ti-img col-12"></div>
<div className="ti-text-col-12"></div>
</div>
</div>
</section>
Also some other things to consider:
Always wrap you rows/cols grid with container class, either container or container-fluid.
Plus, consider setting you own margin and padding values for rows and columns, as bootstrap also have default values for row and col class. So please consider them as well.
And also you are clearly using react.js, so I'll suggest to go for REACTSTRAP. its a bootstrap wrapper for react. you'll have much cleaner code to work with. its as easy as this:
<Container>
<Row>
<Col md={12}>
</Col>
</Row>
</Container>
As I mentioned, immediately nested rows is non-standard. The styles you've shown are for elements that are children of rows and are related to gutters. So by nesting rows as you have that styles are applied to the interior element.
Either remove the outer row class or put a column between the rows, per standard implementation.
Did you try to write "text-align: center" in css

Elements in div overlapping on resize Bootstrap

I'm having issue with my labels overlapping within my div row
My bootstrap looks as follows
<div class="col-xs-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-2 ">
<div class='card'>
<div class='card-block'
<div class="row text-nowrap">
<label class="control-label col-xs-12 col-md-12 col-lg-6" for="FinalMonthEnd">Final Month End:</label>
<kendo-dropdownlist class="col-xs-11 col-md-11 col-lg-5" id="FinalMonthEnd">
</kendo-dropdownlist>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-10 ">
<kendo-grid [kendoGridBinding]='grid' >
</kendo-grid>
</div>
</div>
</div>
I had to add this to my css as the label text is large so when it gets resized the text will go to the next line one letter at a time.
.text-nowrap {
white-space: nowrap;
}
When the page is resized down before it gets to the col-md threshold the two start merging together and overlapping each other and looks terrible. How can I prevent this so that each stay separate?
(1) <div class='card-block' is missing a >.
(2) Try applying form-group class instead of row to parent div of label and kendo-dropdownlist.
(3) Try adding form-control class to kendo-dropdownlist.
(4) Class prefix col-xs is dropped in Bootstrap v4.0 and is no more recognizable. You should use col- instead (although it will not make difference to your code, just mentioned it for info).
Hope this can help with some direction.

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