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;}
Related
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 a page (show route) that looks like this:
and i would like to position the link to "All Camgrounds" to the right of the card. I tried several things like adding classes like "text-right" or "justify-content-end", but it did not work.
I am using the framework Boostrap-5.
Any help would be much appreciated. Here is the code for the SHOW page :
<% layout('layouts/boilerplate') %>
<div class="row">
<div class="col-6 offset-3">
<div class="card">
<div class="card-header">
<h2>
<%= campground.title %>
</h2>
</div>
<img src="<%= campground.image %>" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">
<%= campground.description %>
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item text-muted">
<%= campground.location %>
</li>
<li class="list-group-item">
$ <%= campground.price %> /night
</li>
</ul>
<div class="card-body">
<a class="card-link btn btn-warning" href="/campgrounds/<%= campground._id %>/edit">Edit</a>
<form class="d-inline" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="post">
<button class="btn btn-danger">Delete</button>
</form>
<a class="card-link d-inline text-right" href="/campgrounds">All
campgrounds</a>
</div>
</div>
</div>
</div>
There are many different ways to align right in Bootstrap 5.
In your case it's probably easiest to use float-end.
<div class="row">
<div class="col-6 offset-3">
<div class="card">
<div class="card-header">
<h2> Title </h2>
</div>
<img src="//via.placeholder.com/500" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text"> campground.description </p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item text-muted"> campground.location </li>
<li class="list-group-item"> $ 39/night </li>
</ul>
<div class="card-body">
<a class="card-link btn btn-warning" href="/campgrounds/<%= campground._id %>/edit">Edit</a>
<form class="d-inline" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="post">
<button class="btn btn-danger">Delete</button>
</form>
<a class="card-link float-end" href="/campgrounds">All campgrounds</a>
</div>
</div>
</div>
</div>
https://codeply.com/p/S9PyKHZC9y
Also note, left and right have been replaced with start and end in Bootstrap 5.
I am working on a project using Rails.
I am trying to put an alert box inside a delete link.
For that, I tried using normal alert box and it was working fine, Then I used bootstrap modal, since i was using bootstrap modal code inside the loop, it was creating modal for each loop, so i had to remove it.
Now I used Data-Confirm Modal and I followed their documentation properly, but still I am not getting any proper results.
My question is, Is there any other way to use modal without using it inside a loop.
The code is given below, Kindly give me some suggestions
<div class="row">
<% #user.each do |c| %>
<div class="col-lg-3">
<div class="card bot-card card-1">
<div class="row">
<div class="col-lg-8">
<p class="d-flex align-items-center">
<span class="green-dot"></span>
<span class="online-text">online</span>
</p>
</div>
<div class="col-lg-1">
<%= link_to user_path(c.id), method: :delete, data: {confirm: 'Are
you sure?'} do %>
<i class="fa fa-trash" aria-hidden="true" ></i>
<%end%>
</div>
<div class="col-lg-1">
<i class="far fa-clone">
</i>
</div>
</div>
<img src="assets/avatar-2.png" alt="Avatar" class="avatar" >
<div class="card-body">
<p class="card-title"><%= c.name %></p>
<p class="card-text"><%= c.description %></p>
<div class="d-flex justify-content-end card-link">
View Details
Edit
</div>
</div>
</div>
</div>
</div>
<% end %>
<div class="col-lg-3">
<div class="card card-2 d-flex align-items-center justify-content-center">
<p>
Create user
</p>
<p>
Create From Template
</p>
</div>
</div>
</div>
Code using bootstrap modal
<div class="row">
<% #user.each do |c| %>
<div class="col-lg-3">
<div class="card card-1">
<div class="row">
<div class="col-lg-8">
<p class="d-flex align-items-center">
<span class="green-dot"></span>
<span class="online-text">online</span>
</p>
</div>
<div class="col-lg-1">
<i class="fa fa-trash" aria-hidden="true" data-toggle="modal" data-
target="#exampleModal"></i>
</div>
<div class="col-lg-1">
<i class="far fa-clone">
</i>
</div>
</div>
<img src="assets/avatar-2.png" alt="Avatar" class="avatar" >
<div class="card-body">
<p class="card-title"><%= c.name %></p>
<p class="card-text"><%= c.description %></p>
<div class="d-flex justify-content-end card-link">
View Details
Edit
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete
Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button class="btn btn-danger">
<%= link_to 'Ok', user_path(c.id), method: :delete %>
</button>
</div>
</div>
</div>
</div>
<% end %>
<div class="col-lg-3">
<div class="card card-2 d-flex align-items-center justify-content-center">
<p>
Create user
</p>
<p>
Create From Template
</p>
</div>
</div>
</div>
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 am trying to insert a Label, Search bar, Button group in a Panel Heading.
I have the following code
<div class="panel panel-default">
<div class="panel-heading">
<span class="label label-default">
<%= yield(:title) %>
</span>
<div class="btn-group pull-right" role="group" >
<button type="button" class="btn btn-default">
<% if can? :create, Client %>
<%= link_to 'New', new_client_path %>
<% end %>
</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="input-group col-lg-3 pull-right">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
<button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
</div>
</div>
</div>
<div id="clients"><%= render 'clients' %></div>
<p class="small"><%= will_paginate #clients %></p>
</div>
As of now it works, but search bar and button group have no space between them. I would like to have ateast 5px space between them so like this:
-----------------------------------------------------------------
Label Search -space- btn group
-----------------------------------------------------------------
How to achieve this?
I am using Rails 4 with Sass
To answer the question better we would need to know what CSS you are using. Guessing I suggest adding a DIV around your search input and add a class with a display: inline-block and then add a right padding.
<div class="mycustclass">
<input type="text" class="form-control" placeholder="Search">
</div>
.mycustclass {
display: inline-block;
padding-right: 5px;
}
You would also need your .input-group-btn class to use a display:inline-block as well.
If that doesn't work there are plenty of other options.
Just write margin-right:5px in first btn-primary inline than it will be work
not write padding-right
<div class="input-group-btn">
<button class="btn btn-primary" style="margin-right:5px;"><i class="glyphicon glyphicon-search"></i></button>
<button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
</div>