I am trying to horizontally center some text with the search bar using Bulma CSS, but it didn't work out the way I wanted. I tried using columns, but they are usually pulled all the way over at the edge or not placed properly. I also tried using levels but they also had similar results that I didn't want. Please help.
Here is my code:
<div class="container section">
**<p> I want to make this tag to be in the same line as the search box </p>**
<div class="field has-addons is-pulled-right">
<div class="control">
<input class="input" type="text" placeholder="Search competition">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</div>
I want to have some text aligned to the left of the container and the search box located on the opposite right side of the row. Thank you.
Can you describe what issues you were having with the columns? Did you try using the .is-vcentered class on the .columns div?
Make sure to view the following code in a full screen.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<div class="container section">
<div class="columns is-vcentered">
<div class="column">
<p style="border: 1px solid #ccc;"> I want to make this tag to be in the same line as the search box </p>
</div>
<div class="column">
<div class="field has-addons is-pulled-right">
<div class="control">
<input class="input" type="text" placeholder="Search competition">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</div>
</div>
</div>
OR I see that you said horizontally centered. Did you try the .is-centered class on the .columns container and the .is-narrow class on the .columns?
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<div class="container section">
<div class="columns is-centered is-vcentered">
<div class="column is-narrow">
<p style="border: 1px solid #ccc;"> I want to make this tag to be in the same line as the search box </p>
</div>
<div class="column is-narrow">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Search competition">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</div>
</div>
</div>
Related
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<body class="grey darken-4">
<div class="container">
<div class="row">
<!-- I have tried adding center, center-align as a class to div tags but it in correctly formats. My form elements to the center which was not what I except -->
<div class="col s12 m6 l10">
<!-- adding center, center- align to the row still doesn't fix the issues still -->
<div class="card">
<div class="card-content">
<span class="card-title center ">Loan Calculator</span>
<form action="">
<div class="input-group">
<div class="input-field">
<span>$</span>
<input type="number" class="form-control" placeholder="Amount">
</div>
<div class="input-field">
<span>%</span>
<input type="number" class="ïnput-field" placeholder="Loan" class="form-control">
</div>
<div class="input-field">
<input type="number" class="form-control" placeholder="Years To Pay">
</div>
<div class="center">
<input type="submit" value="CALCULATE" class="btn black">
</div>
<h5 class="text-darken-3 center " id="result">Results</h5>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
I don't know if this is a current issue with Materialize CSS itself.
My goal is to properly format the card so that it has 6 columns for medium display. However, the card, when resized to small width, behaves in a erratic manner (the content is aligned to the left, and the space on the right is left empty).
The cause of the "issue" (I would say it is by-design) is the combination of float: left; and margin-left: auto; with no margin-right: auto; rules applied for columns with .col.m* classes. Because of this, columns are always snapped to the left of the containing row.
If you want to override this to center your column, you need to specify an offset. What Materialize CSS Grid (implemented with float) expects you to do is to express that the column taking ½ of the containing row width should be offset by 6 divided by 2 columns on both sides (aka "centered").
Offsets in Materialize CSS are provided with the offset-* set of classes. In your case, you only need the offset-m* and offset-l* subsets. Let's take a look:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<body class="grey darken-4">
<div class="container">
<div class="row">
<!-- I have tried adding center, center-align as a class to div tags but it in correctly formats. My form elements to the center which was not what I except -->
<div class="col s12 m6 l10 offset-m3 offset-l2">
<!-- adding center, center- align to the row still doesn't fix the issues still -->
<div class="card">
<div class="card-content">
<span class="card-title center ">Loan Calculator</span>
<form action="">
<div class="input-group">
<div class="input-field">
<span>$</span>
<input type="number" class="form-control" placeholder="Amount">
</div>
<div class="input-field">
<span>%</span>
<input type="number" class="ïnput-field" placeholder="Loan" class="form-control">
</div>
<div class="input-field">
<input type="number" class="form-control" placeholder="Years To Pay">
</div>
<div class="center">
<input type="submit" value="CALCULATE" class="btn black">
</div>
<h5 class="text-darken-3 center " id="result">Results</h5>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
I am still new to bootstrap and also html/css at that.
What I am trying to do is to align the inputs on the same row,
I've looked up advice and have put it in a container but the
two inputs are still showing on different rows.
html
<div class="container">
<div class="row">
<div class="col-md">
<h3>Startdate From:</h3>
<input name="stardatefromDTP" type="date" />
</div>
<div class="col-md">
<h3>Startdate To:</h3>
<input name="stardatetoDTP" type="date" />
</div>
</div>
</div>
Can anyone help me out with this?
This will work, though you'll need to mess around with the column sizes to get the formatting exactly how you would like:
<div class="container">
<div class="row">
<div class="col-md">
<div class="row">
<div class="col">
<h3>Startdate From:</h3>
</div>
<div class="col">
<input name="stardatefromDTP" type="date" />
</div>
</div>
</div>
<div class="col-md">
<div class="row">
<div class="col">
<h3>Startdate To:</h3>
</div>
<div class="col">
<input name="stardatetoDTP" type="date" />
</div>
</div>
</div>
</div>
Alternatively you can use the label element instead:
<label class="h3" for="startdate">Startdate From:</label>
<input type="date" class="form-control" id="startdate" />
I believe h3 is a block element so the col-md will stretch to accommodate. Try col-md-6 to force it to be smaller. The col classes refer to columns and bootstrap divides the screen into 12, so col-md-6 should make room for 2 inputs in 1 row.
I am trying to implement a single page application where I want divs to display one below the other. But on resizing the viewport to various screen sizes, the positioning is getting overlapped and leaving extra spaces in between. I have codepen example to explain the problem in a better way.
https://codepen.io/SaloniDesai/pen/zPBZJr
How to make the divs appear same for every screen size ?Do i need to shuffle the way I have created the layout of the page ?
<div id="headliner" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="row">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}" title="{{g.title}}">
</div>
</div>
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="row">
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}" height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
First, your bootstrap structure isn't good, there isn't container, neither rows or col.
Try this one:
<div class="container-fluid">
<div class="row">
<div id="headliner col-md-12" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
</div>
<div class="row">
<div id="search">
<div class="col-md-12">
<form class="form-inline text-center col-md-6 col-md-offset-3">
<div class="form-group">
<input class="form-control" type="search" ng-model="vm.search.gif" value=""
placeholder="type what you're looking for"/>
</div>
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}"
title="{{g.title}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}"
height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
</div>
Second, you add a lot of absolute class with % height and width. You don't have to do that if you're using bootstrap, all the responsive stuff is handled by the bootstrap grid with col classes. Take a quick look at the grid bootstrap documentation : https://getbootstrap.com/docs/3.3/css/#grid
Here's the codepen working responsively with some modification : https://codepen.io/anon/pen/MOemgw ;)
I'm having issues with input boxes overlapping each other as the screen starts shrinking down in width. Is there way to fix this in bootstrap 2 files or directly adjusting the css inline?
Here is the main page that holds the content.
<div class="content-center">
<div class="container">
<div class="row-fluid">
<div class="span9">
<div class="content-area">
//WHERE CONTENT IS LIVING
</div>
</div>
<div class="span3">
<div class="sidebar">
<div class="content-area">
</div>
</div>
</div>
</div>
</div>
</div>
Here is the actual code where the content is at.
<div class="well">
<div class="row-fluid">
<div class="span4">
<h4>Dinner Banquet w Cocktail Reception Total:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span><INPUT NAME="xbrunchdinneronlytotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getbrunchdinnertotal(this);" value="0" >
</div>
</div>
<div class="span4">
<h4>Wine Tour:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:18px;">Qty</span>
<input type="text" name="xwinetouronly" onKeyUp="javascript:getwinetouronlytotal(this);" placeholder="Enter Quantity">
</div>
<h4>Total:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span>
<INPUT NAME="xwinetouronlytotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getwinetouronlytotal(this);" value="0"></div>
</div>
<div class="span4">
<h4>Exhibit Fee:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span>
<INPUT NAME="xhibittotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getgolftotal(this);" value="0" >
</div>
</div>
</div>
</div>
Here is the browser width at 1199px
And here is the browser width at 979px
So is there any way to fix this. I know I can mess with the media query in my own custom css but im also wondering if I can fix this in the bootstrap 2 source files. Or Just fix this directly with inline CSS
Put all your inputs into columns
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Dinner Banuqet
//input field
</div>
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Wine Tour
//input field
</div>
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Exhibit Fee
//input field
</div>
on a large and meduim screen there will be 3 columns with the content taking up the whole screen. On small and extra small screens the content will be vertically aligned. You can add the cols directly into your input-append class
After various attempts with pull-right, float style and row-fluid, I decided to ask here:
What I try to do is simply to have a Map appear to the right of a set of rows.
Here is how it looks right now:
Which is not too far from what I want, but the name row plus any following rows should appear below each other.
Here is how my HTML looks:
<div class="panel-body">
<div class="row-fluid">
<div class="col-lg-10 pull-right">
<google-map id="my-map" bounds="map.bounds" events="map.events"
center="map.center" zoom="map.zoom" draggable="true"
control="map.control"> <marker ng-if="positionMarker"
coords="positionMarker" icon="positionMarker.icon"> </marker> </google-map>
</div>
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</div>
</div>
I bet this is a typical scenario but I have failed to find an example.
Other attempts that makes name appear below number, moves it below the map.
Is it perhaps possible to avoid having the map take up vertical space in the Bootstrap grid system?
You should use a 2-col layout :
Left column for your inputs
Right column for your Google Map
Plus, remember to put your .input-group inside a .form-group to get paddings/margins set to Bootstrap default values.
Here's a working example (click on Full page for a better view):
body {
padding-top: 25px;
}
.map {
width: 100%;
height: 150px;
background: tomato;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel heading</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</form>
</div>
<div class="col-xs-6">
<div class="map"></div>
</div>
</div>
</div>
</div>
</div>