I'm using the Bootstrap framework and I've created a column in which I've used text-align:center; css property on two elements and there are not aligned the same and I don't understand why.
Here's the markup:
<div class="row text-center">
<div class="col-lg-4">
<div class="thumbnail-header">
<h1>Brand</h1>
</div>
<div class="thumbnail-content">
<ul>
<li>Identity</li>
<li>Strategy Brand</li>
<li>Identity Manual</li>
<li>Guide Brand</li>
</ul>
</div>
</div>
'text-center' class has text-align:center; css property.
And here is a working fiddle: fiddle
Can someone explain me why those elements are not aligned properly ?
It's the default left padding on the <ul>
ul {
padding-left: 0;
}
Updated fiddle
I suggest instead of using .text-center Helper class use the .center-block for centering an element in bootstrap because this helper class use margin and display css properties for cenetering the element
Related
I am creating a list and styling it with Bootstrap. The HTML looks something like this:
<div class="list-group">
Name
Name
</div>
When this displays, the list elements take up the whole page.
If not for the coloring, this would not be a big deal. How can I make the list elements stretch only as far as the text? Thanks!
try adding style display:inline-block to the .list-group
.list-group{
display:inline-block;
}
<div class="list-group">
Name
Name
</div>
You can use display:inline or display:inline-block property to get it
.somethingClass > .list-group {
display:inline-block; /* You can use inline also */
}
HTML PART
<div class="somethingClass">
<div class="list-group">
Name
Name
</div>
</div>
When you are using somethingClass > list-group it will effect only list-group when it will come inside the somethingCalss so bootstrap list-group class is save with own propery which gives by bootstrap.
Bootstrap includes shorthand responsive margin and padding utility classes to modify an element’s appearance.
<li class="list-group-item p-0">Something in list.</li>
.p-0 { padding: 0 !important; }
See bootstrap documentation reference for bootstrap 4.0
As of Bootstrap 4.6, you can use the class d-inline-block to set the property display: inline-block directly:
<div class="list-group d-inline-block">
Name
Name
</div>
See Bootstrap's Documentation on setting the display property.
Use the Bootstrap grid system and enclose the list group as in example below.
<div class="col-12 col-md-6">
<ul class="list-group">
<li class="list-group-item">one.</li>
<li class="list-group-item">two.</li>
<li class="list-group-item">three.</li>
</ul>
</div>
I use Bootstrap 3.3.7 and I wonder how to display:
Header element h1 aligned to the left of the page-header
button element aligned to the right of the page-header
Both elements being on the same baseline
Current code is pasted below and the working example is on JSFiddle. My question is similar to this question, but proposed solution does not work for me.
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<div class="pull-left">
<h1>Hello World <small>Home Page</small></h1>
</div>
<div class="pull-right">
<button class="btn btn-primary">Submit</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
Your problem is with the CSS, not the markup
The fiddle you provided works as expected, the reason why the elements don't seem to align properly is because bootstrap sets a default margin on h1 elements while it doesn't do so with buttons.
The easiest way to fix this is to add
h1 {
margin: 0;
}
To your site's CSS.
Alternatively for similar output in a "bootstrappy" way, you can look into bootstrap navbars and branded bootstrap navbars.
Remove top margin from header element:
.page-header h1 {
margin-top: 0;
}
I am trying to place three divs side by side and
fourth div in the next row. I used float:left and width:33%.
What else property I need to apply to achieve this?
https://jsfiddle.net/wdvpubau/
Edit: One more thing regarding the same css styles,
I made property display:inline within css .divinline , but there is no difference in rendering. I had learnt that display:block will occupy the entire row. Is it being overridden?
Another way is as below
<div>
<div style="float:left;width:100px">1</div>
<div style="float:left;width:100px">2</div>
<div style="float:left;width:100px">3</div>
<div style="float:left;width:100px">4</div>
</div>
As rightly suggested by #Imran, you need to remove the . before the css class names while you use them in html. Try:
.divinline{
display:block;
float:left;
width:33%;
}
.maindiv{
display:block;
}
<div class="maindiv">
<div class="divinline"> <!-- here the class is class="divline" and not .divline -->
HI
</div>
<div class="divinline">
HI
</div>
<div class="divinline">
HI
</div>
<div class="divinline">
HI
</div>
</div>
Fiddle here : https://jsfiddle.net/nithin_krishnan/r0Lyydg8/
There are some options I can choose from when it comes to horizontal center alignment with Bootstap.
I can either use offset class or use blank span class as a placeholder.
One other option can be using custom alignment like the following
.center {
float: none;
margin: 0 auto;
}
None of these options solve my issue because the content of the div container has to fill up the width by 100%.
Let's say I have the following
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 offset4">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
</div>
If the buttons do not fill up the whole div space of span4, I won't get the real center alignment. Perhaps, I can make the content stretch to 100% but I don't know if this is any good practice.
Here I have a canvas to play with. JS BIN
Since you have inline elements you can just use the .text-center class on the span, also your're probably better off using offsets than empty elements:
HTML
<div class="row-fluid">
<div class="span4 offset4 text-center">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
Updated demo: http://jsbin.com/ayuFEhO/2/edit
You don't need add a new class, if you want horizontal align this buttons, just use .text-center here is a bin http://jsbin.com/UVeGejO/1/edit
Obs: text-center class already exist on twitter's bootstrap code.
I'm having an issue using twitter bootstrap on my webpage http://scrapp.site90.com/ . Header is wrapped in container and has .row around it, but seems that because of margin-left: -20px this row cannot align with other content. Is it possible to fix it? I tried to change value of margin-left, but then layout gets really messed up.
Instead of using the span* you could use pull-left on the H1..
<div class="row">
<h1 class="pull-left">Take a look at our work to see what we mean</h1>
<div>
<ul class="social inline pull-right">
<li>..</li>
</ul>
</div>
</div>