CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
Victor Feitosa
Victor Feitosa

Reputation: 557

How to make bullet points aligned in list

I am doing a little exercise where I have to copy this

I am having some trouble to align the bullets like he does. My problem is that my content is aligned bot not the bullets.

Here it is

My HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
    <div class="container">
    <div class="row">
        <div class="col-lg-3" id="left-box">
            <h3 class="text-center">Some Favorites</h3>
            <ul class="text-center">
                <li>Celery Root</li>
                <li>Spaghetti Squash</li>
                <li>Killer Mushrooms</li>
            </ul>
        </div>
        <div class="col-lg-9">
            <h1>Wild & Wacky Vegetables</h1>
            <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
            <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
            You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
        </div>
    </div>
</div>
</body>

My CSS:

 #left-box{
    background-color: whitesmoke;
    margin-top: 2%;
    border: 1px solid white;
    border-radius: 3px;
}

ul{
    padding-left: 0;
}

ul li{
    list-style-position: inside;
}

Upvotes: 0

Views: 1118

Answers (3)

LXhelili
LXhelili

Reputation: 980

Remove class text-center from ul tag and try to change ul tag directly or using another class with this style.

ul {
  display: table;
  margin: 0 auto;
}

Example here: https://jsfiddle.net/lavdimxhelii/p93ccj07/

Upvotes: 1

Ankit vadariya
Ankit vadariya

Reputation: 1263

Here is your updated code

#left-box{
	background-color: whitesmoke;
	margin-top: 2%;
	border: 1px solid white;
	border-radius: 3px;

}

ul{
	padding-left: 0;
}

ul li{
	list-style-position: inside;
}
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <div class="container-fluid">
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="left-box">
                <h3 class="text-center">Some Favorites</h3>
			<ul>
				<li>Celery Root</li>
				<li>Spaghetti Squash</li>
				<li>Killer Mushrooms</li>
			</ul>
                </div>
                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"><h1>Wild & Wacky Vegetables</h1>
			<p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
			<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
			You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
                    
                </div>
            </div>
        </div>

</body>

Upvotes: 1

Dekel
Dekel

Reputation: 62536

You need to remove the centering of the text inside your ul element:

        <h3 class="text-center">Some Favorites</h3>
        <ul>
            <li>Celery Root</li>
            <li>Spaghetti Squash</li>
            <li>Killer Mushrooms</li>
        </ul>

Here is a working example:
https://jsfiddle.net/m782jg44/1/

If you want to align the entire list - you will have to set it's width and center the container (the ul element, not the text).

Here is a working example:
https://jsfiddle.net/m782jg44/2/

Upvotes: 1

Related Questions