I want to design two panels in same line, its work but showing unnecessary border,
Here is xyz.cshtml code with Bootstrap,
<form class="form-horizontal" role="form">
<div class="panel panel-primary col-md-4">
<div class="panel-heading">Add Members</div>
<div class="panel-body">
<button id="btnAddMem" type="button" class="btn btn-primary" onclick="">ADD</button>
</div>
</div>
<div class="col-md-1">
</div>
<div class="panel panel-primary col-md-4">
<div class="panel-heading">Add Others</div>
<div class="panel-body">
<button id="btnAddOther" type="button" class="btn btn-primary" onclick="">ADD</button>
</div>
</div>
</form>
And output looks like this image,
Any help would be appreciated.
Hello Try this code,
<form class="form-horizontal" role="form">
<div class='col-md-4'>
<div class="panel panel-primary">
...
</div>
</div>
<div class="col-md-1">
</div>
<div class='col-md-4'>
<div class="panel panel-primary">
...
</div>
</div>
</form>
you have added col-md-4 with panel.it will put padding so thats why it will add extra border in your output.
So I have remove it from panel div and added as parent.
Related
I have to implement pagination for a dynamically binded data for blogs on a page. On the click of the next button the next blog should come and so on.
Below is the code. It is done in asp.net mvc.
</div>
<div class="absolute cust-movetext">
<!-- <small class="text-xs font-semibold text-white">Pet Care</small> -->
#*<h1 class="text-6xl font-semibold text-white">Your Dog’s Best Life In Every Bite.fe In Every Bife In Every Bi</h1>*#
<h1 class="lg:text-4xl md:text-xl text-xl font-semibold text-white mb-2 ">#Model.BlogTitle.ToString()</h1>
<p class="text-sm font-semibold text-white ml-6px"> #Model.BloggerName</p>
</div>
</div>
</section>
<div id="wrapper">
<section>
<div id="pet_offline">
<div class="container mx-auto">
<div class="lg:pt-16 md:pt-8 pt-8 lg:px-12 md:px-12 px-4">
<div class="custp font-weightlow">
<p type="hidden" class="text-3d3d3d font-normal opac-84 lh-33px custp">
#Html.Hidden("BlogId")
#*#Html.Hidden(Model.BlogId)*#
#Html.Raw(Server.HtmlDecode(Model.BlogContent))
</p>
</div>
</div>
</div>
</div>
<div >
<button id="prebtn" class="btn">PREVIOUS</button>
<button id="nexbtn" class="btn" align="right">NEXT</button>
<img src="../content/images/bg-city.png" alt="city" class="w-full" />
</div>
</section>
</div>
Here is the code that has the data binded and I need to add pagination on this. How to do that?
I need it in one line, how to fix this?
Use the Bootstrap 5 grid system (ensure you are including the Bootstrap 5 css url)
Example:
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
https://getbootstrap.com/docs/5.0/layout/grid/
Your code would look, something like this:
<div class="d-none d-lg-block d-xl-block">
<div class="nav-item">
<div class="row">
<div class="col">
<form class="d-flex" action="search.php" method="get">
<input class="form-control me-2 px-3" type="search" placeholder="Search" name="search" aria-label="Search">
</form>
</div>
<div class="col">
<button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#loginmodal">Login</button>
<button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#signupmodal">Sign Up</button>
</div>
</div>
</div>
</div>
You could also put the signup button into a column on its own.
Add your buttons inside the form, or add d-flex to your nav-item class
Like this:
<div class="nav-item d-flex">
I have tried with both order-xs-1 and order-xs-first, but none is working and i don't know why. I want on mobile the image to be first and the paragraph second.
<div class="container"> <div class="row bg-white g-0"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 pt-5 ps-5 "> <h2 class="fs-1 fw-light">Make It The Best</h2> <h4 class="fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4> <p>A wonderful serenity has taken.</p> <button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 "> <img src="/images/section3/drink.jpg" class="img-fluid" alt=""> </div> </div> </div>
There are a lot of things wrong with your code. I would go back and have a proper read of the way bootstrap handles breakpoints. If you have specified col-md-6 you don't need all the other col-SZ-6, as breakpoints work from a resolution UP.
As for your exact problem, it is easily fixed by putting the column first in the HTML and then letting bootstrap move it at the iPad breakpoint with order-md-last:
<div class="container">
<div class="row bg-white g-0">
<div class="col-12 col-md-6 order-md-last mb-3">
<img src="/images/section3/drink.jpg" class="img-fluid" alt="">
</div>
<div class="col-12 col-md-6">
<h1 class="h2 fs-1 fw-light">Make It The Best</h2>
<h2 class="h4 fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4>
<p>A wonderful serenity has taken.</p>
<button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button>
</div>
</div>
</div>
You should also not use H tags to style headings, either apply a H class like I have or use CSS to change the size of your headings. Heading tags should also go in order H1->H2 etc...
I want to display the panel in the same way when displays in desktop view but want to change the sequence when seen in mobile.In mobile view, the first panel First Name and the last panel Last Name should be seen one after another. I googled it but could not found the solution. Please help me.
<div class="container active col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">First Name</div>
</div>
</div>
<div class="container active col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Address</div>
</div>
</div>
<div class="container active col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Company</div>
</div>
</div>
<div class="container active col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Last Name</div>
</div>
</div>
Yes, this is done with Bootstrap's order classes.
Bootstrap 4.0+
You can use order-1 through order-12 and the col's will be ordered from 1-12. To set responsive break points in this you can use them like order-sm-6 and order-sm-7.
In your code, to move the lastName to the second slot you would reorder them and set the order custom for the breakpoint and higher like so:
<div class="container active col-md-4 col-sm-6 order-md-1">
<div class="panel panel-default">
<div class="panel-heading">First Name</div>
</div>
</div>
<div class="container active col-md-4 col-sm-6 order-md-4">
<div class="panel panel-default">
<div class="panel-heading">Last Name</div>
</div>
</div>
<div class="container active col-md-4 col-sm-6 order-md-2">
<div class="panel panel-default">
<div class="panel-heading">Address</div>
</div>
</div>
<div class="container active col-md-4 col-sm-6 order-md-3">
<div class="panel panel-default">
<div class="panel-heading">Company</div>
</div>
</div>
Putting them in the current order you have on md and up.
https://getbootstrap.com/docs/4.0/layout/grid/#order-classes Has more information.
Bootstrap 3
Ordering is done with push/pull.
So col-md-push-3 would push the column over 3/12 if it could snap. An example below being the columns are rendered in code order below md, but are reversed md and above:
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
In this case (pushing last name back to the end for md and up):
<div class="container active col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">First Name</div>
</div>
</div>
<div class="container active col-md-4 col-sm-6 col-md-push-8">
<div class="panel panel-default">
<div class="panel-heading">Last Name</div>
</div>
</div>
<div class="container active col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Address</div>
</div>
</div>
<div class="container active col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Company</div>
</div>
</div>
this is a basic example calling "two.html", with the fade transition
<div class="content">
<div class="medium-6 columns text-center top">
POSPAId
</div>
</div>
and this is two.html
<div class="content">
<div class="medium-6 columns text-center top">
<a href="index.html" data-transition="slide-out">
back
</a>
</div>
</div>