I am using Bootstrap 3 and I want 3 columns to remain responsive throughout different sized (lg -> xs). I am trying to use the grid system with col-xx-4 for each size, but as soon as I get to <992px the column start collapsing on each other.
example can be see here
I want the red, green, and blue columns within the gray box to be always equal 3 columns. Maybe in xs they can collapse, but at least until 768px viewport they should be 3 columns next to each other.
I used col-xs-4 that should keep things horizontal at all times.
excerpt of some of my code:
<div class="dash-bg">
<div class="" style="background: #d5d5d5; height: 500px;">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: red; height: 30px;">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: blue; height: 30px;">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: green; height: 30px;">
</div>
</div>
</div>
Well, you should add class "Row" to Header..
Code snippet here :
<div class="header row">
<div class="logo pull-left" style="background:black;">
</div>
<div class="pull-right" style="margin-top: 6.2%;">
<ul class="nav nav-pills">
<li>COMPANY<span class="arrow-down glyphicon glyphicon-play"></span></li>
<li>FAQ</li>
</ul>
</div>
<!--
<div class="navbar-header dropdown">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="dropdown" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"></a>
</div>
-->
</div>
Defining DOM element row will make sure that the maximum height of any child DOM element will be the maximum height of the parent DOM.
Sounds like you need to use a media query OR make your dash-bg {min-width:993px;}
I have something similar and i use
<div class="row">
<div class="col-md-4">Something</div>
<div class="col-md-4">Something</div>
<div class="col-md-4">Something</div>
</div>
You can check an example here
Related
I'm working on making a site, and im currently dealing with BS4.1.3
I'm still new to this world so i have this issue right now:
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-4">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
</a>
</div>
<div class="col-md-4">
Test
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
But the end result it's like this
While i wanted that the first blue button and the "logo" (B) were aligned, "test" a lot more in the right part of the navbar
Also the bottom search bar should be the same width as the container, so full lenght
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-8 pull-right">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
<span>Test</span>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
.collapse input{
width:100%;
}
I am on mobile Stack Overflow app hence not able to test this.
In Bootstap 4, to put the test at the right of the navbar you can try,
<ul class="navbar-nav ml-auto">The content which goes to right comes here as a li</ul>
Also for aligning the blue button (The button you are using here is called as hamburger, remember that) can be aligned by using some margin-top for it.
Just use a CSS selector to select the hamburger and give some margin-top property to it.
Please consider adding a codepen so that we mobile users can play around with your code.
I'm using Bootstrap's grid system. I have 3 divs inside a "row", and inside each of those divs are nested controls.
When I horizontally decrease the browser size, the 2nd and 3rd div in the row are overlapping the 1st div. I want them to wrap, not overlap.
How can I achieve this?
Here is my code:
<!-- SEARCH CONTROLS -->
<div class="row">
<!-- Left side search boxes and search button -->
<div class="col-xs-5">
<div class="article" id="SAorPIList">
<select style="min-width: 215px; max-width: 300px;" class="col-xs-4 form-control" data-bind="value: selectedSAPIValue, options: saorpi, optionsText: 'Name', optionsValue: 'CmeTypeId', optionsCaption: 'Select SA or PI'"></select>
</div>
<div class="col-xs-5" style="padding-top: 20px;">
<select style="max-width: 300px;" class="specialties-class form-control" name="Name" id="SpecialtyId"></select>
</div>
<div class="col-xs-5" style="max-width: 150px; padding-top: 20px; padding-left: 175px;">
<button id="btnDropDownsSearch" class="btn btn-search collapsed" type="button">
<i class="icon-search"></i>
</button>
</div>
</div>
<!-- The world "OR" in the center of the page -->
<div class="col-xs-2" style=" padding-left: 75px; padding-top:50px;">
<strong style="display:inline;">OR</strong>
</div>
<!-- Right side search box -->
<div class="col-xs-5 pull-left" style="padding-bottom: 50px; min-width:400px;">
<span><strong style="text-align:left;">Activity Search</strong></span>
<div class="col-xs-4 input-group pull-left input-group-lg" style="padding-top:50px;">
<input id="txtFreeformSearch" class="form-control" type="search" style="min-width:175px;" />
<div class="input-group-btn">
<button id="btnFreeformSearch" class="btn btn-search collapsed" type="button">
<i class="icon-search"></i>
</button>
</div>
</div>
</div>
</div>
When you say, you nesting controls to div; Do you mean somethink like this?
.row > div {
background: lightgrey;
border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
</div>
I solved this by defining min-width inside a good number of the tags.
This allowed the DIVs to wrap in PC, tablet, and mobile formats.
I would post the resulting HTML, but I think it would affect too few readers to make it worthwhile. I say this because there is a knockout control and select2 control within the HTML, and some of their UI properties are defined in javascript.
I have one row and two columns in it. Right column's content overlaps to left column. Here is my codes.
Even in the large screen I see that (in below code) <div class="row hidden-xs" style="border-bottom: 2px solid lightgray;">
this border overlaps to left.
Here is how it looks
How do I prevent overlapping their contents?
<div class="row">
<div class="col-lg-2" style="letter-spacing: 1px;">
<img src="~/Content/images/kitap/kitap2.jpg" style="width:250px; height:350px;"/>
<h5><b>ISBN:</b>1234567891</h5>
<h5><b>Kapak Türü:</b> Sert Kapak</h5>
<h5><b>Baskı No:</b>16</h5>
<h5><b>Yayınevi:</b>Publishing </h5>
<h5><b>Yıl:</b> 2005</h5>
</div>
<div class="col-lg-10">
<ul class="nav nav-tabs">
<li class="active">Yeni ve 2. El</li>
<li>Kirala</li>
<li>Kitap Detaylı Bilgileri</li>
<li>Kitap Yorumları</li>
</ul>#*nav nav-tabs*#
<div class="tab-content">
<div class="tab-pane active" id="satinAl">
<div class="row hidden-xs" style="border-bottom: 2px solid lightgray;">
<div class="col-md-3">
<h5><b>Fiyat + Kargo</b></h5>
</div>
<div class="col-md-3">
<h5><b>Kitabın Durumu</b></h5>
</div>
<div class="col-md-3">
<h5><b>Tahmini Teslim Tarihi</b></h5>
</div>
<div class="col-md-3">
<h5><b>Satıcı Bilgileri</b></h5>
</div>
</div> #*Başlık 1. row*#
<div class="row">
<div class="col-md-3">
<h5><b>39.87 TL</b></h5>
<h6>3.99 TL Kargo</h6>
</div>
<div class="col-md-3">
<h5><b>Çok İyi</b></h5>
<h6>Kitap çok iyi durumdadır. Çizgi karalam yoktur. Çok iyi müşteri hizmetleri. Alan Memnun</h6>
</div>
<div class="col-md-3">
<h5><b>Feb. 24 - Mar. 3.</b></h5>
<h6>Satıcı İade Politikası</h6>
</div>
<div class="col-md-3">
<h5><b>Jenny Blue</b></h5>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
100% Pozitif
</div>
</div> #*Ilk Satıcı 2. row*#
</div>#*tab-pane active Satın Al*#
<div class="tab-pane" id="kirala">
<p>Çok yakında hizmetinizde</p>
</div>
</div>#*tab-content*#
</div>#*col-md-10*#
</div>#*row*#
To make columns to behave responsively you need to remove fixed dimensions of image:
<img src="~/Content/images/kitap/kitap2.jpg" style="width:250px; height:350px;"/>
and set class="img-responsive" to it:
<img src="~/Content/images/kitap/kitap2.jpg" class="img-responsive"/>
here is a working example
It is because the image is bigger than the column.
You need either to use bootstrap img-responsive class and remove the width and height attributes in img
or
make the cols bigger , ex: use col-lg-4 for the first column and col-lg-8 for the second column.
I am working with a legacy bootstrap tool for my company. An issue I am having is using panels from bootstrap 3 in the legacy version.
While this is working to an extent, there are some span issues that are coming up.
I have a container with a panel on the page which is inside of a span12 (full length of the page). Within the panel, I am trying to add another panel that is full width of it. Normally I would say, span12 and it would adjust it to what is necessary but in this case, its causing it to hang over.
Here is a sample of the HTML being used:
<div id="main" class="container">
<div class="panel panel-primary custom-panel">
<div class="panel-heading ph"> <span class="panel-title"><i class="icon-bullhorn"></i> Request Communication</span><button name="addComment" commenttype="request" type="button" class="btn btn-mini pull-right"><i class="icon-plus"></i> Add Comment</button></div>
<div class="panel-body well">
<div id="requestComments" class="tab-pane active">
<span name="messages">
<div name="parent_32" class="row parentMessage">
<div class="span12">
<div class="panel panel-default">
<div class="panel-heading">
<small><a target="_BLANK" href="#">Name</a> <span class="text-muted">commented <a title="Timestamp: 2015-08-24 11:20 UTC" data-toggle="tooltip" class="deco-none">2 days ago</a></span></small>
<div class="btn-group pull-right">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-mini dropdown-toggle" type="button"><i class="icon-cog"></i></button>
<ul class="dropdown-menu">
<li><a messageid="32" name="deleteParent"><i class="icon-trash"></i> Delete Message</a></li>
</ul>
</div>
</div>
<div class="panel-body"><small>dgdfgdfg</small></div>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/j2j6gnb1/
How can I go about making the inner panel, the full width of its parent (with the same padding it has on the left)?
Remove the margins being set on elements .parentMessage and .span and set width: 100% on the .span12 element.
.parentMessage {
margin: 0;
}
.span12 {
width: 100%;
margin: 0;
}
Fiddle
I have a toolbar. When I click on it I have many panels appear on the screen as drop-down.
In the tablet view I want all the panels to collapse and When I click on the panel-heading I want the panel-body to open.
I am poor in css can anyone help me.
Here is the code.
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
<div class="panel-body">
<div class="panel panel-info">
<div class="panel-heading">
<a >First heading</a>
</div>
<div class="panel-body">
<ul class="">
<li><a >item1</a></li>
<li><a >item2</a></li>
</ul>
</div>
</div>
</div>
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
<div class="panel-body">
<div class="panel panel-info">
<div class="panel-heading">
<a>second heading</a>
</div>
<div class="panel-body">
<ul class="">
<li><a >item4</a></li>
<li><a >item3</a></li>
</ul>
</div>
</div>
</div>
As you are using bootstrap accordion. You need to remove class in from your panel-collapse div.
Instead of
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
Write
<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse" style="height: auto;">
in is the class, which makes the content panel visible. So if you want all the panels collapse, remove it form every panel container. If you want only one panel to be visible while others should be collapsed, then put it in that panel container only.
Let me know if this helps. :-)
Bootstrap has specialized classes and data-* attributes for these types of tasks.
1) First, in order to make your panel act as an accordion, you need to give:
<a data-toggle="collapse" data-target="#panel1">Heading</a>
where panel1 is the id of your panel-body.
2) Next, since you want your panel-body to be collapsed at first, give the collapse class next to your panel-body:
<div id="panel1" class="panel-body collapse">
Have a look at the demo here to make things clear.
<div class="panel-body columnBody" id="accordion2">
<div class="panel panel-info">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" data-target=".Empty">{{item.key}}</a>
<button class="btn navbar-btn displayMobile" data-parent="#accordion2" data-target=".view{{$index}}"><span class="caret"></span></button>
</div>
<div class="panel-body itemList view{{$index}}">
<ul style="margin-bottom: 0px;">
<li ng-repeat="ke in item.values">{{ke}}</li>
</ul>
</div>
</div>
</div>
css code:
#media screen and (min-width: 850px){
.displayMobile{
display: none;
}
.itemList{
display: none;
}
}