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">
Related
I have an ASP MVC view that contains only a Textbox that takes a string, and a submit button to submit the value.
I want to add the validation error message with an Icon before it as in the following snippet:
<div class="form-group row">
<label class="col-sm-4 col-form-label">Check User Id</label>
<div class="col-sm-8">
<input asp-for="#Model.userId" type="text" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
<input type="submit" class="btn btn-primary" value="Check" asp-action="Index" asp-controller="UserController" />
<div class="col-sm-8">
<i asp-validation-for="userId" class="fa fa-info-circle"></i>
<span asp-validation-for="userId" class="text-dark"></span>
</div>
</div>
</div>
My Problem now is that the info Icon is always showing, and I want it to show ONLY if there is an error/validation message. Is there a way to achieve that from the view only with no changes to the Business logic?
I am using the accordion class to display some data in tables. My code loops through all the table rows and assigns them to an accordion dropdown. My problem is when I select one accordion header they all expand/collapse instead of just the one I clicked on.
<div class="accordion" id="qc_inspection">
<div class="accordion-item">
<h1 class="accordion-header">
<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h1 class="display-6">{{table['inspection']}}</h1>
</button>
</h1>
<div id="collapseOne" class="accordion-collapse">
<div class="accordion-body">
<input type="text" placeholder="Weight" class="form-control"
value="{{ request.form['weight'] }}"></input>
{{table['min']}} to {{table['max']}} grams
</div>
</div>
</div>
</div>
Code works fine if I create each collapsible row independently and take the for loop out, but the number of rows changes depending on the table selected so that will not work.
assigning a unique value to data-bs-target and the accordion body id worked. it does not like just numeric values so I added "a" in front of the value. See working code below:
<div class="accordion">
<div class="accordion-item">
<h1 class="accordion-header">
<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse" data-bs-target="#a{{table['id']}}" aria-expanded="false" aria-controls="collapseOne">
<h1 class="display-6">{{table['inspection']}}</h1>
</button>
</h1>
<div id="a{{table['id']}}" class="accordion-collapse">
<div class="accordion-body">
<input type="text" placeholder="Weight" class="form-control"
value="{{ request.form['weight'] }}"></input>
{{table['min']}} to {{table['max']}} grams
</div>
</div>
</div>
</div>
I have several textboxes within Bootstrap columns that I want to bring closer to one another, but no matter what I do the distance between textboxes stays the same.
How can I
Shorten the distance between the textboxes?
Shorten/make more narrow the column background or bring the textbox closer to the outside of a column
Here is the code that I have
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="bisformdynamiclabel">Box 1</div>
<input class="form-control" type="text" asp-for="myclass.box1" />
<span asp-validation-for="myclass.box1" class="alert-danger"></span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="bisformdynamiclabel">Box 2</div>
<input class="form-control" type="text" asp-for="myclass.box2" />
<span asp-validation-for="myclass.box2" class="alert-danger"></span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="col-lg-1">
<div class="bisformdynamiclabel">Box 3</div>
<input class="form-control" type="text" asp-for="myclass.box3" />
<span asp-validation-for="myclass.box3" class="alert-danger"></span>
</div>
</div>
</div>
Thank you in advance for everyone's help
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.
I need to change the position of some element in a bootstrap carousel.
I have this example slide and i want to change position for the primary button but i don't find any type of suggest online.
<div class="carousel-inner">
<div class="item active">
<img id="sliderImage" src="~/Content/images/SfondoF&VHomeSlide.png">
<div class="container">
<div class="carousel-caption" >
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="Slide" align="center" style="margin-top:30px">
<a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</div>
</div>
</div>
</div>
Please, can you help me?
Thanks to all
you change carousel-caption class.
try this:
<div class='item active'>
<img class='sliderImage' src='images/man2.jpg' alt=''>
<div class='container'>
<div class='col-sm-8'>
<div class='carousel-content'>
<a class='btn btn-lg btn-primary' href="http://getbootstrap.com">Learn More</a>
</div>
</div>
</div></div>
Add an id to your button and change the position in CSS, hope that help
Something like this ...
HTML :
<a class="btn btn-lg btn-primary" href="http://getbootstrap.com" id="test">Learn More</a>
CSS :
#test{padding-top:80px;}