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">
Related
Currently what I'm trying to achieve is this, where the first and sixth card of the image gallery is horizontally elongated and cards 2 to 5 are horizontally elongated, but all these cards 1 to 6 should fit perfectly in 2 rows as shown in ref image.
I'm using col-md-6 for the first image and col-md-3 for image 2 and 3 but for some reason the layout is still not what I want. The second row images start from the end of my cards 2 and 3 and my images are really stretched.
CodeSandBox: https://codesandbox.io/s/immutable-rain-6yx99?file=/src/App.js
Code:
<div className="container">
<div className="row">
<div className="col-md-6 col-sm-6">
<img src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg"/>
</div>
<div className="col-md-3 col-sm-6">
<img style={{minHeight:"280px"}} src="https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg"/>
</div>
<div className="col-md-3 col-sm-6">
<img style={{minHeight:"280px"}} src="https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg"/>
</div>
<div className="col-md-3 col-sm-6">
<img style={{minHeight:"280px"}} src="https://i.pinimg.com/originals/cc/18/8c/cc188c604e58cffd36e1d183c7198d21.jpg"/>
</div>
<div className="col-md-3 col-sm-6">
<img style={{minHeight:"280px"}} src="https://images.unsplash.com/photo-1454372182658-c712e4c5a1db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80"/>
</div>
<div className="col-md-6 col-sm-6">
<img src="https://wallpaperaccess.com/full/1376490.jpg"/>
</div>
</div>
</div>
Every row has only 12 Col then end of it row so ,
in your code above y should close row after every 12 col .
On my website www.asistaliavalencia.com, on the main page, I have a button bar. I would like to be able to arrange them so that they are all in the same row.
What html code can I add?
<div class="boxes-home">
**<section class="container">
<div class="row no-margin-negative justify-content-center">
<div class="col-sm-6 col-md-3 text-center pt-20-mb">**
<a href="https://asistaliavalencia.com/cuidadora-ancianos-valencia-por-horas/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-1.png">
<p>Cuidadora de mayores por horas</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/cuidadora-de-ancianos-interna-en-valencia/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-2.png">
<p>Cuidadora de mayores interna</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/servicio-acompanamiento-en-hospitales-valencia/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-3.png">
<p>Servicio de acompañamiento en hospitales</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/servicios-quiropracticos-ancianos-valencia/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-4.png">
<p>Servicios quiroprácticos</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/adaptacion-reforma-vivienda/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-4.png">
<p>Adaptación y reforma de la vivienda</p>
</div>
</a>
</div>
</div>
</section>
</div>
You can see here an image of my problem
bootstrap row can only consist of 12 "col"s, you have 5 elements with size 3, you need to change all col-3 to col-2 and they will fit the row
or you can delete all size used from bootstrap and set sizes via % values of width attribute
Reduce the gap by playing with first from...
<div class="col-sm-6 col-md-3 text-center">
to
<div class="col-sm-2 col-md-1 text-center">
Keep playing with the spacing. Possibly do for last two before adjusting all.
Also add a "width:225px" to
.boxes-home .box-home {
width:225px
}
in .css file.
Instead of the col-md-3 class for those divs, use col-md-2 for all of them, and add col-md-offset-1 only to the first of those five divs.
That way the boxes will be two columns wide each, with an offset of one column for the first div (and therefore one column space after the last one), which centers those 5 boxes: 1 + 2 + 2 + 2 + 2 + 1 = 12 columns alltogether
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 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'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>