I am trying to make "navbar/toolbar" which has one item at left (h3) and 3 items on right (a, a and select). The problem is that I want them all to be vertically centered which is working only on my first item (h3). Why it is like that?
This is the example:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="d-flex">
<div class="align-self-center">
<h3 class="pl-4">
Title
</h3>
</div>
<div class="ml-auto">
<a class="" href="javascript:void();">
1
</a>
<a class="" href="javascript:void();">
2
</a>
<div class="form-group" style="display: inline-block;">
<select class="form-control" >
<option>1</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
How should I align everything center vertically? Any help is appreciated.
Apply align-self-center on div which enclosing anchor tags and select. Also remove class form-group from the div which enclosing select because it's applying margin-bottom on select and because of that it does not seem to be in the center.
Here is the code changes which I explained:
<div class="container">
<div class="row">
<div class="col">
<div class="d-flex">
<div class="align-self-center">
<h3 class="pl-4">
Title
</h3>
</div>
<div class="ml-auto align-self-center">
<a class="" href="javascript:void();">
1
</a>
<a class="" href="javascript:void();">
2
</a>
<div style="display: inline-block;">
<select class="form-control" >
<option>1</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
Just remove the "align-self-center" class. check updated code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="padding:20px;">
<div class="row">
<div class="col">
<div class="d-flex">
<div>
<h3 class="pl-4">
Title
</h3>
</div>
<div class="ml-auto">
<a class="" href="javascript:void();">
1
</a>
<a class="" href="javascript:void();">
2
</a>
<div class="form-group" style="display: inline-block;">
<select class="form-control" >
<option>1</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
add align-self-center class to parent div that contains all child
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="d-flex align-self-center">
<h3 class="pl-4">
Title
</h3>
<div class="ml-auto">
<a class="" href="javascript:void();">
1
</a>
<a class="" href="javascript:void();">
2
</a>
<div class="form-group" style="display: inline-block;">
<select class="form-control" >
<option>1</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
Related
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="col-6">
<div class="cell">
<div class="d-flex justify-content-center">
<h1>Product</h1>
</div>
</div>
<div class="cell">
<hr class="w-100" size="5" />
</div>
<div class="cell">
<h3>price €</h1>
</div>
<div class="cell">
<hr class="w-100" size="5" />
</div>
<div class="cell">
<p class="lead">ART_DESIGNATION</p>
</div>
<div class="align-text-bottom">
<div class="cell">
<form class="position-fixed" action="" method="GET">
<div style="display: inline;">
<label>Quantité </label>
<input style="" type="number" placeholder="1" class="form-control">
<button style="" type="submit" class="btn btn-primary">Ajouter au panier</button>
</div>
</form>
</div>
</div>
</div>
The Web page :
I would like to put the form (label, input, button) in 1 line and to the bottom of the like this :
But I can't do it
Can you help me ?
I try to use bootsrap class for put buttom and also make my own CSS property but either it doesn't give a correct result or it doesn't do anything... I try to do tha this post say but that do nothing for me and i didnt want to up an old post : How to align div to bottom inside div bootstrap
You need to use Bootstrap grid properly.
See the snippet below.
.col-6 {
border: 1px solid red;
height: 500px;
}
img {
object-fit: cover;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="row">
<div class="col-6">
<img class="w-100 h-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg" alt="">
</div>
<div class="col-6">
<div class="row align-self-end h-100">
<div class="col-12">
<div class="cell">
<div class="d-flex justify-content-center">
<h1>Product</h1>
</div>
</div>
<div class="cell">
<hr class="w-100" size="5" />
</div>
<div class="cell">
<h3>price €</h3>
</div>
<div class="cell">
<hr class="w-100" size="5" />
</div>
<div class="cell">
<p class="lead">ART_DESIGNATION</p>
</div>
</div>
<div class="col-12 d-flex align-items-end">
<div class="cell">
<form action="" method="GET">
<div style="display: inline;">
<label>Quantité </label>
<input style="" type="number" placeholder="1" class="form-control">
<button style="" type="submit" class="btn btn-primary">Ajouter au panier</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I have created this card here in which i have some badges but they are not aligned in the right way i need to left align them like this image.. Can anyone help me in aligning these badges just like they are aligned in the second image? I am using bootstrap 3.3.7 and this just a little code snippet and i think this is enough information.
here is the html code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-sm-6">
<div class="card main-content">
<div class="row clearfix" id="line">
<div class="col-sm-12">
<div class="header">
<h2>
Insights
</h2>
</div>
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12" style="display: table;">
<div>
Total Students
<span class="badge badge-primary">
0
</span>
</div>
<br>
<div>
Subjects
<span class="badge badge-primary">
20
</span>
</div>
<br>
<div>
Sections
<span class="badge badge-primary">
289
</span>
</div>
<br>
<div>
Created On
<span class="badge">
27/8/2018
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can wrap your labels in a <span> tag and give it a min-width. This way, the badges will be horizontally left aligned and vertically on the same line:
.insight-label {
display: inline-block;
min-width: 120px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
<div class="card main-content">
<div class="row clearfix" id="line">
<div class="col-sm-12">
<div class="header">
<h2>Insights</h2>
</div>
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12" style="display: table;">
<div>
<span class="insight-label">Total Students</span>
<span class="badge badge-primary">0</span>
</div>
<br>
<div>
<span class="insight-label">Subjects</span>
<span class="badge badge-primary">20</span>
</div>
<br>
<div>
<span class="insight-label">Sections</span>
<span class="badge badge-primary">289</span>
</div>
<br>
<div>
<span class="insight-label">Created On</span>
<span class="badge">27/8/2018</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have two Images with Links inside a row. Sometimes only one Image will be needed so I have added JSTL tags to verify that. The problem is when I'm displaying just one Image. Then they're not centered. Only when both the Images are available it's centered. How to tackle this?
<div class="row">
<c:if test="${content.facebookLink ne 'NO_FACEBOOK_LINK'}">
<div class="col-sm-3 col-sm-offset-3 col-xs-6">
<a href="${content.facebookLink}" target="_blank">
<img src="<c:url value="/resources/images/fb.png"/>">
</a>
</div>
</c:if>
<c:if test="${content.twitterLink ne 'NO_TWITTER_LINK'}">
<div class="col-sm-3 col-xs-6">
<a href="${content.twitterLink}" target="_blank">
<img src="<c:url value="/resources/images/twitter.png "/>">
</a>
</div>
</c:if>
</div>
Thanks.
Better way is to convert .col-sm-3.col-xs-6 to inline-block element and use text-center class to .row
.col-sm-3.col-xs-6 {
display: inline-block;
float:none;
width:auto;
}
img {
width: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class=container>
<div class="row text-center">
<div class="col-sm-3 col-xs-6">
<a href="${content.facebookLink}" target="_blank">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="${content.twitterLink}" target="_blank">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</a>
</div>
</div>
</div>
<div class=container>
<div class="row text-center">
<div class="col-sm-3 col-xs-6">
<a href="${content.twitterLink}" target="_blank">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</a>
</div>
</div>
</div>
Found a simple solution. Omitted he columns from the dynamic elements.
<div class="row">
<div class="col-md-12">
<c:if test="${content.facebookLink ne 'NO_FACEBOOK_LINK'}">
<a href="${content.facebookLink}" target="_blank" style="display: inline">
<img src="<c:url value="/resources/images/fb.png"/>">
</a>
</c:if>
<c:if test="${content.twitterLink ne 'NO_TWITTER_LINK'}">
<a href="${content.twitterLinkk}" target="_blank" style="display: inline">
<img src="<c:url value="/resources/images/twitter.png "/>">
</a>
</c:if>
</div>
</div>
Works perfect.
In an web application, i am displaying posts from other users in an individual user's homepage. Each post will contain the thumbnail profile picture of the person the post is from, their name on a paragraph, text contents and then a reply box and button. I am trying to do this by bootstrap's grid system but not achieving the desired effect. I want to mimic the tweets in twitter home page, but in my case there is a big gap in between the profile picture and the other column.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-2">
<img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
Your .col-sm-2 is wider than your thumbnail image you can do two things.
1) You can can use .col-sm-1 for the image container.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-1 narrow">
<img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4 narrow">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
2) You can leave it as is but add bootstraps helper class pull-right to your img tag.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-2">
<img src="someimage.png" class="img-thumbnail pull-right" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4 narrow">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
CODEPEN DEMO
You could use the Media Object component for this (and possibly without any additional CSS as far as structure is concerned).
See working example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
<div class="container">
<h1>Posts</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/000/fff" alt="...">
</a>
</div>
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
<div class="media">
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/f00/fff" alt="...">
</a>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/ff0/fff" alt="...">
</a>
</div>
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I have a banner inside a fluid container, but I want the banner width to be fixed after 1400px width and center aligned. I dont want it to stretch more than that. Is there a simple way to do this ?
Here's my HTML
<div class="container-fluid blue_back">
<div class="container-fluid ">
<div class="row banner-content">
<div class="col-md-12">
<div class="row nav1 search search_bar1" role="navigation">
<div class="container-fluid">
<div class="navbar-header navbar_search">
<form class="navbar-form form1 " role="search">
<select class="selectbox1 form_input" >
<option> Search in Hospitals </option>
<option> Search in Packages </option>
<option> Search in Diagnostics </option>
<option> Search in Doctors </option>
<option> Search in Tests </option>
</select>
<input type="text" class="form_input" placeholder="Type Hospital Name" name="srch-term" id="srch-term">
<input type="text" class="form_input" placeholder="Type Location" name="srch-term" id="srch-term">
<input type="text" class="form_input" placeholder="Type Speciality" name="srch-term" id="srch-term">
<button class="form_button" type="submit"></button>
</form>
</div>
</div>
</div>
<div class="row social_media aa">
<input type="submit" value="Book Appointment" class="appointment_book_home" />
<input type="submit" value="" class="search_book_home"/>
<ul class="list-inline list-unstyled social_media_icons">
<li><img src="images/facebook.png"/> </li>
<li><img src="images/google.png"/> </li>
<li><img src="images/twitter.png"/> </li>
</ul>
</div>
<div class="row statistics_home">
<div class="col-xs-4 dashed_border">
<div class="row">
<div class="col-sm-2 stat_image">
<img src="images/List/hospital_icon_menu.png"/>
</div>
<div class="col-sm-10 ">
<div class="row">
<h3 class="statistics_head"> 800+ </h3>
</div>
<div class="row">
<h4 class="statistics_text"> Health Centres </h4>
</div>
</div>
</div>
</div>
<div class="col-xs-4 dashed_border">
<div class="row">
<div class="col-sm-2 stat_image">
<img src="images/List/hospital_icon_menu.png"/>
</div>
<div class="col-sm-10 ">
<div class="row">
<h3 class="statistics_head"> 800+ </h3>
</div>
<div class="row">
<h4 class="statistics_text"> Packages and Tests </h4>
</div>
</div>
</div>
</div>
<div class="col-xs-4 dashed_border" style="border: none;">
<div class="row">
<div class="col-sm-2 stat_image">
<img src="images/List/hospital_icon_menu.png"/>
</div>
<div class="col-sm-10 ">
<div class="row">
<h3 class="statistics_head"> 800+ </h3>
</div>
<div class="row">
<h4 class="statistics_text"> Doctors </h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And this is my CSS
.banner-content {
background: url('http://localhost:8383/Buzz_HomePage/images/homeimage1.jpg') no-repeat center center;
background-size: cover;
height: 290px;
}
If I understand your question correctly, you should add this css:
.banner-content {
width:100%;
max-width:1350px;
margin:0 auto;
}
If you need more help, you might try posting a JSfiddle.