I've written some code that makes a menu. I've used bootstrap to manage this.
My problem is they show different behaviour on different computers:
This is the html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" id="createStoryBox"><span class="glyphicon glyphicon-book" style="display: inline-block"></span><span class="hidden-xs hidden-sm"style="display: inline-block"> {{ _('Create story') }}</span></button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#createEventModal" style="display: inline-block" ><span class="glyphicon glyphicon-flag"></span><span class="hidden-xs hidden-sm"> {{ _('Create event') }}</span></button>
</div>
Behviour 1
Behaviour 2
Related
I have a row of buttons in the bootstrap HTML website when I open it in desktop view it works perfectly, but in mobile view, it is a mess.
here is my code :
<div class="creative ">
<div class="container" style=" padding-top: 50px">
<div class="card mt-3" style=" background-color: rgba(255,255,255,.6);">
<div class="mt-1 card-body" id="artical">
{# <h4>El Gouna</h4>#}
<a class="btn btn-primary warn" href="#about">
<span>Divecenter</span>
</a>
<a class="btn btn-primary warn" href="#about">
<span>Hotels</span>
</a>
<a class="btn btn-primary warn" href="{% url 'price_list' %}">
<span>Price & Booking</span>
</a>
<a class="btn btn-primary warn" href="#contact">
<span>Book Hotel</span>
............
You can use block buttons on small devices and use flexbox on larger screens like this.
.wrap {
border: 1px solid black;
max-width: 500px;
padding: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap d-grid gap-2 d-md-flex">
<button class="btn btn-primary flex-md-fill">
Button
</button>
<button class="btn btn-primary flex-md-fill">
Button
</button>
<button class="btn btn-primary flex-md-fill">
Button
</button>
</div>
I'm removing most <br> from my HTML and trying to replace it with CSS. I've tried several techniques but none on them worked for me, what am I doing wrong ?
Using Bootstrap 4, I've try adding the class d-block to my elements (h1 and the following div),
I've tried adding margin/padding bottom with CSS,
or, as in Bootstrap documentation, embed it into <span> and add the same classes (d-block p-2)
I've also tried adding CSS to <h1>, such as :
.h1 {
width: 100%;
display: block;
padding-bottom: 10px;
}
.h1::after {
content: '\A';
white-space: pre;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<h1 class="d-block">Portfolio</h1>
<!-- Mosaic buttons -->
<div class="d-block">
<button class="btn btn-outline-light filter-button mr-2" data-filter="all">ALL</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="demo">SOUND DESIGN</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="album">MUSIC</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="samplepack">SAMPLEPACKS</button>
</div>
On StackOverflow, the snippet works fine, but here's the result I've locally (can't manage to reproduce it here)
I'm expecting the buttons to sit under the <h1> tag (instead of on its right)
Here's the website before I remove all the (slow and bugged) : https://staging-det-music.herokuapp.com/
If anyone is interested, the git repo: https://gitlab.com/kawsay/det
What am I missing ? Any help would be gratefully received !
if you want to display buttons in column
<div class="d-flex flex-column">
<h1>Portfolio</h1>
<button class="btn btn-outline-light filter-button mr-2" data-filter="all">ALL</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="demo">SOUND DESIGN</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="album">MUSIC</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="samplepack">SAMPLEPACKS</button>
</div>
if you want to display buttons next to each other
<div class="d-flex flex-column">
<h1>Portfolio</h1>
<div class="d-flex flex-row">
<button class="btn btn-outline-light filter-button mr-2" data-filter="all">ALL</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="demo">SOUND DESIGN</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="album">MUSIC</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="samplepack">SAMPLEPACKS</button>
</div>
is there a way of wrapping HTML Buttons so that they show in a drop-down list?
I have the following two buttons:
<button type='button' class='btn btn-default' data-toggle='modal' data-
target='#authorize'>Show Demo Card Details</button>
<button type='button' class='btn btn-default' data-toggle='modal'
data-target='#test'>Show Demo Card Details</button>
And I would like them to be accessible from a drop-down list, is this possible with html?
Based on the markup, I assume you're using Bootstrap. You can't do it with the <select> element using plain HTML. If you are using the rest of the Bootstrap features, then you can make use of Bootstrap's dropdown and do something like the one below. Note that you might need to do event.preventDefault() for the <a> elements inside li and you might need to do some more CSS to make it work like you want it to.
You don't really require a <button> to trigger a modal by the way. For example, changing the last item in the below dropdown to something like this will also work:
<li>JavaScript</li>
.dropdown li span {
display: inline-block;
min-width: 100px;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<! -- Bootstrap Dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a href="#">
<span>Try this </span>
<button type='button' class='btn btn-default btn-danger' data-toggle='modal' data-target='#authorize'>Show Demo Card Details</button>
</a>
</li>
<li>
<a href="#">
<span href="#">Try another?</span>
<button type='button' class='btn btn-default btn-danger' data-toggle='modal' data-target='#myModal'>Show Demo Card Details</button>
</a>
</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Example modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
you can simply just add like this in your html
<option data-toggle='modal' data-
target='#authorize'>Show Demo #authorize Details</option>
<option data-toggle='modal'
data-target='#test'>Show Demo #test Details</option>
I am building a login page with social buttons using Font Awesome icons. On larger devices the buttons are displayed horizontally next to each other, but as I resize my screen the right-most button will wrap underneath the other two buttons when they get too wide for the column. I would like for the buttons to stack vertically and expand to fill the space of the column instead of having a misplaced button underneath. I've tried a method using media queries but it's a bit hacky and I'm afraid it won't be easy to maintain, so I scratched that idea.
Here's what I have so far:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<div class="row">
<button id="login" class="btn btn-default">Login</button>
<button id="facebook" class="btn btn-default"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
Any suggestions on how to tackle this?
You have two options. In my opinion media queries would be the cleanest but here are the options:
1) Adding a media query and targeting a special class that you can add to just those buttons:
#media screen and (max-width: 768px){
.loginBtns {
width:100%;
display:block;
margin: 10px 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8 col-xs-12">
<div class="row">
<button id="login" class="btn btn-default loginBtns">Login</button>
<button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
2) Duplicating the buttons and hiding one version on small screens while showing the other. I'm not a big fan of duplicating code so I wouldn't recommend this option but if you don't like media queries it could be an option.
.loginBtns2 {
width:100%;
margin: 5px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8 hidden-xs">
<div class="row">
<button id="login" class="btn btn-default loginBtns">Login</button>
<button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
<div class="col-xs-12 visible-xs">
<div class="row">
<button id="login" class="btn btn-default loginBtns2">Login</button>
</div>
<div class="row">
<button id="facebook" class="btn btn-default loginBtns2"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
</div>
<div class="row">
<button id="google" class="btn btn-default loginBtns2"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
Here is a working codepen with both options too:
https://codepen.io/egerrard/pen/woVEJW
not sure if this helpful. but try this..
<div class="container">
<div class="row text-center">
<div class="col-md-6">
<button id="login" class="btn btn-default">Login</button>
<button id="facebook" class="btn btn-primary"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-danger"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
Here is my code :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2">
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
</div>
<div class="col-sm-9 col-md-10">
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</div>
</div>
<hr>
</div>
And Here is the fiddle.
https://jsfiddle.net/SimplytheVinay/0g8fm8u6/
I tried multiple combination of classes. Even setting the height of Label manually doesn't work. Somehow label is occupying more height than its size. Tried setting margins as well. No Luck.
Pretty new to web development, So correct me If I am missing anything.
You can set the H2 also for the button https://jsfiddle.net/7n0t19hr/
<div class="col-sm-9 col-md-10">
<h2>
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</h2>
</div>
</div>
<hr>
</div>
The problem is that you are not closing the h2 tag.
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
See. Fix that and you will be able to manipulate the height and padding or whatever.