I'm designing a multi filed search bar for a new website. The website is made in PHP/Javascript/Bootstrap
I need to create 4 fields (3 text field + 1 search button) and they should be aligned in a
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
..here the fields plus button...
</div>
</div>
How can I do that? I tried form-inline but this is the result:
If you do not have particularly problematic requirements like old browser support, you could have fun with Flex.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You have to distribute until 12 cols and center your div like:
Change Your code:
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
..here the fields plus button...
</div>
</div>
For:
<!--Adding some styles for center the row-->
<div class="row" style="margin: 0 auto; display:block; width: 100%;">
<div class="col-lg-2">Field One</div>
<div class="col-lg-2">Field Two</div>
<div class="col-lg-2">Field Tree</div>
<div class="col-lg-6">Your search field</div>
</div>
Please see this for: http://getbootstrap.com/css/#grid more about it.
Related
Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem
Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)
I have 3 divs in a row, I need 3 divs should be aligned in the center.
<div class="row">
<div class="center">
<div class="col-sm-4" id="ph-container"></div>
<div class="col-sm-4" id="do-container"></div>
<div class="col-sm-4" id="water-temperature-container"></div>
</div>
</div>
Use text-center instead of center.
<div class="row">
<div class="text-center">
<div class="col-sm-4 col-sm-offset-1" id="ph-container"></div>
<div class="col-sm-4" id="do-container"></div>
<div class="col-sm-4" id="water-temperature-container"></div>
</div>
</div>
Adding an offset will help you in making the view better.
the total number of cols is 12, if you use 12 cols (4+4+4=12) it will be not in center cose they wil be take all with of parent block.
So you must use less cols
<div class="row">
<div class="col-sm-pull-1 col-sm-3" id="ph-container"></div>
<div class="col-sm-3" id="do-container"></div>
<div class="col-sm-3" id="water-temperature-container"></div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3" id="ph-container"></div>
<div class="col-sm-3" id="do-container"></div>
<div class="col-sm-3" id="water-temperature-container"></div>
</div>
This makes the three divs slightly narrower, and pushes them from the left, making them appear in the centre of the page.
Bear in mind, by making the divs narrower, your graphs may not look correct, so you'll need to correct your styling to adapt into the new div sizes.
This might help you actually: Bootstrap 3 1.5 column offset
I want to place 3 d3 charts in a row I tried doing it using bootstrap fro html but it does not help id there a better way to do this
My current code
<div class="row">
<div class="span4" id="chart_1">23</div>
<div class="span4" id="chart_2">45</div>
<div class="span4" id="chart_3">34</div>
</div>
Fiddle: https://jsfiddle.net/r2qepmk0/3/
If I change bootstrap class to col-xs-4 which otherwise place divs in row but somehow the charts do not render.
js fiddle with the col-xs-4 class https://jsfiddle.net/r2qepmk0/4/
I have updated your https://jsfiddle.net/r2qepmk0/5/ have a look.
<div class="row">
<div class="col-xs-4">
<div class="span4" id="chart_1">23</div>
</div>
<div class="col-xs-4">
<div class="span4" id="chart_2">45</div>
</div>
<div class="col-xs-4">
<div class="span4" id="chart_3">34</div>
</div>
</div>
Just in case if you want remove white space between columns you can try this link
I am using bootstrap 3.3.5, jquery 1.11.3 and the affix script to try to keep my navigation bar at the top of my screen at all times. It has been working well except when I try to add columns with the col-xs-* and col-md-* classes.
For example it scrolls fine with multiple containers in rows like this:
<div id="container" class="container-fluid">
<div id="about" class="container-fluid">
<!--some information here, it scrolls fine-->
</div>
<div id="resume" class="container-fluid">
<div class="container-fluid">
<!--seemingly the problem has to do with using the xs and md tags-->
<div class="row" style="background-color:lavender;">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lavenderblush;">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lightcyan;">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</div>
</div>
<div id="projects_sidescroller" class="container-fluid">
<!--this one scrolls fine as well-->
</div>
I have set up a jsfiddle link with the problem present. When you scroll down to the coloured table, it's text will display on top the navbar instead of hiding below it. https://jsfiddle.net/mhjyw37d/
Add z-index to your affix class.
Like:
.affix {
top: 0;
width: 100%;
z-index: 999;
}
I am trying to create a layout like this :
I wrote html like this :
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-lg-3 col-md-3">
<div class="row">
<div style="height:400px">
container of menu item, which should be fix on top
<div>
</div>
</div>
<!-- Right side -->
<div class="col-lg-9 col-md-">
<div class="row">
<div class="row">
<div style="height:900px">
Div Scrollable <div>
</div>
</div>
</div>
</div>
</div>
How could i achieve this ?? please help me
The Bootstrap Affix may be what you are looking for. It's what the Bootstrap documentation itself uses to keep the menu fixed to the top while the page scrolls.
One of the possible way:
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-xs-3 clearfix" style="height:400px; background: #f00; position: fixed;">
container of menu item, which should be fix on top
</div>
<!-- Right side -->
<div class="col-xs-offset-3 col-xs-9">
<div style="height:900px">
Div Scrollable
<div>
</div>
</div>
</div>
</div>
</div>
+Fiddle
EDIT
I made just simple demo to keep bootstrap padding you need to add one more container inside of left column.