I'm new to bootstrap and CSS in general. I have some html which looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Site</title>
<link rel="stylesheet" href="/css/bootstrap-theme.css">
<link rel="stylesheet" href="/css/font-awesome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1"><span class="fa fa-caret-down"></span></div>
<div class="col-md-1"><span id="cool-title">My Site</span></div>
<div class="col-md-1">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-md-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"></i></button>
</div>
</div>
<div id="main">
</div>
</div>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
</body>
</html>
I want all of those col- divs to be inlined, but they are all showing up on their own rows:
What's going on here?
You are using /css/bootstrap-theme.css. Use /css/bootstrap.css or /css/bootstrap.min.css instead. bootstrap-theme.css doesn't have "col- " properties.
Also, instead of using just one class="col-md-1" (for medium sized viewport/screen) you might want to use something like class="col-xs-12 col-sm-6 col-md-3 col-lg-3" that makes your columns responsive to different screens. ('xs' for extra small screen, 'lg' for large screen etc. Play around with these numbers. Bootstrap uses a 12 columns grid layout, so use factors of 12 as the numbers.)
If you are viewing it with small screen width then use following way:
<div class="row">
<div class="col-md-1 col-sm-1"><span class="fa fa-caret-down"></span></div>
<div class="col-md-1 col-sm-2 col-xs-2"><span id="cool-title">My Site</span></div>
<div class="col-md-1 col-sm-3 col-xs-4">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"> button</i></button>
</div>
</div>
Experiment with changing col-md-#(column number) or others to achieve your desired result.
Liveweave : http://liveweave.com/9MGL33
Maybe your screen resolution is too small. If you don't want to add responsive behaviour, you should start with col-xs-*, so the columns will always be horizontal (or inline).
Remember that bootstrap uses 12 columns by default, so maybe col-xs-1 will be a little to small.
<div class="container">
<div class="row">
<div class="col-xs-1"><span class="fa fa-caret-down"></span></div>
<div class="col-xs-1"><span id="cool-title">My Site</span></div>
<div class="col-xs-1">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-xs-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"></i></button>
</div>
</div>
</div>
In bootstrap 4 for extra small screens do not declare "col-xs-#" it's just "col-#". Took 2 hours of banging my head against the wall to figure it out.
So instead of
<div class="row">
<div class="col-xs-1">L</div>
<div class="col-xs-10">M</div>
<div class="col-xs-1">R</div>
</div>
It should be
<div class="row">
<div class="col-1">L</div>
<div class="col-10">M</div>
<div class="col-1">R</div>
</div>
Related
I am with Bootstrap 4.3.1 and use flex for page layout.
<div class='row d-flex align-items-center'>
<div class='col-lg-12'>
<div class="form-group row">
<div class="col-lg-2">
<label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
</div>
<div class="col-lg-10">
<select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
</select>
</div>
</div>
</div>
</div>
The select element is currently horizontally top-aligned. How can I set the select element horizontally aligned in the middle of the column?
.row in Bootstrap 4 have display: flex so we can remove the d-flex. .align-items-center will only affect the direct children.
<div class='row'>
<div class='col-lg-12'>
<div class="form-group row align-items-center">
<div class="col-lg-2">
<label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
</div>
<div class="col-lg-10">
<select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
</select>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class="all">
<div class="row">
<div class='col-lg-12'>
<div class="form-group row align-items-center">
<div class="col-lg-2">
<label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
</div>
<div class="col-lg-10">
<select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Use align-items-center to the immediate parent .row
Hope it'll help.
I am trying to use bootstrap 4, I have a simple div contains a text box. I want the text box to take the div width. I thought in Bootstrap the input, by default, take the full width?
What is really bugging me is that the code ran correctly here in the snippet??
Here is the sample code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
The above code is exactly what I have. I am not sure this is the right way to do this?
I don't know if this can help, I am using this code inside a view (MVC project).
So the this is how it looks inside visual studio:
Layout:
<div class="container">
<div class="row">
<div class="col-md">
#RenderBody()
</div>
<div class="col-md d-none d-md-block">
<!------>
</div>
</div>
<footer>
<p>© #DateTime.Now.Year - My Project</p>
</footer>
</div>
And this is the view:
<input type="text" class="form-control" placeholder="Email address">
This is how it looks when I render the view (there are other CSS related to background color, etc.. that I didn't add here)
Columns have padding of 15px on both sides. To remove the padding you can...
Use p-0 for padding:0 on the column with input:
<div class="container">
<div class="row">
<div class="col-md p-0" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
Or, you can use no-gutters to remove padding from all cols in the row. This will also remove the negative margins from the row which will effect alignment with the sides of the viewport on smaller screens...
<div class="container">
<div class="row no-gutters">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
Demo: https://www.codeply.com/go/d4AOm39YD3
There are similar answers here, but people wanting to know how to stack their columns on XS display, I want them to STOP stacking.
I have two columns, and for some reason their contents are stacking at some displays. I'm using Bootstrap 4
320 px (XS) display :
480 px (XS) display, this is the only correct one :
800 px (MD) display :
Why are the contents stacking? I don't understand.
Code:
<div class="row justify-content-between">
<div class="input-group col-md-4 col-12 text-center">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button">
<!-- Display none in smaller than sm -->
<span class="d-none d-md-block">Exportar</span>
<!-- Display none in md or larger -->
<i class="material-icons d-md-none">file_download</i>
</button>
</div><select class="custom-select text-center" id="tipo_exportar">
<option value="1">
Kml
</option>
<option value="2">
Csv
</option>
</select>
</div>
<div class="col-md-8 col-12 text-center">
<div class="btn btn-outline-primary">
<i class="material-icons">autorenew</i>
</div>
<!-- Boostrap Multiselect -->
<select id="hide_fields" multiple="multiple">
</select>
</div>
</div>
Another question, I'm using Bootstrap Multiselect, but it doesn't occupy all the space as the regular Boostrap custom select, how I can make them line up? And how can I add some extra vertical space between the two columns?
Most of the utility classes I'm using were try and error, I'm open to suggestions on how to better layout my buttons as I'm very new at Bootstrap
I would recommend re-structuring your code somewhat, to make use of input-group and Bootstrap's Grid correctly. These two should not be combined. Rather; you should wrap input-group in a col-*-* element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 mb-4 md-md-2">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary">
<span class="d-none d-md-block">Exportar</span>
<span class="material-icons d-block d-md-none">file_download</span>
</button>
</div>
<select class="custom-select text-center" id="tipo_exportar">
<option value="1">Kml</option>
<option value="2">Csv</option>
</select>
</div>
</div>
<div class="col-12 col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<div class="btn btn-outline-primary">
<span class="material-icons">autorenew</span>
</div>
</div>
<select class="custom-select" id="hide_fields" multiple="multiple">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
A couple of notes on the above code:
(1) You will need to expand the snippet or view this same code on Bootply ( https://www.bootply.com/gCYqfuhpIe )
(2) You seem to be using additional CSS to modify the look/feel of Bootstrap. This answer shows you the default styles of Bootstrap 4, which are noticeably different in terms of border radius as well as how it handles a <select> with the multiple attribute. Depending on how extensively your CSS alters Bootstrap adopting this layout to that CSS might require additional work.
In this line
<div class="col-md-8 col-12 text-center">
add the col-xs-12class to allow the full horizontal space for its contents. So that's:
<div class="col-xs-12 col-md-8 col-12 text-center">
I'm making a very simple form for an Electron app I am making to experiment with the software, however, I am stuck on the most basic of things... the interface design.
I'm using Bootstrap 4 for my interface and am trying to centre the form vertically, however, I am getting mix results using various suggestions made on other's questions on the same topic. They either do not work or squeeze all my content onto a single line and generally mess the current layout up.
Any suggestions on how I can vertically align the items in the container below?
<!-- Search Field -->
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-auto">
<h1 class="text-white">Shorten M' URL!</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>
Are you looking for this?:
.vh-100 {
height: 100vh;
}
<div class="container vh-100 bg-dark">
<div class="row vh-100 justify-content-center align-items-center">
<div class="col-6 text-center">
<h1 class="text-white">Shorten M' URL!</h1>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
Basically you have to have the container to fit the screen height. Once there, you can align it's items vertically.
I'm using Twitter Bootstrap (latest version - 2.3.2) for a site I'm building, and want to achieve the following while keeping the site responsive, and also applying best practices for it.
Here's a very rough sketch of what I want to have:
The site has a basic header with fixed navbar, a content-fluid div which has three inner divs: a span5, span6, and span1 (for a total of 12 columns). After the content div, a sticky footer with company/copyright info and such.
The problem I'm having is with the span1 column. It is basically decorative (it has 4 vertical color bars, sized at 25% width each), but I'd like to have:
Social link icons vertically-centered in the column (Twitter, Facebook, LinkedIn, etc), as shown by the black boxes.
Text rotated 90 degrees counter-clockwise inside each colored bar. It's only one word each, and is not a priority.
Each bar stretching to fill the full height of the parent container (in this case, the content div), since the height of the page is currently set by the highest div, whether it's span5 or span6.
I know there are probably lots of ways to achieve this (pure CSS, javascript, background-image tiling), but I'm looking for the best practices: avoiding extra markup, using right techniques, in order to learn as much as possible. I've tried setting the parent container (and inner bars) to height: 100%; and playing with min-height as well, but min-height doesn't (seem to) work with percentages.
Any help and/or constructive criticism is very welcome.
Edit: JSFiddle and full code added: JSFiddle
Also, link to the original site (in case JSFiddle screws something up): Original page
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="#">Geología y Telecomunicaciones, C.A.</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Inicio
</li>
<li>Acerca de
</li>
<li class="active">Contacto
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div>
<div class="decorative-lightblue"></div>
<div class="decorative-purple"></div>
<div class="decorative-orange"></div>
<div class="decorative-lightorange"></div>
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row-fluid content clearfix" style="margin-top: 60px;">
<div class="span5">
<div class="row-fluid">
<div class="span5">
<div class="span12 logo"></div>
<div class="sidebar-intro">Construcción, Adaptación,
<br/>Adecuación y Remodelación
<br/>de <span class="emphasis-red">
locales<br>comerciales<br>empresariales
</span>
</div>
</div>
<div class="span7">
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&ll=8.561755,-71.204721&spn=0.004716,0.006571&t=m&z=18&output=embed"></iframe>
<br /><small>Ver mapa más grande</small>
</div>
</div>
</div>
<div class="row-fluid">
<div class="contact-wrapper well">
<form>
<div class="control-group">
<label class="control-label" for="inputName"><i class="icon-user"></i> Nombre</label>
<div class="controls controls-row">
<input type="text" class="span12 input-xlarge " id="inputName" placeholder="Su nombre completo">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-envelope"></i> Correo electrónico</label>
<div class="controls">
<input type="text" class="span12 input-xlarge" id="inputEmail" placeholder="nombre#sudominio.com">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-question-sign"></i> Asunto</label>
<div class="controls">
<input type="text" class="span12 input-xlarge" id="inputSubject" placeholder="Asunto de su mensaje">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-pencil"></i> Mensaje</label>
<div class="controls">
<textarea rows="6" class="span12 input-xlarge" placeholder="Haganos llegar sus comentarios, sugerencias, consultas, etc."></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-success">Enviar Mensaje</button>
</div>
<br class="clear">
</div>
</form>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid span12">
<img class="span9 offset2" src="http://geotelca.com/sitio/assets/img/examples/flyer_back.png">
</div>
<div class="row-fluid">
<div class="row-fluid span12 address"> <address>
Zona Industrial Los Curos, Calle 1, Edif. Geotelca No. A-8, Mérida, Edo. Mérida
</address>
</div>
<div class="row-fluid e-mail">
<div class="span4 offset6"> direccion#geotelca.com
</div>
</div>
</div>
</div>
<div class="span1 social-links">
<div class="row-fluid vertical-bars">
<div class="span3 bar bar-lightblue"></div>
<div class="span3 bar bar-purple"></div>
<div class="span3 bar bar-orange"></div>
<div class="span3 bar bar-lightorange"></div>
</div>
</div>
</div>
</div>
<!--/.container-fluid-->
<div id="push"></div>
</div>
<!--/#wrap-->
<div id="footer">
<div>
<div class="decorative-lightblue"></div>
<div class="decorative-purple"></div>
<div class="decorative-orange"></div>
<div class="decorative-lightorange"></div>
</div>
<div class="container">
<p class="muted credit">Diseñado, codificado y mantenido por #kenshin23
</p>
</div>
</div>
I would say your best bet here would be one of the jQuery plug-in out there to accomplish this ... eqHeight.coffee seems to be pretty well documented:
https://github.com/jsliang/eqHeight.coffee/
As for centering those social links in that vertical space, you'd likely have to use more Javascript to do that. Although, honestly I'd probably put them in a div container with position: fixed; and let them slide up and down that column as the user scrolls.
EDIT:
Just noticed you added your HTML file ... in the case of the first plug-in I linked to, you would need to add a class (perhaps 'eq-height') to each of the columns whose heights you wanted to match (that first outer span5 and span6 and then all the bar column divs individually). Then on jQuery document ready, use:
$(document).ready(function() {
$(".content").eqHeight(".eq-height");
});