I am using Bootstrap in my MVC 4 application to align,
My page loads inside Kendo panel
Most of the time it works correctly,
but some times the span is not aligned properly when the page loads for the first time, after i manually resize the window the spans align correctly.
Here is what i am trying to achieve(This works well most of the time)
span1 span2
span3 span4
This is what i get
s p a n 1
s p a n 2
s p a n 3
s p a n 4
HTML inside razor
<div class="container-fluid">
<div class="row-fluid">
<div class="span5">
<div class="form-horizontal">
<!-- Form elements removed-->
</div>
</div>
<div class="span5">
<div class="form-horizontal">
<!-- Form elements removed-->
</div>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<div class="form-horizontal">
<!-- Form elements removed-->
</div>
</div>
<div class="span5">
<div class="form-horizontal">
<!-- Form elements removed-->
</div>
</div>
</div>
Additional info
Browser IE 9
Bootstrap version 2
Related
I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
and here's the where I'm at:http://jsfiddle.net/L3789n7u/1/
Any help is greatly appreciated. Thanks!
~Tony
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6">
<div class="well">
<div class="profile-image">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg">
<div class="card-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As ever you have multiple options, here is example of one of them.
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6" style="border: 1px solid black;">
<div class="row">
<div class="profile-image" style="float:left;">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
</div>
<div class="profile-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
<div class="profile-link">
VIEW PROFILE
</div>
</div>
</div>
</div>
</div>
</div>
Basically you need to make profile image to float left, so other content will appear next to it. Also because your example how you would like it contains border around card you need to wrap image, info and link in row. If you want to customize image size you can still use all Bootstrap's col-size-number.
Working example on JSFiddle
Is it possible to have 3 columns (3,6,3) on a wide screen but when brought to mobile or iPad size, the center column drops down so you effectively have the 2 '3' columns come together as '6','6' and under them stacks the full width '12' column?
Currently I have tried the html below, but this stacks them all three on top of each other at the mobile level, rather than dropping the center down to it's own new row.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">TESTING LEFT</div>
<div class="col-sm-12 col-md-6">TESTING MID</div>
<div class="col-sm-6 col-md-3">TESTING RIGHT</div>
</div>
</div>
One way to do this is to create two "Mid" divs, show one when the screen is large, but hide that one when the screen is small. Hide it by adding hidden-md and hidden-lg. Also add hidden-sm and hidden-xs to the first one.
I created a demo with styling so you can see the different divs more easily.
Bootply Demo
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">TESTING LEFT</div>
<div class="hidden-sm hidden-xs col-xs-12 col-md-6">TESTING MID</div>
<div class="col-xs-6 col-md-3">TESTING RIGHT</div>
</div>
<div class="row hidden-md hidden-lg">
<div class="col-xs-12 col-md-6">TESTING MID</div>
</div>
</div>
In your situation, you can do that with push and pull classes:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">LEFT md first in content</div>
<div class="col-sm-6 col-md-3 col-md-push-6">Right md Second in content </div>
<div class="col-sm-12 col-md-pull-3 col-md-6">Central MD last in content</div>
</div>
</div>
DEMO: http://jsbin.com/muvov/1/
I am new to Bootstrap and I am having trouble trying to get my layout to work based on device resolution. I'm testing using Apple devices only right now, but when I open my page on an iPhone, I want my format to be XS and show my information in 2 columns. If the device is SM or larger, I want my information to show in 4 columns. With my sample below, my iPhone 5s shows the information in 4 columns (looking at display held vertically, long ways top/bottom), not 2. What am I doing wrong?
<div class="panel panel-default">
<div class="panel-heading"Panel Header</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-4 col-sm-2 text-right">First:</div>
<div class="col-xs-8 col-sm-4 text-left">John</div>
<div class="col-xs-4 col-sm-2 text-right">Home:</div>
<div class="col-xs-8 col-sm-4 text-left">905-555-1111</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-2 text-right">Last:</div>
<div class="col-xs-8 col-sm-4 text-left">Smith</div>
<div class="col-xs-4 col-sm-2 text-right">Work:</div>
<div class="col-xs-8 col-sm-4 text-left">905-555-2222</div>
</div>
</div> <!-- panel body END -->
</div> <!-- panel END -->
Sample in jsfiddle
This happens when the meta viewport is missing:
<meta name="viewport" content="width=device-width, initial-scale=1">
I am using Bootstrap v-3.0.2. And I faced an issue while using pull-right into div col class.
please have a look at following URL.Check both full screen and minimized view.
Bootstrap-3 issue
In Mobile-view both panels are merged. But it should be separate.
Both div panels class has grid axis value 12 (col-xs-12).
If I am try with different value it is working fine.
Is it a bug on bootstrap 3 ?
Use col-sm-push and col-sm-pull instead.
Also, you don't need to use col-md-6 and col-lg-6 if you want 50% width columns on any screens larger than xs...
<div class="container">
<!-- div's are merged.But It should be one after another -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Right Panel</h3>
</div>
<div class="panel-body">
Right Panel content
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Left Panel</h3>
</div>
<div class="panel-body">
Left Panel content
</div>
</div>
</div>
</div>
</div>
Bootply
I'm not sure why you would need to add .pull-right to the columns, but if you add .clearfix to the other column, it should resolve this issue.
I think you might get better results using the .col-xx-pull-x and .col-xx-push-x classes to accomplish the same thing. See the grid documentation "Column Ordering" section for more info on this.
Im using twitter-bootstrap in my rails app
i was following this tutorial : http://untame.net/2012/08/twitter-bootstrap-build-a-stunning-two-column-blog/
and i have the same span 8 main element with a span4 widget sidebar
but for some reasons it looks like this : http://s11.postimage.org/y2cf9wlrn/Bootstrap_Sidebar_fail.png
does anyone know what is going on ? i have tried to increase the container size & lowering the main elements span size but that doesn't help
btw the app is responsive
here is how my layout file looks
<div class="navbar navbar-inverse navbar-fixed-top">
#navbar removed for clearer code
</div><!-- end of Navbar -->
<div class="container">
<div id="myCarousel" class="carousel slide">
#carousel removed for clearer code
</div> <!-- Carousel items -->
<div id="user_nav" float="left">
#removed for clearer code
</div><!-- Flash messages-->
<div class="row">
<div class="span8">
<div class="hero-unit">
<!-- page specific content is loaded here -->
<%= yield %>
</div>
</div><!-- end main area -->
<aside class="span4"><!-- Sidebar starts here -->
<div class="row">
<div class="widget span4">
#widget removed
</div><!-- end widget -->
</div><!-- end widget row -->
</aside><!-- end sidebar -->
</div><!-- end row -->
#footer removed
</div><!-- end container -->
it seemed like you had some opened div tags that werent closed.. so checking your source for that would help it as the layout you posted seems to be correct
Are you sure that your ".span8" and ".span4" elements are inside ".container > .row"?
<div class="container">
<div class="row">
<div class="span8">...</div>
<div class="span4">...</div>
</div>
</div>