So basically I want to have 2 extra panels show up on the left and right on md and higher, but hide it when on sm and xs. The hiding works fine, but not the showing.
They do show up on the left and right, but the problem is the spacing between the crumbs and navigation. The crumbs get pushed down as I add content to the right panel. When I add to the left panel it gets pushed to the side..
Nothing on the left but something on the right is the same as the first picture
Here's what I mean:
I need it to be on the third picture so that crumbs stay right below nav.
Here's my code:
<div class="container">
<h1>Bootstrap grid (Bootstrap)</h1>
<div class="site-box">
<div class="container-fluid">
<div class="row">
<!-- HEADER -->
<!-- Logo -->
<div class="col-xs-4 col-md-3">
logo
</div>
<!-- Search -->
<div class="col-xs-8 col-md-6">
search
</div>
<!-- Control Panel -->
<div class="col-xs-12 col-md-3">
control panel
</div>
</div>
<div class="row">
<div class="col-md-3 hidden-xs hidden-sm">
extra panel
</div>
<!-- NAVIGATION -->
<div class="col-xs-12 col-md-6">
nav
</div>
<div class="col-md-3 hidden-xs hidden-sm">
extra panel
</div>
<div class="clearfix visible-md-block"></div>
<!-- Crumbs -->
<div class="col-xs-12 col-md-6 col-md-offset-3">
crumbs
</div>
</div>
</div>
</div>
</div>
If you want the crumb to stay under nav, then put both in one container with col-md-6, and give them both col-md-12.
The reason I suggest that is because it looks like the content in 'extra panel's changes (pic 2 to pic 3), so affecting the height of the 'extra panel's.Getting crumb to sit in the middle with the container heights next to it changing could be challenging.
Related
Is there any way that i achieve this design but still using the bootstrap griding system?
I want to make that design. In the sides of the div there should be an accordion like div so that i can click to close the div. I tried using col-md-5 but the grid is to much space just for side panel like. I just want a small div in right side and left side.
What about putting the text <div> inside the <div class="col-md-6">
It would be something like this :
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-1">
<!-- text -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-offset-11 col-md-1">
<!-- text -->
</div>
</div>
</div>
</div>
</div>
I'm having trouble with the bootstrap grid system. The div below <div class="col-xs-12 col-md-4"> should be on the right side while the other divs are on the left. Currently the first two column divs are correct and rendering at the top, but then the third column div doesn't render until the bottom of the image rather than alongside it. I need them to display correctly, what can I do?
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<div class="col-xs-12 col-md-4">
<img src="images/tie.png">
</div>
<div class="col-xs-12 col-md-7">
<div class="loginText">
Get information about your Connect plan
<br><br>
If you have any problems logging in, please contact your account manager for help.
<br><br>
</div>
</div> <!-- cols -->
</div> <!-- row -->
</div> <!-- container -->
It looks like this
The third div needs to be moved up under the first div, but it's currently below the height of the second div.
Bootstrap's framework is build on a 12 column layout.
So
col-md-7 + col-md-4 + col-md-7 = 18 columns exceeding the 12 column limit, hence pushing the third div to the next line.
You can fix it by changing the col-md's to col-md-5 + col-md-2 + col-md-5 like this:
<div class="row">
<div class="col-xs-12 col-md-5">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<div class="col-xs-12 col-md-2">
<img src="images/tie.png">
</div>
<div class="col-xs-12 col-md-5">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div> <!-- cols -->
</div>
Your question isn't very clear but from what I understand, col-md-7 plus col-md-4 plus col-md-7 equal 18, 6 more than the allotted 12. So it will go onto the next line.
The bootstrap grid system always adds to 12 in a row. you have md-7 and md-4 that's only 11.
you need to change
<div class="col-xs-12 col-md-4">
to
<div class="col-xs-12 col-md-5">
now you have 7+5 =12.
So, according to your updated question, you want the text on the left and the image on the right. You can do that as follows:
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row">
<div class="col-xs-12">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<!-- div below is hidden in xs -->
<div class="col-md-12 hidden-xs">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<img src="images/tie.png">
</div>
<!-- div below is shown only in xs -->
<div class="col-md-12 visible-xs">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div>
</div>
I'm working with a 16 columns Bootstrap.
The design I'm trying to achieve is it:
And my code is it:
<div class="row">
<div class="col-xs-12 col-xs-offset-1">
<!-- Images goes here -->
</div>
<div class="col-xs-3">
<!-- Paginator Links -->
</div>
</div>
The main problem is that inside my col-xs-12 div, I have 3 big columns with an image inside each one and in this "scope" my columns are reseted to 16 so I cant divide it by 3.
Am I doing it the right way?
If you're using a 16-column Boostrap you could still use the top-level grid as long as you don't nest other .row elements.
Instead of
<div class="col-xs-12 col-xs-offset-1">
<!-- images here -->
</div>
Try using:
<div class="col-xs-4 col-xs-offset-1">
<!-- image here -->
</div>
<div class="col-xs-4">
<!-- image here -->
</div>
<div class="col-xs-4">
<!-- image here -->
</div>
If you run into problems with columns not floating properly you could use a .clearfix method.
I'm building a website using Bootstrap 3.
Part of this site are 4 div-containers:
<div class="container">
<div id="content" class="row">
<div class="col-sm-4 col-md-3" style="background-color:#00F; color:#FFF">
Menu
</div>
<div class="col-sm-12 col-md-3 col-md-push-6 " style="background-color:#F00;">
<div class="row">
<div class="visible-md visible-lg col-md-12" style="background-color:#F08;">
Mod_1
</div>
<div class="col-md-12" style="background-color:#F80;">
Mod_2
</div>
</div>
</div>
<div class="col-sm-8 col-md-6 col-md-pull-3" style="background-color:#0F0;">
Main content goes here
</div>
</div>
</div>
Layout-View is shown here:
Code on Fiddler
"Mod_1" is only visible in the desktop view like expected. "Mod_2" should move above the Menu and Main container in the tablet view, but I can't find a way to place the container on top of both of them.
I already tried to use the col-sm-[colnumber]-push and -pull classes. But I didn't get the right results.
I'm attempting to correctly vertically align offsetting elements using Twitter Bootstrap with a fluid grid. (Note: Grid is customized to 30 columns)
Considering the red boxes, this is the attempted div placement: http://imgur.com/IkB2G
This is the current actual placement with my code: http://imgur.com/oJ2mG
Here is the code I am using. Unsure how to get the lower red box to move into the empty space above it, per the images.
<div class="container-fluid nomargin">
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div> <!-- Vertical spacing between menu and content-->
<div class="row-fluid">
<div class="span4"></div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
<div class="span6 white-box">
<!--Body content-->
<div style="height:300px"></div>
</div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
</div>
You need to think of it as 2 columns, and in the left column you have nested rows. I can't make out the proper sizes from the code you posted. But hopefully this code will give you some inspiration.
<div class="row">
<div class="span18">
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
</div>
<div class="span12">
This is the content on the right side.
</div>
</div>