Reduce Bootstrap list width - html

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>

Related

Overriding BootStrap CSS - difficulty understanding specificity

I'm absolutely new to coding and attempting a basic website, and have used the BootStrap CSS as a basis.
I've set up nav-pills and managed to customise them thus far (spacing, font, background colours etc) but struggled for hours trying to change the background colour of my header behind the nav-pills - 1 white b/g to 2 grey b/g.
My HTML header container reads:
<div class="header">
<div class="row">
<p id="navigator">
[nav-pills code]
</>
</div>
</div>
With a lot of researching into specificity I thought this may be my problem so I tried CSS code:
.header .row #navigator {
background-color: #CCCDD9;
}
to no avail, but found that simply did work:
.header .row {
background-color: #CCCDD9;
}
now produced the desired override of the bootstrap CSS even though I was not even selecting the #navigator ID to increase rule specifity. Could someone explain why this method works?
Further, as the new background does not appear for the other website pages I did not add the #navigator header ID to, is there a method (besides adding the #navigator ID to each HTML page) of modifying my CSS which would make this override work across all pages?
In your first CSS example, you are targeting the paragraph tag within the row, but in the HTML you provided your paragraph tag is malformed (missing a closure and contains no content). Because of this, the paragraph tag is being rendered with 0 height which explains why you don't see the background color. If you add content to the paragraph tag and you add a closure, it will work with the first bit of CSS you posted.
In other words, this is not a specificity issue.
<div class="header">
<div class="row">
<div class="col-sm-12">
<p id="navigator">Testing</p>
</div>
</div>
</div>
Bootply Example
After re-reading your question, I don't think you should be using a paragraph tag at all. It looks like you were trying to use it as a container for the pills, but you should be using either an unordered list (like in the Bootstrap docs example or a div). Here's some sample code:
HTML:
<div class="header">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
</div>
</div>
CSS:
.nav-pills {
background-color: #CCCDD9;
}
Bootply

How does one right-justify bootstrap pills with css

I have a header with three sections, left, middle and right. I cant seem to come up with the proper css to make the column on the right (with 'email history' and 'back to list') float to the right side of the column. How can anyone tell me how this is done? Any help is appreciated.
<div class="col-sm-5" style="text-align:left">
<button type="submit" class="btn btn-primary btn-lg navbar-btn">Save Contact</button>
</div>
<div class="col-sm-2" style="text-align:center">
<h2 class="branding">Edit Contact</h2>
</div>
<div class="col-sm-5">
<ul class="nav nav-pills">
<li class="active">Email History</li>
<li class="active">Back To List</li>
</ul>
</div>
NOTE: The answer below is valid for Bootstrap 2 and 3; in Bootstrap 4 the equivalent class is float-right, and viewport-specific float classes are also available.
The easiest option is to add the class pull-right to the ul element. This will float the pills to the right.
Sidenote: you can replace those inline styles with the helper classes text-left (which is often redundant) and text-center.
Here's a bootply example: http://www.bootply.com/134139
Need to overwrite some Bootstrap styling...
You'll need to remove the float on the list items and set it to display:inline-block. Then for the unordered-list element, add text-align:left.
Here's the CSS:
ul.nav.nav-pills {
text-align: right;
}
.nav-pills>li {
float: none;
display: inline-block;
}
Enjoy!
Try a style="float:left;" on each div. And a <ul class="nav nav-pills" style="float:right;">. After that clear the float.

align text center not working as expected

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

twitter bootstrap margin-left -20px issue

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>

Twitter-Bootstrap - put simple elements inline

Is there anyway to put 2 <a> elements displaying inline?
i tryed :
<div class="form-inline">
<a>jjj</a>
<a>sss</a>
</div>
and also
<div class="row-fluid">
<a class="inline">jjj</a>
<a class="inline">sss</a>
</div>
but it doesn't work.
Anchor tags by default should be displayed inline. You must have some extra styling setting them to display as block elements or something similar.
Using your code, here is a working JSFiddle.
Inspect your page to find out where the anchor's display is being set and either modify that or set the element to display:inline after that. As you've already added class="inline" you can simply just add:
a { display:block; /* Pre-existing code */ }
a.inline {
display:inline;
}
Also as a note I don't think row-fluid is designed to work without Bootstrap's other scaffolding elements, if you want a full-width row you should use:
<div class="row-fluid">
<div class="span12">
<a class="inline">jjj</a>
<a class="inline">sss</a>
</div>
</div>