I have some buttons "the ones with information icon, and I want to align them so that to be arranged under each other vertically
image_1 shown the current alignment of the buttons.
Please let me know how to achieve aligning them vertically under each other using CSS and HTML
I thought of setting an equal margin to the left side starting from the check-box but I do not know how to do it
HTML markup:
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_AGGREGATED_AREAS')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_AGRICULTURAÖ_AREAS')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_WATER_AREAS')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
img_1:
You can use Bootstrap classes such as row and column. So the layout would like this.
Read more about Bootstrap Grid system
<div>
<div class="row">
<div class="col-2">
<input type="checkbox" />
</div>
<div class="col-8">
Aggregated Areas
</div>
<div class="col-2">
<span style="border: 1px solid lightgreen">i</span>
</div>
</div>
<div class="row">
<div class="col-2">
<input type="checkbox" />
</div>
<div class="col-8">
Aggregated Areas
</div>
<div class="col-2">
<span style="border: 1px solid lightgreen">i</span>
</div>
</div>
<div class="row">
<div class="col-2">
<input type="checkbox" />
</div>
<div class="col-8">
Aggregated Areas
</div>
<div class="col-2">
<span style="border: 1px solid lightgreen">i</span>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
From the image I assume the box has a fixed width. You can use this as your limit and add an inline span between the text and the button and set it's width to fill the remaining available space. That should push the buttons to the right side.
Related
I am having a simple bootstrap popover and I have placed it inside panel body. It works great when I place popover outside the panel body. But I am not sure why it is not working when I place same popover inside panel body.
PopOver Inside Panel Body
<div class="row">
<div class="col-md-12">
<div style="border:1px solid black; margin-top:5px; margin-bottom:5px;">
<input id="rbtnTab1" type="radio" name="tabs" checked>
<label id="lblTab1" for="rbtnTab1">Tab 1</label>
<section id="content1">
<div>
<div class="col-xs-4 col-md-offset-4">
<div class="panel panel-default" style="margin-top:10px">
<div class="panel-heading text-center" style="font-size:15px;font-weight:bold; background-color:#4D94CE; color:white;"><i class="fa fa-users" style="font-size:x-large"></i><br />Panel Heading</div>
<div class="panel-body text-center" style="height:60px;font-size:15px">
<button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
</section>
</div>
</div>
</div>
JQuery code for bootstrap popover
$('[data-toggle="popover"]').popover({
placement: 'top',
trigger: 'hover'
});
Popover outside the panel (This works great)
<button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
I am trying to make a simple example where I have a row and inside that row is columns. One column is for the name of the left-hand side and on the right-hand side is the three buttons that exist. However, I am having issues placing the buttons properly on the right side as well as spacing them at an appropriate distance. I tried using the max-width in my CSS but I just ended up screwing up the project even more. Below is my HTML/CSS file:
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div>
<h4> Group Pattern Test</h4>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Save</button>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Close</button>
</div>
<div class="ml-auto">
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
You would want to use a btn-toolbar to group your buttons in-line.
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
This question has been answered well here. But here's an example below, add float-right class to your button bar, you can put a breakpoint in the class like float-sm-right but float-right works on any viewport width.
#submitGPBtn {
margin-right: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar float-right">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
In bootstrap ml-auto is fine to align buttons to the right, but you should apply it only to the first item after the "offset".
I added ml-1 to space the other buttons and a lightyellow background just to show where the container ends.
My personal suggestion when you use bootstrap is to code inside a container, you can't set its size to what you want but it prevents stretching in wide monitors.
.container {
background-color: lightyellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col text-left">
<h4> Group Pattern Test</h4>
</div>
<button class="btn btn-success ml-auto">Save</button>
<button class="btn btn-success ml-1">Close</button>
<button class="btn btn-success ml-1" id="submitGPBtn">Submit</button>
</div>
</div>
If I enclose with a <div> with class="row" and give each button class="span4" the buttons fill the total width of the screen.
I want each button to be only as wide as the text which it contains, with the centers being at 25%, 50% and 75% of the width.
[aaa] [bbb] [ccc]
not
[ aaa ][ bbbb ][ cccc ]
I am new to bootstrap and not a CSS guru.
How do I achieve this?
My buttons also have class="btn-outline btn-default", but that shouldn't affect things (I think) .
By the way, I am currently considering exactly 3 buttons, but if a generic solution for any number is just as easy, that would be welcome.
first of all from your classes it seems you are still using bootstrap-v2, try using bootstrap-v3 (v4 it is still in alpha beta[now] stage), and you can achieve what you want with this:
.row {
border: 1px dashed red /* demo */
}
<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-xs-4">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
UPDATE (bootstrap-v4)
For those who are using/want to use bootstrap V4, here is how:
.row {
border: 1px dashed red /* demo */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<div class="col-4">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
Try to use a div with class="row" and 3 div with the class="span4 text-center" and put a button in each of these
The bootstrap way would be
.col-md-3 {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>
or to do it using plain CSS and flexbox
.row {
display: flex;
}
.col-md-4 {
flex-grow: 1;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>
I am attempting to center the search bar in my navbar. I am using bootstrap, I tried text-center on the md-4 but it had no effect.
Here is a link to my code.
http://bootsnipp.com/snippets/50b38
Bootstrap uses a grid of 12 columns. Your code had the first column be 8 and the 2nd one be 4. This would mean that your first column would be 2/3 of the page. By making it col-md-4, it allows your middle div to be center.
<div class="row top-header">
<div class="container">
<div class="col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" />
</div>
<div class="col-md-4">
<div id="search-center">
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
Here is an updated source:
http://bootsnipp.com/user/snippets/E7WgX
over your code in css tag, i put that and seems ork
.top-header {
background-color: #D9D9D9;
text-align:center;
}
Expect it help you
This is they layout of the page
Here's the code for this
<div class="newsContent row">
<div class="newsDate col-md-2">05 August 2014</div>
<div class="newsSeparator col-md-1">
</div>
<div class="newsDescription col-md-7">
<div class="row">
some dummy news
<div class="newsImage"><img alt="news2" src="/Images/News/news2.jpg">
</div>
</div>
</div>
<div class="newsActions col-md-2">
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default btn-lg edit-content" title="Edit the news" <span class="glyphicon glyphicon-pencil">
</span>
</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default btn-lg delete-content" title="Delete the news">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
</div>
Now as you can see this green line is this part
<div class="newsSeparator col-md-1">
</div>
and the class is
.newsSeparator
{
background: url('my_1X1_pixel_image.png');
background-repeat: repeat-y;
}
But it is not repeating. I just see a 1px image instead of this desired green line. Something like this.
Why is it not repeating in y, after I've set background-repeat: repeat-y;. How do I make this like the desired line that repeats along y, and stretch/size accordingly as per the parent div and the news content?
EDIT
This is not a duplicate of that. I have background image that I need to repeat along y-axis.
You could wrap news description and image into a single <article> element
Then you may assign a border-left to the new inserted element. Doing so you avoid to use empty markup for styling purpose only and you also improve the semantic of the page.
<article>
<div class="newsDescription col-md-7">
<div class="row">
...
</div>
</div>
<div class="newsActions col-md-2">
<div class="row">
...
</div>
</div>
</article>
CSS
article {
border-left: 1px green solid;
padding-left: ... /* give some space between border and contents */
}
You can set height:inherit to set child div's height same as parent div.