I'm working with bootstrap 3 and trying to piece together a base layout for a flask app. so far I have:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="content">
<div class="pull-middle">
<h1 class="page-header">Create an awesome App template with Bootstrap.</h1>
<div class="container">
{% block content %}
{% endblock %}
</div>
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4">
<div class="panel panel-default ">
<div class="panel-body ">
<form action="#" role="form">
<div class="input-group ">
<input type="email" class="form-control" placeholder="Email Address" required>
<span class="input-group-btn">
<button class="btn btn-success btn-circle" type="submit">Sign up for free</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="container">
<small>© Copyright 2015. </small>
</div>
</footer>
I want to widen the email address form, leaving the green button as is. How can I do this?
You are using the Bootstrap Grid classes wrong.
The input fielding is getting space what it has been given by parent div using the grid class col-lg-4 making it col-lg-6 would give more space to it's child divs.
So using these classes would help textfield to take more space.
col-xs-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3
Related
I'm attempting to make a row that will contain 3 columns. One for the pagination count, one to filter a table, and another to hold a button.
Everything looks great in small, medium and large viewports, but when I maximize my window, there is a huge gap on the right above my table. See image below (bottom) for reference.
I'm not sure where I'm going wrong. I've tried every variation of flex-fill, w-100, etc. that I can think of to get it to expand to 100% width on xl viewports, but I can't figure it out.
Here's the relevant code for that section that sits above the table:
<div class="col">
<div class="container no-padding">
<div class="row mt-1">
<div class="col d-none d-md-block no-padding">
<p>Showing {{ $assets->firstItem() }}-{{ $assets->lastItem() }} of {{ $assets->total() }} total</p>
</div>
<div class="col-auto flex-fill flex-md-grow-0 no-padding mb-3">
<div class="container">
<div class="row">
<div class="col m-0 p-0 mr-2">
<form class="form-inline">
<div class="input-group">
<input style="font-size:80%;" class="form-control" type="text" name="filter" value="" placeholder="Filter results">
</div>
</form>
</div>
<div class="no-padding">
<a class="btn btn-dark btn-sm mr-1" href="{{ action('AddAssetController#index') }}" role="button"><i style="font-size:80%;" class="fas fa-plus"></i> New Asset</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit:
Here's the code from my template. Code above is part of #section('content') which gets output to and parsed by #yield('content') below.
<div class="row">
<div class="col-12 no-padding">
#include('layout.includes.header')
</div>
</div>
<div class="row h-100">
<div class="col-12">
<!-- Begin nav/content row -->
<div class="row h-100">
<div id="sidebar-wrapper" class="visible">
#include('layout.includes.nav')
</div>
<!-- Begin main column -->
<div class="col content" style="overflow-x:auto;">
<div class="row no-padding">
<div class="col d-none d-sm-block">
<h4>#yield('content-heading')</h4>
</div>
<div class="col flex-grow-1">
#include('layout.includes.searchform')
</div>
</div>
<div class="row no-padding inner-box shadow p-3 mb-5 bg-white rounded">
#yield('content') <!--this is where the original code appears-->
</div>
</div>
<!-- END main column-->
</div>
<!-- END nav/content row-->
</div>
</div>
not sure if this is what you want achieve but, i tried my best to make it look like what you desire, let me know if is really this: https://jsfiddle.net/leandrorr/t4rbfdv3/6/
html:
<div class="result-count p-4 border">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
Showing 1-20 of 32 total
</div>
<div class="col-lg-6">
<form action="" class="form-inline float-right">
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
</div>
</div>
</div>
I want to different order on Desktop and on mobile,
Currently this is the order
On Med+ :
On small:
Desktop is good. This is the right position.
On mobile I want the picture to come below the button and the test.
I have tried order-sm-fist and order-sm-last and also order-1 until order-2 but nothing seems to change. Not sure what I am doing wrong:
<section class="feature section">
<div class="container">
<div class="row">
<div class="heading">
<h2>Try it now!</h2>
</div>
<div class="col-md-5 order-md-last">
<img src="The image url is here"
class="" id="generated-monKey" alt="">
</div>
<div class="col md-2 order-md-1">
<br>
</div>
<div class="col-md-5 order-md-first text-center">
<p>Enter a Banano wallet address and press the "Generate monKey" button.</p>
<br>
<p>If you do not have a Banano wallet you can create one in BananoVault or simply generate a random Banano
wallet address.</p>
<br>
<div class="container">
<input type="text" class="form-control form-rounded" placeholder="Banano Address" maxlength="64" size="65">
<br>
<div class="container">
<div class="row">
<form>
<div class="checkbox col-md-6">
<label>
<input type="checkbox" value="" checked>Accessories</label>
</div>
<div class="checkbox col-md-6">
<label>
<input type="checkbox" value="" checked>Background</label>
</div>
</form>
</div>
</div>
</div>
<br>
<button type="button" class="btn btn-lg btn-success form-rounded" border>Generate monKey</button>
<br>
<br> Monkeys are perfect for avatars. Click on the monKey image in order to download it.
</div>
</div>
</div>
</section>
In this example I changed the md to first and last which means even on Desktop I should see the image on the right and the text on the left and yet nothing changes.
Your HTML structure is so messy. Here are my 2 cents:
No nested container
cols should come right after row.
What's up with the missing - on col md-2? And why do you need a column wrapping a <br>?
Cleaned up HTML structure
<section class="feature section">
<div class="container">
<div class="heading"></div>
<div class="row">
<div class="col-md-6">
<form />
</div>
<div class="col-md-6 order-md-first">
<img />
</div>
</div>
</div>
</section>
fiddle: http://jsfiddle.net/aq9Laaew/144878/
I'm trying to create two 6 column divs. The second div has a form that should be 4 columns and centered. Everything works fine until I add the file input to the form. This causes it to break out of the container and adds a horizontal scroll bar at the bottom. I read that changing css for input{overflow:hidden;} would fix this but it did not. I've commented out the input file line so that it can be found easier. Can someone tell me how to keep the file input from breaking outside the box.
<div class="container careers-container">
<div class="row">
<div class="col-12 col-sm-6 mx-auto mt-4">
<h1 class='carbon cyan text-center'>Careers</h1>
<div class="divider background-cyan"></div>
<p class='salmon mt-4 font-24'>The Bridge is a premier pool hall providing an exceptional experience to it's clientele. We have the best tables, a great selection of drinks, good food options and lots of entertainment in a classy atmosphere. We are currently looking for people with service industry experience to serve at our Edmond location.</p>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class='zaffre h5'>Currently Hiring</h2>
</div>
</div>
<div class="row no-gutters">
<div class="col-12 col-sm-4 d-none d-sm-block">
<img src="images/dart-board.jpg" class='img-fluid mb-3'></img>
</div>
<div class="col-12 col-sm-8">
<ul class='list-unstyled zaffre ml-3'>
<li>Bar Manager</li>
<li>Full time bartenders</li>
<li>Part time bartenders</li>
<li>Full or part time cooks</li>
<li>Part time cocktail waitress</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<span class='zaffre h6 font-24'>Please submit your resume here and we will contact you</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-4 mx-auto">
<div class="background-cyan pt-3 pb-3 pl-1 pr-1">
<form>
<div class="form-group row">
<label for="inputName" class="col-sm-2 col-form-label sr-only">Name</label>
<div class="col-12">
<input type="text" class="form-control" id="inputName" placeholder="Full Name">
</div>
</div>
<div class="form-group row">
<label for="tel-input" class="col-sm-2 col-form-label sr-only">Telephone</label>
<div class="col-12">
<input class="form-control" type="tel" value="Phone Number" id="tel-input">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label sr-only">EMAIL</label>
<div class="col-12">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class='text-white' for="InputFile">Upload Resume</label>
<!-- <input type="file" class="form-control-file" id="InputFile"/> -->
</div>
<div class="text-center">
<button type="submit" id='submit-btn' class="btn btn-sm btn-secondary mt-5 info-button">Submit Form</button>
</div>
</form>
</div>
</div>
</div>
</div><!--End of container-->
<form class="container">
<div class="row">
<div class="col-md-1">
<label for="vol" class="control-label">Analysis Volume</label>
</div>
<div class="col-md-3">
<div id="volume">
<div class="control">
<span class="knob"></span>
</div>
</div>
</div>
<div class="col-md-1">
<label for="username" class="control-label vol-box">50% usage</label>
</div>
</div>
</form>
I have been trying to arrange these three items in a row like this in image, but i am not sure what class to apply and also in smaller devices i need to disable the column completely.
<!-- HTML --->
<div class="module-wrap">
<form class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-3">
<label for="vol" class="control-label">Analysis Volume</label>
</div>
<div class="col-md-6">
<div id="volume">
<div class="control">
<span class="knob"></span>
</div>
</div>
</div>
<div class="col-md-3">
<label for="username" class="control-label vol-box">50% usage</label>
</div>
</div>
</form>
</div>
/** CSS **/
.module-wrap {
width: 200px;
margin: 0 auto;
}
I added the class "hidden-xs" to the row, this will hide the div and everything in it on small devices. Also the columns must add up to a total of twelve.
You will need to wrap everything in a div to limit the total width.
I hope this solves your problem.
Why in the following Bootstrap 3.0 sample the right panel hides completely the form when I reduce the width of the browser?
<div class="row">
<div class="col-sm-9">
<h2>Product selection</h2>
<p>Some text</p>
<hr />
<form action="/Store" class="form-horizontal" id="productForm" method="post" role="form">
<div class="form-group">
<label class="col-md-2 control-label" for="Quantity">Quantity</label>
<div class="col-md-10">
<input class="form-control" id="quantity" name="quantity" onchange="this.form.submit();" type="text" value="1" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input name="nextButton" type="submit" class="btn btn-default" value="Next" />
</div>
</div>
</form>
</div>
<div class="col-md-3" style="margin-top: 20px">
<div class="panel panel-default">
<div class="panel-heading">Your Options</div>
<div class="panel-body">
<p style="line-height: 200%">
Other ways to buy<br/>
</p>
</div>
</div>
</div>
Here is a live test of what happens:
http://www.bootply.com/R4FsSHI4af
To reproduce it you need simply to reduce the width of the browser window.
Thanks.
You are mixing col-sm-9 with col-md-3. Just use one size, for example col-md-9 and col-md-3.
Use this structure instead :
<div class="row">
<div class="col-md-9">
<!-- Content -->
</div>
<div class="col-md-3">
<!-- Panel -->
</div>
</div>
As you're mixing col-sm-9 and col-md-3, you've got :
a 12-12 pattern on small devices
a 9-12 pattern on medium devices : overlap
a 9-3 pattern on large and extra large devices