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.
Related
I am trying to build a website with flash-cards to help learn the Hebrew alphabet. My Card partial view looks like this:
#model FlashCards.MultipleChoice.ViewModels.CardViewModel
<div class="index-card">
<div class="row">
<div class="col-md-offset-5"></div>
<div class="col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
Now the col-md-offset works on all but the first row, causing the card to render as in the below image:
Now why isn't the 1 in the image offset like the glyph and the name for the letter Aleph?
My CSS file for these cards only contains the following so far:
.index-card {
height: 150px;
}
.index-card .card-symbol {
font-size: large
}
I believe you're using the offset classes wrong; do not apply them to empty divs.
Your text is centered. Second and third rows have widths of 8 columns. It looks like the offset is working but it really isn't. The first row is only 2 columns wide. None of your offset divs are having any effect on the layout.
You need to do something like this, at the very least:
<div class="index-card">
<div class="row">
<div class="col-md-offset-5 col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
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 on my own project.My menu have 6 buttons.
I did it with Bootstrap but when i open in Iphone web browser, the menu comes one row - one button.
I want to show two buttons for a row.
Maybe i can't explain my problem, so i added a screenshot.
here is the image;
1
Thanks for everything,
here is my code below;
<div class="box first">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="center">
<a href="orders.php"><img src="img/logo/siparis.png" width="78px" height="78px">
<h4 style="text-align:center">Sipariş takibi</h4></a>
</div>
</div>
<!--/.col-md-4-->
<div class="col-md-4 col-sm-6">
<a href="http://www.example.com/example-sifre-yenileme.html">
<div class="center">
<img src="img/logo/email_unut.png" width="78px" height="78px">
<h4 style="text-align:center">Şifre değiştirme</h4></a>
</div>
</div>
<!--/.col-md-4-->
<div class="col-md-4 col-sm-6">
<div class="center">
<a href="orderhasar.php"> <img src="img/logo/hasar.png" width="78px" height="78px">
<h4 style="text-align:center">Hasarlı sipariş destek talebi</h4></a>
</div>
</div>
<!--/.col-md-4-->
</div>
<!--/.row-->
</div>
You mean you want all the menu items to show side by side horizontally?
If so, you need to add a XS class declaration for mobile:
<div class="col-md-4 col-sm-6 col-xs-2">
With col-xs-2, it will fit 6 items in a row (12 total columns, 2 columns per menu item, 6 menu items).
You might have to play with the size of the items then!
EDIT:
To show a 2 button row, add col-xs-6 instead.
<div class="col-md-4 col-sm-6 col-xs-6">
I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>